concrete.css深色模式深度解析prefers-color-scheme一行代码实现系统主题自动切换【免费下载链接】concrete.cssA simple and to the point classless CSS framework项目地址: https://gitcode.com/gh_mirrors/co/concrete.cssconcrete.css 是一款主打极简、无类名的 CSS 框架classless CSS framework它的全部深色模式功能只靠一行media (prefers-color-scheme: dark)媒体查询实现当你的操作系统开启深色模式时网页自动变成深色主题不需要任何 JavaScript也不需要手动点切换主题按钮。本文带你逐行拆解这套一行代码换肤的完整机制并说明如何快速验证和使用它。 为什么 concrete.css 的深色模式如此省力大多数框架实现深色模式需要为每个组件写两套样式浅色一套、深色一套代码量翻倍。而 concrete.css 是**无类名classless**设计——所有样式直接绑定在body、a、button、table这类原生 HTML 标签上并且全站颜色只来自 concrete.css 顶部定义的两个 CSS 变量--fg前景色文字、边框、图标--bg背景色页面、按钮、输入框浅色模式下默认值是:root { --fg: #111; /* 近黑的文字 */ --bg: #fff; /* 纯白的背景 */ }只要换掉这两个变量就等于换掉了整站颜色。深色模式做的正是这件事。✨ 核心原理一行 prefers-color-scheme 的魔法整个深色模式的灵魂就是 concrete.css 中的这 6 行代码media (prefers-color-scheme: dark) { :root { --fg: #fff; --bg: #111; } }它的工作流程只有 3 步浏览器自动检测prefers-color-scheme是浏览器内置的媒体查询会实时读取操作系统的深色模式开关macOS、Windows、Linux、iOS、Android 全部支持。命中就覆盖变量当系统处于深色模式时这段代码把--fg和--bg互换——文字变白、背景变黑。全站自动重绘因为几十处规则正文、链接、按钮、表单、表格、进度条……写的都是var(--fg)/var(--bg)变量一变整页瞬间完成换肤。 关键点浏览器做判断CSS 做切换JavaScript 零参与。系统深浅切换时页面颜色会立即跟着变且刷新、前进、后退都无需任何额外逻辑。 一变全变哪些元素跟着主题走在源码中搜索var(--fg)你会发现深色模式覆盖了几乎整站页面元素浅色模式深色模式页面背景 / 文字白底黑字黑底白字链接a黑色白色按钮与表单输入框白底黑边框黑底白边框表头、表格行、hr分割线黑色细线白色细线引用块、代码块左边框黑色粗线白色粗线进度条progress白底黑填充黑底白填充占位符文字placeholder黑色斜体白色斜体也就是说你拿到的是一个出厂即完整的深色主题不需要自己给每个组件补样式。 如何启用一行 HTML 即可体验方式一直接在 HTML 中引入。把下面一行放进head深色模式就自动生效可参考项目自带的演示页 index.html 的用法link relstylesheet hrefconcrete.min.css方式二通过 npm 引入到 JS 项目依赖声明见 package.jsonnpm install concrete.css然后在代码中import concrete.css即可。如何验证深色模式两步走把操作系统切换到深色模式设置 → 显示 → 深色模式刷新页面整站颜色自动反转用浏览器开发者工具模拟媒体功能Emulate CSS media features →prefers-color-scheme: dark无需改系统设置即可预览效果。 成本对比压缩后只有 60 个字符把上面的深色模式规则压缩后在 concrete.min.css 中只剩这一小段media (prefers-color-scheme:dark){:root{--fg:#fff;--bg:#111}}对比一下实现同等效果的常见方案❌ JS 监听 手动 toggle需要监听系统变化、存本地、写两套 class 样式❌ 双份 CSS 文件light.css / dark.css体积翻倍还要写切换逻辑✅ concrete.css1 条媒体查询 2 个变量总计不到 60 字符且天然支持系统随时切换。❓ 常见问题Q1浏览器不支持 prefers-color-scheme 会怎样不会报错。不支持的浏览器会直接跳过这条媒体查询页面固定显示浅色主题——这就是天然的优雅降级。Q2想换一套深色配色比如深蓝底可以吗可以。只需在你自己的样式中覆盖变量即可例如把--bg改成#1a1a2e所有元素立刻跟随无需改动 concrete.css 一行代码。Q3可以固定为深色、无视系统设置吗concrete.css 本身不做这件事这是它的极简哲学但你在自己样式里直接给:root写死--fg/--bg就能固定任意主题。 总结concrete.css 的深色模式是一个值得学习的少即是多范例用CSS 变量收敛全站颜色为 2 个入口用prefers-color-scheme 媒体查询让浏览器代替 JS 做主题决策用classless 标签样式保证零类名即可一变全变。如果你的站点也需要跟随系统的深色模式这 6 行代码的设计思路变量 媒体查询可以直接抄走成本几乎为零。【免费下载链接】concrete.cssA simple and to the point classless CSS framework项目地址: https://gitcode.com/gh_mirrors/co/concrete.css创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考