如何让phpMyAdmin主题自动跟随浏览器深色模式-phpMyAdmin-PHP中文网

phpMyAdmin 不支持 prefers-color-scheme 自动切换，因其无系统深色模式监听逻辑，所有样式由 PHP 一次性渲染且不响应系统偏好变更；需手动在自定义主题 CSS 中为关键元素添加 body.darkmode 前缀规则，并配合 localStorage + JS 实现自动检测与持久化。

phpMyAdmin 本身不支持 `prefers-color-scheme` 自动切换

它没有内置监听系统深色模式的 js 逻辑，也不会根据 @media (prefers-color-scheme: dark) 动态加载不同 css。所有主题样式都由 php 渲染时一次性注入，后续不响应系统偏好变更。所以你改了 windows/macos 的深色设置，phpmyadmin 界面毫无反应——这不是缓存问题，是机制缺失。

必须手动在自定义主题里补全暗色规则

新版 phpMyAdmin（5.2+）默认主题（如 pmahomme）只提供一套浅色 CSS，body.darkmode 类仅在用户点击右上角「?」图标时由 JS 注入，不是靠系统检测。要让它“自动跟随”，就得在你的自定义主题 CSS 中，把关键选择器同时写两套：

.marked、.clickrow、.tableRow:hover 这些行高亮类，在 body.darkmode 下重定义背景和文字色
按钮、输入框、SQL 编辑器区域（.CodeMirror）也要加 body.darkmode .selector 前缀规则
别漏掉 body:not(.darkmode) 显式限定浅色模式，否则深色规则可能意外生效

`$cfg['CodemirrorTheme']` 和界面主题不是一回事

设置 $cfg['CodemirrorTheme'] = 'dracula' 只影响 SQL 编辑器内部的代码着色，不影响表格、导航栏、按钮等主界面元素。即使编辑器变暗了，结果表格还是白底黑字——这是常见误解。真正要统一切换，必须改主题 CSS 里的 body、table、th、td 等全局样式，并确保它们被 body.darkmode 包裹。

浏览器刷新后仍保持深色？得靠 localStorage + JS 注入

phpMyAdmin 不保存用户对 body.darkmode 的偏好，每次新标签页都会回到浅色。要“自动跟随 + 持久化”，需额外加一段内联 JS（放在 themes/custom/mytheme/templates/header.twig 底部或通过 config.inc.php 的 $cfg['ServerDefault'] 钩子注入）：

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
    document.body.classList.add('darkmode');
    localStorage.setItem('pma_darkmode', '1');
} else if (localStorage.getItem('pma_darkmode') === '1') {
    document.body.classList.add('darkmode');
}

注意：这段 JS 必须在开头立即执行，否则页面会先闪白再变暗。

真正难的不是写 CSS，而是确保所有组件（尤其是动态生成的弹窗、AJAX 加载的 SQL 结果页）都受 body.darkmode 控制——稍有遗漏，就会出现部分白、部分黑的割裂感。