phpMyAdmin深色模式颜色异常如何修复-phpMyAdmin-PHP中文网

phpMyAdmin 5.2+ 深色模式依赖 body.darkmode 类而非系统媒体查询，必须以此为前缀重写所有样式并加 !important；需启用 $cfg['DarkMode'] = true，确保 CSS 在 common.css/components.css 中且清除缓存，CodeMirror 需配兼容暗色主题。

深色模式下背景/文字颜色错乱

phpmyadmin 5.2+ 的暗色模式不是靠系统级开关，而是通过 body.darkmode 类动态注入的。如果你改了主题 css 却发现深色模式下按钮发灰、表格文字看不清、sql 编辑器变全黑，大概率是没覆盖这个类下的选择器，或者用了 @media (prefers-color-scheme: dark) 这种无效写法。

body.darkmode 是唯一可靠的触发标识，所有深色样式必须以它为父级前缀（例如 body.darkmode .marked），不能只写 .marked
别在 common.css 里混用 @media 和 body.darkmode —— phpMyAdmin 不解析媒体查询，只认这个 class
深色模式会叠加两层样式：基础主题 + body.darkmode 覆盖，所以你要改的不只是颜色值，还得加 !important（否则被原始 darkmode 规则压住）
常见错乱点：.nav a 在暗色下变成白色文字配浅灰背景、.tablinks 选中态消失、.CodeMirror 编辑区背景和文字同色——这些都得单独写 body.darkmode .nav a 等规则去重置

自定义主题中深色模式未生效

你复制了 pmahomme 到 ./themes/custom/mytheme，也改了 common.css，但切换深色模式后样式毫无变化——问题不在 CSS 写得对不对，而在于 phpMyAdmin 根本没加载你的暗色规则。

检查 mytheme/css/common.css 里是否真包含 body.darkmode 开头的选择器（不是 .darkmode 或 html.darkmode）
确认 config.inc.php 中已启用深色模式支持：$cfg['DarkMode'] = true;（5.2+ 必须显式开启，默认关闭）
phpMyAdmin 不会自动合并你写的暗色规则，它只加载主题目录下的 common.css 和 components.css，所以所有深色适配代码必须放在这两个文件里，不能另建 dark.css
清空 ./js/dist/ 目录下生成的缓存文件（如 theme.min.css），否则旧 CSS 会被直接引用，改了也不生效

CodeMirror 编辑器在深色模式下显示异常

SQL 编辑器在深色模式下变成纯黑底白字、关键字不着色、甚至光标不可见，这不是主题问题，而是 CodeMirror 主题与 phpMyAdmin 暗色逻辑冲突导致的。

PHP

编写健壮的PHP代码，规避类型转换陷阱、数组怪癖及常见安全漏洞。

下载

确保你设置的 $cfg['CodemirrorTheme'] 值对应一个真正兼容暗色模式的 theme 文件，比如 dracula 或 material，而不是 default（它只适配亮色）
CodeMirror 主题 CSS 必须放在 ./themes/original/css/codemirror/ 下，且文件名严格为 theme-xxx.css；mytheme 目录下的 CSS 不会影响 CodeMirror
部分主题（如 mdn-like）会强制重设 .CodeMirror 的 background 和 color，但 phpMyAdmin 的 body.darkmode 又会给外层容器加一层深色背景，结果就是双倍黑色——此时要手动在 theme-xxx.css 里删掉或注释掉相关 background 声明
验证是否生效：打开 SQL 页面，右键检查元素，看 .CodeMirror 的 computed style 里 background-color 是来自哪个 CSS 文件，定位到具体规则再调整

切换深色模式后按钮/输入框不可见

点了右上角月亮图标，页面变暗了，但搜索框、提交按钮、下拉箭头全消失了——这是因为原主题里很多控件依赖亮色对比度，而你只改了表格行色，没动表单元素。

必须同步覆盖这些选择器：body.darkmode input[type="text"]、body.darkmode select、body.darkmode button、body.darkmode .btn
特别注意 input:focus 和 button:hover 在暗色下容易和背景融为一体，得单独加 border 或 box-shadow 来强化视觉反馈
图标类（如 .icon-edit、.icon-delete）通常用 SVG 或字体图标，深色模式下可能因 fill 颜色未重置而隐形，需加 body.darkmode .icon-edit { fill: #90caf9 !important; }
别漏掉 textarea 和 pre 元素，它们在 SQL 输出或日志查看页大量出现，深色模式下若没设 color 会直接看不见内容