暗色模式与外观切换

暗色模式如何工作

六哥主题的暗色模式由 PHP 在服务端直接渲染:页面输出时 <html> 标签上已带有 data-bs-theme="dark",浏览器拿到的第一屏就是暗色,弱网或慢速加载下也不会出现先白后暗的闪烁。

开关与切换

  1. 站点是否启用暗色、默认亮色还是暗色,在主题外观设置中配置。
  2. 前台顶部提供外观切换按钮,访客可自行切换,选择会被记住。
  3. 外观跟随站点开关工作,而不是仅被动跟随操作系统;站点未启用暗色时,前台不会单独出现暗色。

其他配色

除亮色、暗色底色外,主题还提供绿色、蓝色等主题色方案。在外观设置中选择后,按钮、链接等强调元素统一变色。

自定义样式注意事项

编写自定义 CSS 时,不要把卡片、输入框等元素写死为白色背景或深色文字,否则暗色下会出现刺眼白块。应使用主题提供的背景与文字变量,让元素随 data-bs-theme 自动适配。

提示:首次配置后建议分别在亮色与暗色下浏览同一页面,确认两种外观都显示正常。