让 Tailwind 内置颜色支持暗黑模式
2023-05-08 更新：可以使用 pacexy 大佬写的插件更加方便， https://github.com/pacexy/tailwindcss-variable-colors
最近给 xLog 增加了黑暗模式的支持，但由于 xLog 在开发时候就没对黑暗模式留个口子，比如颜色值不固定写死，或者是使用 CSS 变量的颜色值。而 xLog 真巧使用了 Tailwind，基本上所有的颜色应用场景都用了 Tailwind 自带的色值，但由于 Tailwind 本身自带的色值都是一个固定的值，并不支持根据 Dark Mode 切换色值。
于是我萌生了一个想法，让自带的颜色能根据是否是暗黑模式去切换就行了。
首先第一是，要重新配置 Tailwind，覆写原来内置的所有的颜色，把固定的值全部改写成 CSS 变量。变量的前缀可以自定义，不要冲突就行了，这边就暂定为 tw-colors-i。比如我们需要类似这样的色值配置：
// tailwind.config.ts
module.exports = {
theme: {
colors: {
slate: {
50: 'rgb(var(--tw-colors-i-slate-50))',
100: 'rgb(var(--tw-colors-i-slate-100))',
// ...
},
},
},
}但是以上的写法并不支持 Tailwind 的让颜色获得 Opacity 的能力，所以还需要修改一下。
// tailwind.config.ts
module.exports = {
theme: {
colors: {
slate: {
50: 'rgba(var(--tw-colors-i-slate-50), <alpha-value>)',
100: 'rgba(var(--tw-colors-i-slate-100), <alpha-value>)',
// ...
},
},
},
}加上 <alpha-value> 用于被 Tailwind 替换相应的 Opacity。注意这里我们使用了 rgba 所以后续在定义颜色变量的时候要注意，不能使用 Hex 类型的颜色值，而要使用类似这样的格式 --tw-colors-i-slate-50: 248, 250, 252;。
接下来就是如何取反色的问题，在 Tailwind 3.3 以上的版本，内置颜色都是从 50 开始到 950 结束（3.2 版本没有 950）。一个亮色对应一个暗色，并且相加等于 1000。比如，slate-50 对应的暗色就是 slate-950， 50+950=1000。按照这个思路，就可以写一个脚本去生成一个暗色的所有的色值。
代码这里就不贴了，可以去 Crossbell-Box/xLog 这里看，如果需要使用的话只需要修改下，生成的 CSS 路径和 Tailwind 色值配置的路径即可（Tailwind >= 3.3）。
生成的 CSS 颜色变量定义大概长这样（截取部分，完整可以通过 Crossbell-Box/xLog 查看）：
:root {
--tw-colors-i-slate-50: 248, 250, 252;
--tw-colors-i-slate-100: 241, 245, 249;
--tw-colors-i-slate-200: 226, 232, 240;
--tw-colors-i-slate-300: 203, 213, 225;
--tw-colors-i-slate-400: 148, 163, 184;
--tw-colors-i-slate-500: 100, 116, 139;
}
html.dark {
--tw-colors-i-slate-50: 2, 6, 23;
--tw-colors-i-slate-100: 15, 23, 42;
--tw-colors-i-slate-200: 30, 41, 59;
--tw-colors-i-slate-300: 51, 65, 85;
--tw-colors-i-slate-400: 71, 85, 105;
--tw-colors-i-slate-500: 100, 116, 139;
}
html.light {
--tw-colors-i-slate-50: 248, 250, 252;
--tw-colors-i-slate-100: 241, 245, 249;
--tw-colors-i-slate-200: 226, 232, 240;
--tw-colors-i-slate-300: 203, 213, 225;
--tw-colors-i-slate-400: 148, 163, 184;
--tw-colors-i-slate-500: 100, 116, 139;
}
@media (prefers-color-scheme: dark) {
html:not(.light) {
--tw-colors-i-slate-50: 2, 6, 23;
--tw-colors-i-slate-100: 15, 23, 42;
--tw-colors-i-slate-200: 30, 41, 59;
--tw-colors-i-slate-300: 51, 65, 85;
--tw-colors-i-slate-400: 71, 85, 105;
--tw-colors-i-slate-500: 100, 116, 139;
}
}
@media (prefers-color-scheme: light) {
html:not(.dark) {
--tw-colors-i-slate-50: 248, 250, 252;
--tw-colors-i-slate-100: 241, 245, 249;
--tw-colors-i-slate-200: 226, 232, 240;
--tw-colors-i-slate-300: 203, 213, 225;
--tw-colors-i-slate-400: 148, 163, 184;
--tw-colors-i-slate-500: 100, 116, 139;
}
}这个 CSS 中定义了在系统在暗色还是亮色以及根据 html.light html.dark 确定亮暗色。
同时生成 Tailwind 颜色配置：
// tw-colors.js
export default {
slate: {
50: "rgba(var(--tw-colors-i-slate-50), <alpha-value>)",
100: "rgba(var(--tw-colors-i-slate-100), <alpha-value>)",
200: "rgba(var(--tw-colors-i-slate-200), <alpha-value>)",
300: "rgba(var(--tw-colors-i-slate-300), <alpha-value>)",
400: "rgba(var(--tw-colors-i-slate-400), <alpha-value>)",
500: "rgba(var(--tw-colors-i-slate-500), <alpha-value>)",
600: "rgba(var(--tw-colors-i-slate-600), <alpha-value>)",
700: "rgba(var(--tw-colors-i-slate-700), <alpha-value>)",
800: "rgba(var(--tw-colors-i-slate-800), <alpha-value>)",
900: "rgba(var(--tw-colors-i-slate-900), <alpha-value>)",
950: "rgba(var(--tw-colors-i-slate-950), <alpha-value>)",
},
// ...
inherit: "inherit",
current: "currentColor",
transparent: "transparent",
black: "rgba(var(--tw-colors-i-black), <alpha-value>)",
white: "rgba(var(--tw-colors-i-white), <alpha-value>)",
}在项目中，引入生成的 CSS，并在 Tailwind 配置覆写颜色。
// tailwind.config.js
const twColors = require("./tw-colors")
const alwaysColor = require("tailwindcss/colors")
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.tsx"],
darkMode: ['class', 'html.dark'],
theme: {
colors: twColors,
extend: {
colors: {
always: alwaysColor
}
}
}
}这里可选配置定义下 always，always 的颜色仍是自带的固定颜色值。如有需要可以取用。
至于 darkMode 是否需要定义，现在变成了可选项，如果需要用 Tailwind 提供的 dark-mode: 那是需要开启的。不过既然都是动态色值了，开不开就按使用需求了。
说说缺点：
- 引入了大量 CSS 变量，并且无用变量无法在编译时消除。
更好的解决方式？
给 Tailwind 提 PR。支持颜色多重定义，如下所示：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.tsx'],
theme: {
colors: {
blue: {
50: {
light: '#123',
dark: '#321',
},
},
},
},
}希望有 Tailwind 的小伙伴可以看到这个提案。
最后安利一下 xLog，这么好用的博客平台，还不赶紧试试？
对了，我自创的 Mix Space 现也支持同步到 xLog 了，赶紧来试试吧。