纯CSS实现主题切换器的核心思路是利用隐藏的复选框作为状态载体，通过CSS的:checked伪类监听选中状态，结合CSS变量控制主题样式，同时切换不同状态的SVG图标，整个过程不需要任何JavaScript代码参与。
核心实现原理
整个功能的实现依赖三个核心点：
- 复选框的
checked状态作为主题切换的触发源，默认隐藏复选框本身，只展示关联的标签元素 - 使用CSS变量定义不同主题的配色方案，根据复选框状态切换变量值
- 准备两套对应的SVG图标，通过CSS控制不同状态下的图标显示与隐藏
基础HTML结构
首先需要搭建基础的结构，包含一个隐藏的复选框、关联的标签元素，以及标签内放置的两套SVG图标：
<div class="theme-switcher">
<!-- 隐藏的复选框，作为状态载体 -->
<input type="checkbox" id="theme-toggle" class="theme-checkbox">
<label for="theme-toggle" class="theme-label">
<!-- 亮色主题图标 -->
<svg class="icon icon-sun" viewBox="0 0 24 24" width="24" height="24">
<circle cx="12" cy="12" r="5" fill="currentColor"/>
<line x1="12" y1="1" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
<line x1="12" y1="21" x2="12" y2="23" stroke="currentColor" stroke-width="2"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" stroke="currentColor" stroke-width="2"/>
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" stroke="currentColor" stroke-width="2"/>
<line x1="1" y1="12" x2="3" y2="12" stroke="currentColor" stroke-width="2"/>
<line x1="21" y1="12" x2="23" y2="12" stroke="currentColor" stroke-width="2"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" stroke="currentColor" stroke-width="2"/>
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" stroke="currentColor" stroke-width="2"/>
</svg>
<!-- 暗色主题图标 -->
<svg class="icon icon-moon" viewBox="0 0 24 24" width="24" height="24">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" fill="currentColor"/>
</svg>
</label>
</div>CSS样式配置
接下来编写CSS代码，首先定义全局的CSS变量，默认使用亮色主题的配置，然后隐藏复选框，设置标签的样式，最后根据复选框的选中状态切换主题和图标：
/* 定义默认亮色主题的CSS变量 */
:root {
--bg-color: #ffffff;
--text-color: #333333;
--icon-color: #f39c12;
}
/* 暗色主题的CSS变量配置 */
.theme-checkbox:checked ~ .theme-label {
--bg-color: #1a1a1a;
--text-color: #f0f0f0;
--icon-color: #f1c40f;
}
/* 隐藏复选框本身 */
.theme-checkbox {
display: none;
}
/* 标签样式，作为点击触发区域 */
.theme-label {
display: inline-block;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--bg-color);
cursor: pointer;
position: relative;
transition: background-color 0.3s ease;
border: 1px solid #ddd;
}
/* 图标通用样式 */
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--icon-color);
transition: opacity 0.3s ease, transform 0.3s ease;
}
/* 默认隐藏月亮图标 */
.icon-moon {
opacity: 0;
transform: translate(-50%, -50%) rotate(-90deg);
}
/* 复选框选中时的图标切换逻辑 */
.theme-checkbox:checked ~ .theme-label .icon-sun {
opacity: 0;
transform: translate(-50%, -50%) rotate(90deg);
}
.theme-checkbox:checked ~ .theme-label .icon-moon {
opacity: 1;
transform: translate(-50%, -50%) rotate(0deg);
}
/* 全局主题样式应用 */
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
margin: 0;
padding: 20px;
font-family: sans-serif;
}交互逻辑说明
当用户点击标签区域时，会触发关联的复选框状态切换：
- 未选中时，复选框处于未勾选状态，月亮图标透明度为0不显示，太阳图标正常展示，页面使用亮色主题的CSS变量值
- 点击后复选框变为选中状态，太阳图标透明度变为0同时旋转隐藏，月亮图标透明度变为1旋转显示，同时页面切换为暗色主题的CSS变量值
- 再次点击会回到未选中状态，完成主题的来回切换
适配优化建议
如果需要适配更多场景，可以做以下优化：
- 将主题状态存储到localStorage，页面刷新后保持主题状态，只需要在首次加载时读取存储值设置复选框状态，不过这一步需要少量JavaScript，若严格纯CSS可以忽略
- 增加图标的悬停效果，给
.theme-label添加:hover伪类，调整边框颜色或背景色提升交互体验 - 如果页面有多个主题切换器，可以给复选框和标签添加唯一id，避免状态冲突
完整示例验证
将上面的HTML和CSS代码放到同一个文件中，用浏览器打开就可以看到效果，点击切换器图标会平滑切换主题和图标，整个过程没有JavaScript代码参与，完全由CSS和HTML原生特性实现。