浅色与深色主题生成器（CSS 变量）

浅色与深色主题生成器（CSS 变量）: 用途

好的深色主题并不是浅色主题的反转。生成器会根据你的品牌主色，为两种主题生成 CSS 变量（背景、表面、边框、文字、次要文字、主色及其上的文字），灰色可选中性或偏向品牌色。

每组颜色的对比度都按 WCAG 公式计算，并标记为 AAA、AA 或不足；主色会被调整，使其在两种主题下都超过 4.5:1。代码通过系统模式（prefers-color-scheme）切换主题，也可以选择用带 data-theme 的按钮切换。

使用方法

1. 选择主色。
2. 查看预览和对比度表。
3. 复制 CSS 变量。

使用场景

• 为网站制作深色模式。
• 为新项目搭建配色。
• 检查颜色的无障碍性。

常见问题

为什么深色模式不只是把颜色反转？

直接反转会让背景变成纯黑、品牌色刺眼，容易让眼睛疲劳。好的深色主题使用很深的灰色背景、接近白色的文字，以及主色的较浅版本，既保持对比度又不刺眼。

对比度中的 AA 和 AAA 是什么意思？

它们是 WCAG 无障碍指南的等级。AA 要求普通文字的对比度至少为 4.5:1，AAA 要求 7:1。生成器会显示每组颜色的对比度，并在低于 4.5:1 时提醒你。

如何用按钮切换主题？

代码既响应系统模式（prefers-color-scheme），也响应 html 上的 data-theme 属性。用按钮设置 data-theme="dark" 或 "light" 即可强制使用所选主题；本站的“深色模式按钮”工具可生成这个按钮。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具