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'] 钩子注入):
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 必须在 开头立即执行,否则页面会先闪白再变暗。
立即学习“PHP免费学习笔记(深入)”;
真正难的不是写 CSS,而是确保所有组件(尤其是动态生成的弹窗、AJAX 加载的 SQL 结果页)都受 body.darkmode 控制——稍有遗漏,就会出现部分白、部分黑的割裂感。



















