网页DarkMode

目标

主题化功能长期存在，可供用户前端自行切换

• LightMode：日间模式、浅色模式、白色模式
• DarkMode：夜间模式、深色模式、黑色模式

中文表达较多，下文默认使用英文表达

色板：

https://materialui.co/colors

Tailwind Color Palette

https://antv.vision/zh/docs/specification/language/palette

Ant Design关于配色的

https://ant.design/docs/spec/colors-cn

https://ant.design/docs/spec/dark-cn

https://github.com/ant-design/ant-design/blob/5ab2783ff00d4b1da04bb213c6b12de43e7649eb/components/style/color/colors.less

Leetcode是如何做Darkmode的？

CSS中var()和:root。root设置默认色板，切换成darkmode时添加.dark类名，该类下有主题色板，优先级覆盖默认色板，达到切换效果。

叫法：C - s - s，var（哇！）

现有方案

可以按变量出现的时间分为运行时和编译时两种类型的方案

运行时方案

• 使用css var方式
• 使用less运行时方式，可以在线实时编译less代码
• 使用js操作样式代码

编译时方案

使用css预处理器，使用scss/sass、less等预处理器在项目构建时生成多套样式代码

预期问题

1. 项目内无样式规范，已有样式不统一
2. ElementUI样式处理
3. 是否存在特殊组件不希望被主题切换影响
4. 主题化方案，及色板