本教程将指导您如何使用纯 css 和 scss 创建一个带有动态 svg 图标的主题切换器。通过隐藏原生复选框并利用其 `:checked` 伪类，结合 css 兄弟选择器和后代选择器，我们将实现根据切换状态显示或隐藏不同 svg 图标的功能，从而打造一个交互式且视觉吸引力强的主题切换组件。
在现代网页设计中，主题切换器（如深色/浅色模式切换）已成为常见功能。实现这类组件通常涉及 JavaScript，但通过巧妙运用 CSS，我们也能打造一个纯 CSS 驱动、响应用户交互的切换器，尤其是在需要根据状态切换图标时。本教程将深入探讨如何利用隐藏的复选框、CSS 伪类和选择器，以及 SVG 图标，构建一个功能完善的主题切换组件。
1. HTML 结构：组件骨架
首先，我们需要一个语义化的 HTML 结构来承载切换器。核心思想是使用一个 label 元素包裹一个隐藏的 input[type="checkbox"]，并利用 label 来触发复选框的状态改变。图标（这里是太阳和月亮 SVG）则嵌套在另一个容器中。
- label.ThemeToggler: 作为整个切换器的可点击区域，通过 for="ThemeTogglerID" 关联到复选框。
- input.ThemeTogglerInput: 实际的复选框，通过 display: none; 隐藏。它的 checked 状态是控制切换逻辑的关键。
- div.ThemeTogglerFill: 切换器的视觉填充区域，包含移动的滑块和图标。
- div.SunIcon 和 div.MoonIcon: 分别包裹太阳和月亮 SVG 图标。它们将根据复选框状态进行显示/隐藏。
2. SCSS 基础样式与变量
为了提高代码的可维护性和可读性，我们使用 SCSS 预处理器，并定义一系列变量来管理尺寸、颜色等属性。
$width: 80px;
$height: 44px;
$border-radius: 50px;
$circle-size: $height - 4px; // 切换滑块的尺寸
$icon-size: $circle-size - 2px; // 图标的尺寸
$neutral: red;
$secondary: white;
$base-100: white;
$base-200: gray;
$base-300: black;
$base-content: white;
// 切换器容器样式
.ThemeToggler {
width: $width;
height: $height;
flex-shrink: 0;
border-radius: $border-radius;
background-color: $neutral;
border: 1px solid $base-100;
display: inline-block;
cursor: pointer;
&:hover {
border-color: $secondary;
}
}
// 切换滑块的容器及伪元素
.ThemeTogglerFill {
position: relative; // 为内部图标和伪元素提供定位上下文
&:before {
content: "";
position: absolute;
top: 1px;
left: 1px;
height: $circle-size;
width: $circle-size;
background: $base-300;
box-shadow: 1px 0px 4px rgba(0, 0, 0, 0.15);
border-radius: $border-radius;
transition: background-color 0.25s, transform 0.25s; // 添加过渡效果
}
}
// 图标基础样式混入
@mixin icon {
position: absolute; // 将图标绝对定位
display: block;
width: 
