为 WordPress 管理仪表板（后台）添加暗模式，既能减少长时间使用时的视觉疲劳，也能提升夜间操作的舒适度。实现方式有插件法（推荐新手） 和手动代码法（适合轻度技术用户），以下是具体步骤：
借助专门的暗模式插件，无需代码即可快速为后台启用暗模式，支持切换、自定义样式等功能。推荐两款主流插件：
-
安装插件
-
进入「设置」→「Dark Mode」，可调整：
- 暗模式背景色、文字色、链接色；
- 按钮、输入框的高亮颜色；
- 是否默认开启暗模式（打开后台自动进入暗模式）。
如果需要同时为网站前台和后台添加暗模式，推荐这款插件：
- 安装并激活 “WP Dark Mode” 插件（搜索后安装）。
- 进入「WP Dark Mode」→「Admin Dark Mode」，勾选「启用管理员暗模式」。
- 可自定义后台暗模式的配色方案（预设多种主题）、切换按钮位置（如顶部工具栏、侧边栏），以及是否跟随系统暗模式（自动匹配电脑系统的明暗设置）。
如果不想安装插件，可通过添加自定义 CSS 代码为后台强制启用暗模式，或添加切换按钮。步骤如下：
- 进入 WordPress 后台，进入「外观」→「主题文件编辑器」，选择当前主题的
functions.php 文件（建议先备份该文件，避免出错）。
- 在文件末尾添加以下代码（作用：为后台加载自定义暗模式样式）：
add_action('admin_head', 'wp_admin_dark_mode_css');
function wp_admin_dark_mode_css() {
echo '
<style>
/* 暗模式基础样式 */
body.wp-admin {
background-color: #1d1d1d !important;
color: #f0f0f0 !important;
}
/* 菜单和面板背景 */
#adminmenu, #adminmenuback, #adminmenuwrap, .wp-sidebar {
background-color: #2d2d2d !important;
}
#adminmenu a {
color: #ccc !important;
}
#adminmenu a:hover, #adminmenu li.current a.menu-top {
color: #fff !important;
background-color: #3d3d3d !important;
}
/* 卡片和表单 */
.wp-admin .card, .postbox, .metabox-holder {
background-color: #2d2d2d !important;
border-color: #444 !important;
}
input, textarea, select {
background-color: #3d3d3d !important;
color: #fff !important;
border-color: #555 !important;
}
/* 按钮 */
.button, .button-primary {
background-color: #007cba !important;
color: #fff !important;
border-color: #006ba1 !important;
}
.button:hover {
background-color: #006ba1 !important;
}
/* 文字链接 */
a {
color: #00bfff !important;
}
a:hover {
color: #0099cc !important;
}
</style>
';
}
- 点击「更新文件」，刷新后台页面，即可看到暗模式效果。
如果需要手动切换模式，可在上述代码基础上增加切换功能（需添加 JavaScript）：
- 在
functions.php 中继续添加以下代码（在之前的函数下方）：
add_action('admin_bar_menu', 'add_dark_mode_toggle', 100);
function add_dark_mode_toggle($wp_admin_bar) {
$wp_admin_bar->add_node(array(
'id' => 'dark-mode-toggle',
'title' => '<span class="dark-mode-icon">🌙</span> 切换暗模式',
'href' => '#',
'meta' => array(
'onclick' => "document.body.classList.toggle('wp-admin-dark-mode'); return false;",
'class' => 'dark-mode-toggle'
)
));
}
add_action('admin_head', 'wp_admin_dark_mode_toggle_css');
function wp_admin_dark_mode_toggle_css() {
echo '
<style>
/* 默认关闭暗模式 */
body.wp-admin {
background-color: #f0f0f1 !important;
color: #1d2327 !important;
transition: background-color 0.3s;
}
/* 开启暗模式时的样式 */
body.wp-admin.wp-admin-dark-mode {
background-color: #1d1d1d !important;
color: #f0f0f0 !important;
}
body.wp-admin.wp-admin-dark-mode #adminmenu,
body.wp-admin.wp-admin-dark-mode #adminmenuback,
body.wp-admin.wp-admin-dark-mode #adminmenuwrap {
background-color: #2d2d2d !important;
}
/* 其他元素的明暗样式（省略部分重复代码，参考步骤1的CSS按需补充） */
</style>
';
}
- 更新文件后，后台顶部工具栏会出现 “切换暗模式” 按钮（显示🌙图标），点击即可切换明暗模式。
- 兼容性：手动代码法可能因主题或插件冲突导致样式错乱（如某些后台插件的自定义界面未适配暗模式），此时建议改用插件法（插件会自动处理兼容性）。
- 样式调整：如果暗模式下某些元素（如通知、表格）显示异常，可在自定义 CSS 中针对性修改（按 F12 打开开发者工具，定位元素类名后添加样式）。
- 性能：插件法会额外加载少量资源，但对后台性能影响极小；代码法更轻量，但需要手动维护样式更新。
- 新手首选插件法：Dark Mode for WordPress Admin 或 WP Dark Mode 可一键开启暗模式，支持自定义和切换，无需担心兼容性。
- 技术用户选代码法：通过自定义 CSS 和简单 JS 实现轻量暗模式，适合追求极简和个性化样式的用户。
两种方法都能有效提升后台使用体验，根据自己的技术水平选择即可～
发表评论 取消回复