# juln-color

> global color sdk

Latest version **1.0.0** (published 2022-01-24) · ISC license · 0 weekly downloads

## Install

```sh
npm install juln-color
pnpm add juln-color
yarn add juln-color
bun add juln-color
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2022-01-24 |
| First published | 2022-01-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 47.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | juln |
| Maintainers | juln |
| Keywords | color, juln, juln-color |

## Links

- npm: https://www.npmjs.com/package/juln-color
- npm.io page: https://npm.io/package/juln-color

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2022-01-24

## README

# juln-color

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

## 导航

- [快速开始](./start.md)
- [色值列表](./color.md)
- [开发-颜色配置](./dev.md)

## 原理

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

1. 利用 [css 变量](https://www.w3schools.com/css/css3_variables.asp)，配合 `css` 的属性选择器，自动切换主题色；

2. 根据媒体查询 `@media (prefers-color-scheme:dark)` 自动切换，但会有 [兼容性问题](https://caniuse.com/?search=prefers-color-scheme%3Adark)；

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`

---
_Source: https://npm.io/package/juln-color · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._