深浅主题
深浅主题预览
同一配色在亮背景和暗背景下的感觉完全不同；这里同时预览两种模式，帮你确认品牌色在深色模式下依然成立。
浅色模式
深色模式
关于深浅主题
为什么需要双模式
同一个颜色在白底上可能太刺眼，在黑底上可能太暗淡。好的配色要在两种背景下都保持清晰与品牌感。
生成逻辑
以基准色为中心，向亮、向暗各取两档，分别铺在浅灰与深灰画布上预览；同时输出 :root 与 .dark 两套 CSS 变量。
配合对比度
主题预览只解决“好不好看”，文字能不能看清请用「对比度检测」或「配色审计」再核一遍。
工具介绍与使用说明
📘主题预览输入品牌色，同时展示它在亮色与暗色界面下的完整色板与 CSS 变量。
- 输入一个品牌色，工具同时预览亮 / 暗两套界面的完整色板。
- 查看每个语义色在两种主题下的表现，确保对比度达标。
- 导出 CSS 变量，直接用于主题切换逻辑。
使用提示
💡- 深色模式不是把颜色调暗，而是整体降低明度并调整对比。
- 预览满意后复制 CSS，直接覆盖到你项目的 :root 与 .dark。
- 文字在两种模式下都能看清，记得再用「对比度检测」核一遍。