juln-color

支持 css、less、scss、css-in-js 等多种方式开发，只需定义一次，即可自动根据环境切换 黑/白 模式

导航

• 快速开始
• 色值列表
• 开发-颜色配置

原理

本质上来看，想要做到无缝切换 黑/白 样式，主要可以通过以下几种手段实现：

1. 利用 css 变量，配合 css 的属性选择器，自动切换主题色；

2. 根据媒体查询 @media (prefers-color-scheme:dark) 自动切换，但会有 兼容性问题；

3. css-in-js 模式，即通过 js 变量控制色值，可以解决兼容性和色值统一的两个棘手问题，但带来的却是开发不便利、后期维护困难、以及闪屏的缺陷；

综上，目前在前端领域，想要做到无缝切换 黑/白 主题色，就得所有取舍，在不同的需求场景下选择合适的方案。

Note：特别值得一提的是关于 闪屏的缺陷，在目前已知的技术条件下，有一种解决方案是搭配 webpack 做工程化的处理，比如生成 index.html 和 index-dark.html 两个文件，在访问阶段就确定了初始化的主题色，但这需要结合 nginx 的转发，甚至后端和客户端的配合，成本颇高……

主题色自动匹配优先级

1. level 1 - 查询 querystring 参数，若匹配到 night 或 dark 字段，则为 黑夜模式；若匹配到 light 字段，则为 白天模式；以 黑夜模式 优先，譬如：

  // 匹配到黑夜模式
  https://juln.icu?dark=1

  // 匹配到黑夜模式
  https://juln.icu?night=1

  // 匹配到白天模式
  https://juln.icu?light=1

  // 匹配到黑夜模式
  https://juln.icu?dark=1&light=1

2. level 2 - html标签的 attr - theme