在网页开发中，按条件切换主题是提升用户体验的常见需求，通过CSS的相关特性可以高效实现不同场景下的主题切换逻辑，不需要复杂的JavaScript代码支撑。
基于媒体查询的自动主题切换
如果用户的需求是根据用户的系统主题偏好自动切换亮暗主题，那么可以直接使用CSS的prefers-color-scheme媒体查询实现，这种方式不需要任何用户交互操作，完全由系统设置决定。
首先定义默认的主题变量，然后在媒体查询中覆盖暗色主题的变量值：
/* 定义默认亮色主题变量 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--border-color: #e5e5e5;
}
/* 当用户系统设置为暗色主题时，覆盖变量 */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--border-color: #444444;
}
}
/* 使用变量设置页面样式 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s, color 0.3s;
}
.card {
border: 1px solid var(--border-color);
padding: 16px;
border-radius: 8px;
}
基于自定义属性和状态切换的多主题实现
如果需要支持用户手动选择多个主题，比如亮色、暗色、护眼模式等，可以结合CSS自定义属性和HTML的状态属性实现，通过切换根元素的属性值来触发主题变量的变化。
实现步骤
- 在根元素上定义不同主题对应的自定义属性集合
- 通过切换根元素的
data-theme属性值来切换主题 - 使用JavaScript监听用户的选择操作，修改根元素的属性值
对应的CSS代码如下：
/* 默认亮色主题 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--primary-color: #1677ff;
}
/* 暗色主题 */
:root[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--primary-color: #4096ff;
}
/* 护眼主题 */
:root[data-theme="eye-protect"] {
--bg-color: #c7edcc;
--text-color: #333333;
--primary-color: #2e7d32;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: all 0.3s;
}
.btn {
background-color: var(--primary-color);
color: #ffffff;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
}
对应的HTML和JavaScript切换逻辑如下：
<div class="theme-switcher">
<button onclick="switchTheme('light')">亮色主题</button>
<button onclick="switchTheme('dark')">暗色主题</button>
<button onclick="switchTheme('eye-protect')">护眼主题</button>
</div>
<p>当前主题内容展示区域</p>
<button class="btn">主题按钮示例</button>
<script>
// 切换主题的函数
function switchTheme(theme) {
// 设置根元素的data-theme属性
document.documentElement.setAttribute('data-theme', theme);
// 可选：将用户选择存储到本地，下次访问时保持主题
localStorage.setItem('selected-theme', theme);
}
// 页面加载时读取本地存储的主题
window.addEventListener('DOMContentLoaded', () => {
const savedTheme = localStorage.getItem('selected-theme');
if (savedTheme) {
document.documentElement.setAttribute('data-theme', savedTheme);
}
});
</script>
基于类名切换的主题实现方式
除了使用data-*属性，也可以通过给根元素添加不同的类名来切换主题，实现逻辑和属性切换类似，只是判断的条件不同。
CSS代码示例：
/* 默认亮色主题 */
body {
--bg-color: #ffffff;
--text-color: #333333;
background-color: var(--bg-color);
color: var(--text-color);
}
/* 暗色主题类名 */
body.dark-theme {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
}
/* 粉色主题类名 */
body.pink-theme {
--bg-color: #fff0f3;
--text-color: #590d22;
}
切换时只需要操作根元素的类名即可：
// 切换到暗色主题
document.body.classList.add('dark-theme');
document.body.classList.remove('pink-theme');
// 切换到粉色主题
document.body.classList.add('pink-theme');
document.body.classList.remove('dark-theme');
注意事项
- 主题切换时建议给相关样式添加
transition过渡属性，避免样式突变导致用户体验不佳 - 自定义属性的命名建议统一前缀，避免和其他样式变量冲突
- 如果主题数量较多，建议将不同主题的变量定义拆分到不同的CSS文件中，通过条件加载减少不必要的代码体积
- 对于不支持CSS自定义属性的旧浏览器，需要提供降级方案，比如使用固定的主题样式作为默认展示
CSS实现主题切换的核心是自定义属性的动态覆盖能力，结合不同的条件判断方式，可以满足绝大多数场景下的主题切换需求，减少JavaScript的逻辑负担。