主题配置网站如何修改样式？CSS变量怎么用？
CSS变量在主题开发中的高级应用
技巧：
| 应用场景 | 变量定义示例 | 调用方式 |
|---|---|---|
| 主题色切换 | --primary-color: #3498db; |
color: var(--primary-color) |
| 响应式调整 | --font-size: clamp(1rem, 2vw, 1.5rem) |
媒体查询更新变量值 |
| 暗黑模式 | @media (prefers-color-scheme: dark) |
系统偏好自动切换 |
| 组件隔离 | :root { --button-radius: 5px } |
组件内重写变量 |
| 动态计算 | calc(var(--spacing) * 2) |
实时样式调整 |
- 在
:root定义全局变量 - 使用JavaScript动态修改
document.documentElement.style
更新时间：2025-07-14 13:50:37