亮暗色模式切换的左边栏颜色不同步问题

[mete0rxsc]

检查清单

• 已经阅读过 官方文档 相关内容，并尝试进行搜索。
• 尝试过在本地测试运行官方 demo 源码。
• 尝试过在 Codespace 中测试运行官方 demo 源码。

问题描述

亮暗色模式切换的左边栏颜色不同步问题

问题描述

在制作了切换主题色的JS后发现的这个bug：
如果默认就是白昼light模式的主题，通过主题切换按钮切换黑夜dark模式之后，左侧边栏不会跟随切换暗色dark模式，而是保持白昼light模式
只有在浏览器客户端默认是黑色dark模式(即打开网站就为黑色dark模式)，侧栏菜单样式才会恢复正常切换，如果浏览器默认不是深色模式，那么就会出现侧栏始终为白色现象

对比图

亮色模式：

暗色模式Bug：

正常的暗色模式对比图：

复现步骤：

浏览器设置默认为亮色模式打开网站，后切换暗色模式，即可复现

解决方案：

引入自定义 CSS，覆盖 .leftbar-container 伪元素在暗色模式下的背景样式，使其能正确响应 data-theme="dark" 属性

/* 修复 leftbar 容器在 data-theme="dark" 时的背景 */
html[data-theme="dark"] .l_left .leftbar-container:before {
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: inset 0 0 32px 1px rgba(255, 255, 255, 0.1) !important;
}

/* 确保伪元素 after 在移动端也不受影响（只改背景，不改颜色） */
@media screen and (max-width: 667px) {
  html[data-theme="dark"] .l_left .leftbar-container:after {
    background: rgba(0, 0, 0, 0.2) !important;
  }
}

[lkcdm]

支持。