暗色模式与外观切换
暗色模式如何工作
六哥主题的暗色模式由 PHP 在服务端直接渲染:页面输出时 <html> 标签上已带有 data-bs-theme="dark",浏览器拿到的第一屏就是暗色,弱网或慢速加载下也不会出现先白后暗的闪烁。
开关与切换
- 站点是否启用暗色、默认亮色还是暗色,在主题外观设置中配置。
- 前台顶部提供外观切换按钮,访客可自行切换,选择会被记住。
- 外观跟随站点开关工作,而不是仅被动跟随操作系统;站点未启用暗色时,前台不会单独出现暗色。
其他配色
除亮色、暗色底色外,主题还提供绿色、蓝色等主题色方案。在外观设置中选择后,按钮、链接等强调元素统一变色。
自定义样式注意事项
编写自定义 CSS 时,不要把卡片、输入框等元素写死为白色背景或深色文字,否则暗色下会出现刺眼白块。应使用主题提供的背景与文字变量,让元素随 data-bs-theme 自动适配。
提示:首次配置后建议分别在亮色与暗色下浏览同一页面,确认两种外观都显示正常。