50 字
1 分钟
用 CSS 变量实现多主题切换
CSS 自定义属性（变量）是实现主题系统的最优雅方式。
基本结构
:root { --bg: oklch(0.98 0.005 80); --text: oklch(0.2 0.01 80); --primary: oklch(0.5 0.15 250);}
:root.dark { --bg: oklch(0.15 0.01 250); --text: oklch(0.92 0.005 80);}
:root.parchment { --bg: oklch(0.91 0.045 80); --text: oklch(0.25 0.03 60); --primary: oklch(0.55 0.12 55);}切换主题
只需在 <html> 上增删类名，所有变量自动更新。
分享
如果这篇文章对你有帮助，欢迎分享给更多人！
用 CSS 变量实现多主题切换
https://example.pages.dev/posts/test-theme-css-variables/ 部分信息可能已经过时
相关文章 智能推荐
1
OKLCH 颜色空间入门
技术笔记/CSS 为什么设计师和工程师都在用 OKLCH 替代 HSL？
2
博客排版优化实践
博客搭建/主题定制 字体选择、行高、字间距——让中文博客读起来更舒服。
3
把 Mizuki 部署到 Cloudflare Pages
博客搭建 从本地 Mizuki 博客到 Cloudflare Pages 静态部署的最小配置清单。
4
云边笔记使用指南
博客搭建/Astro 这是一篇中文博客示例，说明如何在 Mizuki 中写文章、放图片、设置分类与标签。
5
Astro 路由系统详解
博客搭建/Astro 探索 Astro 的文件式路由、动态路由和 API 端点。