### 使用
CSS 实现主题切换的技术方案
#### 1. **
CSS 变量的基础应用**
CSS 变量是一种强大的工具，允许开发者定义可以在整个文档中重用的样式值。微盟移动端组件库 Titian 提供了一个很好的例子，通过定义一组
CSS 变量来
实现动态的
主题切换[^1]。
例如，可以定义如下变量：
```
css
:root {
--theme-r: 255; /*
主题红色通道 */
--theme-g: 0; /*
主题绿色通道 */
--theme-b: 0; /*
主题蓝色通道 */
--icon-family: 'Material Icons'; /* 图标字体库 */
--base-radius-size: 4px; /* 基础圆角大小 */
--capsule-radius-size: 20px; /* 胶囊形圆角大小 */
--s: 0.5; /* 圆角缩放因子 */
}
```
这些变量可以直接应用于各种样式声明中，从而简化样式的管理和维护。
---
#### 2. **动态修改
CSS 变量**
通过 JavaScript 动态更改 `:root` 中的变量值，可以实时更新页面的
主题风格。以下是一个简单的示例：
```javascript
document.documentElement.style.setProperty('--theme-r', '0');
document.documentElement.style.setProperty('--theme-g', '255');
document.documentElement.style.setProperty('--theme-b', '0');
```
这段代码将
主题颜色从红色 (`rgb(255, 0, 0)`) 更改为绿色 (`rgb(0, 255, 0)`)[^1]。
---
#### 3. **图标风格
切换**
对于图标的
切换，可以通过改变 `--icon-font-family` 的值来指定不同的字体库。例如：
```
css
.icon {
font-family: var(--icon-family);
}
```
如果需要支持三种不同风格的图标，只需预定义多个字体库并动态替换变量值即可。例如：
```javascript
const iconFamilies = ['Material Icons', 'Font Awesome', 'Ionicons'];
let currentIndex = 0;
function toggleIconFamily() {
document.documentElement.style.setProperty(
'--icon-family',
iconFamilies[(currentIndex = (currentIndex + 1) % iconFamilies.length)]
);
}
```
---
#### 4. **圆角风格
切换**
圆角风格的
切换可以通过调整 `--base-radius-size` 和 `--capsule-radius-size` 的值来
实现。此外，还可以引入一个缩放因子 `--s` 来计算最终的圆角半径。例如：
```
css
.element {
border-radius: calc(var(--base-radius-size) * var(--s));
}
.capsule {
border-radius: calc(var(--capsule-radius-size) * var(--s));
}
```
通过动态修改 `--s` 的值，可以快速
切换圆角风格[^1]。
---
#### 5. **持久化
主题状态**
为了确保用户刷新页面后仍能保留上次选择的
主题，可以借助浏览器的 `localStorage` 存储当前
主题配置。例如：
```javascript
// 获取当前
主题配置
const themeConfig = JSON.parse(localStorage.getItem('theme')) || {};
// 应用默认或保存的
主题
Object.entries(themeConfig).forEach(([key, value]) => {
document.documentElement.style.setProperty(`--${key}`, value);
});
// 更新
主题配置
function updateTheme(key, value) {
const newConfig = { ...themeConfig, [key]: value };
localStorage.setItem('theme', JSON.stringify(newConfig));
Object.keys(newConfig).forEach((k) => {
document.documentElement.style.setProperty(`--${k}`, newConfig[k]);
});
}
```
---
#### 6. **图片和矢量图处理**
- 对于需要频繁更换的品牌 Logo 或展示图片，建议使用 `background-image` 替代 `<img>` 标签，以便根据不同
主题加载相应的资源[^4]。
- SVG 矢量图因其可扩展性和色彩可控性成为理想的选择。通过
CSS 变量可以直接控制 SVG 的填充色和其他属性。例如：
```html
<svg class="icon">
<circle cx="50" cy="50" r="40" fill="var(--theme-color)" />
</svg>
```
---
#### 7. **图表的颜色适配**
对于基于 Canvas 绘制的图表（如 ECharts），可以在初始化之前传递
主题标志或颜色码。例如：
```javascript
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
color: [`rgba(${parseInt(getComputedStyle(document.documentElement).getPropertyValue('--theme-r'))}, ${parseInt(getComputedStyle(document.documentElement).getPropertyValue('--theme-g'))}, ${parseInt(getComputedStyle(document.documentElement).getPropertyValue('--theme-b'))})`],
});
```
---
### 示例代码
以下是一个完整的
主题切换 Demo：
```html
<button onclick="toggleTheme()">
切换主题</button>
<style>
:root {
--theme-r: 255;
--theme-g: 0;
--theme-b: 0;
}
body {
background-color: rgba(var(--theme-r), var(--theme-g), var(--theme-b), 0.8);
}
</style>
<script>
function toggleTheme() {
const currentR = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--theme-r'));
const nextColor = currentR === 255 ? '0' : '255';
document.documentElement.style.setProperty('--theme-r', nextColor);
document.documentElement.style.setProperty('--theme-g', nextColor);
document.documentElement.style.setProperty('--theme-b', nextColor);
}
</script>
```
---
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
989
