{
"title": "让 Tailwind 内置颜色支持暗黑模式",
"tags": [
"post"
],
"sources": [
"xlog"
],
"external_urls": [
"https://innei-4525.xlog.app/posts/tailwind-built-in-colors-dark-mode"
],
"date_published": "2023-04-14T13:30:08.997Z",
"content": "最近给 [xLog](https://xlog.app) 增加了黑暗模式的支持，但由于 xLog 在开发时候就没对黑暗模式留个口子，比如颜色值不固定写死，或者是使用 CSS 变量的颜色值。而 xLog 真巧使用了 Tailwind，基本上所有的颜色应用场景都用了 Tailwind 自带的色值，但由于 Tailwind 本身自带的色值都是一个[固定的值](https://tailwindcss.com/docs/customizing-colors)，并不支持根据 Dark Mode 切换色值。\n\n由于我萌生了一个想法，让自带的颜色能根据是否是暗黑模式去切换就行了。\n\n首先第一是，要重新配置 Tailwind，覆写原来内置的所有的颜色，把固定的值全部改写成 CSS 变量。变量的前缀可以自定义，不要冲突就行了，这边就暂定为 `tw-colors-i`。比如我们需要类似这样的色值配置：\n\n```js\n// tailwind.config.ts\nmodule.exports = {\n theme: {\n colors: {\n slate: {\n 50: 'rgb(var(--tw-colors-i-slate-50))',\n 100: 'rgb(var(--tw-colors-i-slate-100))',\n // ...\n },\n },\n },\n}\n\n```\n\n但是以上的写法并不支持 Tailwind 的让颜色获得 Opacity 的能力，所以还需要修改一下。\n\n```js\n// tailwind.config.ts\nmodule.exports = {\n theme: {\n colors: {\n slate: {\n 50: 'rgba(var(--tw-colors-i-slate-50), <alpha-value>)',\n 100: 'rgba(var(--tw-colors-i-slate-100), <alpha-value>)',\n // ...\n },\n },\n },\n}\n\n```\n\n加上 ` <alpha-value>` 用于被 Tailwind 替换相应的 Opacity。注意这里我们使用了 `rgba` 所以后续在定义颜色变量的时候要注意，不能使用 Hex 类型的颜色值，而要使用类似这样的格式 `--tw-colors-i-slate-50: 248, 250, 252;`。\n\n接下来就是如何取反色的问题，在 Tailwind 3.3 以上的版本，内置颜色都是从 `50` 开始到 `950` 结束（3.2 版本没有 `950`）。一个亮色对应一个暗色，并且相加等于 `1000`。比如，`slate-50` 对应的暗色就是 `slate-950`， `90+950=1000`。按照这个思路，就可以写一个脚本去生成一个暗色的所有的色值。\n\n代码这里就不贴了，可以去 [Crossbell-Box/xLog]( https://github.com/Crossbell-Box/xLog/blob/27385ee5a6f09b714e2570e501313d41b6bbb1b9/scripts/tw/generate-css-var.js) 这里看，如果需要使用的话只需要修改下，生成的 CSS 路径和 Tailwind 色值配置的路径即可（Tailwind >= 3.3）。\n\n生成的 CSS 颜色变量定义大概长这样（截取部分，完整可以通过 [Crossbell-Box/xLog](https://github.com/Crossbell-Box/xLog/blob/27385ee5a6f09b714e2570e501313d41b6bbb1b9/src/css/css-var.css) 查看）：\n\n```css\n:root {\n --tw-colors-i-slate-50: 248, 250, 252;\n --tw-colors-i-slate-100: 241, 245, 249;\n --tw-colors-i-slate-200: 226, 232, 240;\n --tw-colors-i-slate-300: 203, 213, 225;\n --tw-colors-i-slate-400: 148, 163, 184;\n --tw-colors-i-slate-500: 100, 116, 139;\n}\n\nhtml.dark {\n --tw-colors-i-slate-50: 2, 6, 23;\n --tw-colors-i-slate-100: 15, 23, 42;\n --tw-colors-i-slate-200: 30, 41, 59;\n --tw-colors-i-slate-300: 51, 65, 85;\n --tw-colors-i-slate-400: 71, 85, 105;\n --tw-colors-i-slate-500: 100, 116, 139;\n}\n\nhtml.light {\n --tw-colors-i-slate-50: 248, 250, 252;\n --tw-colors-i-slate-100: 241, 245, 249;\n --tw-colors-i-slate-200: 226, 232, 240;\n --tw-colors-i-slate-300: 203, 213, 225;\n --tw-colors-i-slate-400: 148, 163, 184;\n --tw-colors-i-slate-500: 100, 116, 139;\n}\n\n@media (prefers-color-scheme: dark) {\n html:not(.light) {\n --tw-colors-i-slate-50: 2, 6, 23;\n --tw-colors-i-slate-100: 15, 23, 42;\n --tw-colors-i-slate-200: 30, 41, 59;\n --tw-colors-i-slate-300: 51, 65, 85;\n --tw-colors-i-slate-400: 71, 85, 105;\n --tw-colors-i-slate-500: 100, 116, 139;\n }\n}\n\n@media (prefers-color-scheme: light) {\n html:not(.dark) {\n --tw-colors-i-slate-50: 248, 250, 252;\n --tw-colors-i-slate-100: 241, 245, 249;\n --tw-colors-i-slate-200: 226, 232, 240;\n --tw-colors-i-slate-300: 203, 213, 225;\n --tw-colors-i-slate-400: 148, 163, 184;\n --tw-colors-i-slate-500: 100, 116, 139;\n }\n}\n\n```\n\n这个 CSS 中定义了在系统在暗色还是亮色以及根据 `html.light` `html.dark` 确定亮暗色。\n\n同时生成 Tailwind 颜色配置：\n\n```js\n// tw-colors.js\nexport default {\n slate: {\n 50: \"rgba(var(--tw-colors-i-slate-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-slate-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-slate-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-slate-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-slate-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-slate-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-slate-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-slate-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-slate-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-slate-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-slate-950), <alpha-value>)\",\n },\n gray: {\n 50: \"rgba(var(--tw-colors-i-gray-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-gray-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-gray-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-gray-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-gray-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-gray-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-gray-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-gray-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-gray-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-gray-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-gray-950), <alpha-value>)\",\n },\n zinc: {\n 50: \"rgba(var(--tw-colors-i-zinc-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-zinc-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-zinc-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-zinc-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-zinc-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-zinc-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-zinc-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-zinc-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-zinc-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-zinc-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-zinc-950), <alpha-value>)\",\n },\n neutral: {\n 50: \"rgba(var(--tw-colors-i-neutral-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-neutral-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-neutral-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-neutral-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-neutral-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-neutral-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-neutral-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-neutral-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-neutral-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-neutral-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-neutral-950), <alpha-value>)\",\n },\n stone: {\n 50: \"rgba(var(--tw-colors-i-stone-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-stone-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-stone-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-stone-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-stone-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-stone-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-stone-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-stone-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-stone-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-stone-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-stone-950), <alpha-value>)\",\n },\n red: {\n 50: \"rgba(var(--tw-colors-i-red-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-red-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-red-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-red-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-red-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-red-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-red-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-red-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-red-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-red-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-red-950), <alpha-value>)\",\n },\n orange: {\n 50: \"rgba(var(--tw-colors-i-orange-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-orange-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-orange-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-orange-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-orange-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-orange-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-orange-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-orange-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-orange-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-orange-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-orange-950), <alpha-value>)\",\n },\n amber: {\n 50: \"rgba(var(--tw-colors-i-amber-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-amber-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-amber-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-amber-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-amber-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-amber-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-amber-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-amber-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-amber-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-amber-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-amber-950), <alpha-value>)\",\n },\n yellow: {\n 50: \"rgba(var(--tw-colors-i-yellow-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-yellow-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-yellow-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-yellow-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-yellow-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-yellow-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-yellow-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-yellow-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-yellow-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-yellow-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-yellow-950), <alpha-value>)\",\n },\n lime: {\n 50: \"rgba(var(--tw-colors-i-lime-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-lime-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-lime-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-lime-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-lime-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-lime-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-lime-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-lime-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-lime-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-lime-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-lime-950), <alpha-value>)\",\n },\n green: {\n 50: \"rgba(var(--tw-colors-i-green-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-green-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-green-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-green-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-green-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-green-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-green-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-green-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-green-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-green-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-green-950), <alpha-value>)\",\n },\n emerald: {\n 50: \"rgba(var(--tw-colors-i-emerald-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-emerald-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-emerald-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-emerald-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-emerald-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-emerald-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-emerald-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-emerald-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-emerald-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-emerald-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-emerald-950), <alpha-value>)\",\n },\n teal: {\n 50: \"rgba(var(--tw-colors-i-teal-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-teal-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-teal-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-teal-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-teal-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-teal-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-teal-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-teal-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-teal-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-teal-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-teal-950), <alpha-value>)\",\n },\n cyan: {\n 50: \"rgba(var(--tw-colors-i-cyan-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-cyan-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-cyan-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-cyan-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-cyan-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-cyan-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-cyan-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-cyan-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-cyan-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-cyan-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-cyan-950), <alpha-value>)\",\n },\n sky: {\n 50: \"rgba(var(--tw-colors-i-sky-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-sky-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-sky-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-sky-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-sky-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-sky-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-sky-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-sky-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-sky-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-sky-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-sky-950), <alpha-value>)\",\n },\n blue: {\n 50: \"rgba(var(--tw-colors-i-blue-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-blue-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-blue-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-blue-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-blue-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-blue-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-blue-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-blue-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-blue-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-blue-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-blue-950), <alpha-value>)\",\n },\n indigo: {\n 50: \"rgba(var(--tw-colors-i-indigo-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-indigo-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-indigo-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-indigo-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-indigo-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-indigo-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-indigo-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-indigo-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-indigo-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-indigo-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-indigo-950), <alpha-value>)\",\n },\n violet: {\n 50: \"rgba(var(--tw-colors-i-violet-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-violet-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-violet-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-violet-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-violet-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-violet-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-violet-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-violet-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-violet-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-violet-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-violet-950), <alpha-value>)\",\n },\n purple: {\n 50: \"rgba(var(--tw-colors-i-purple-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-purple-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-purple-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-purple-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-purple-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-purple-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-purple-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-purple-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-purple-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-purple-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-purple-950), <alpha-value>)\",\n },\n fuchsia: {\n 50: \"rgba(var(--tw-colors-i-fuchsia-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-fuchsia-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-fuchsia-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-fuchsia-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-fuchsia-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-fuchsia-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-fuchsia-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-fuchsia-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-fuchsia-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-fuchsia-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-fuchsia-950), <alpha-value>)\",\n },\n pink: {\n 50: \"rgba(var(--tw-colors-i-pink-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-pink-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-pink-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-pink-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-pink-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-pink-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-pink-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-pink-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-pink-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-pink-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-pink-950), <alpha-value>)\",\n },\n rose: {\n 50: \"rgba(var(--tw-colors-i-rose-50), <alpha-value>)\",\n 100: \"rgba(var(--tw-colors-i-rose-100), <alpha-value>)\",\n 200: \"rgba(var(--tw-colors-i-rose-200), <alpha-value>)\",\n 300: \"rgba(var(--tw-colors-i-rose-300), <alpha-value>)\",\n 400: \"rgba(var(--tw-colors-i-rose-400), <alpha-value>)\",\n 500: \"rgba(var(--tw-colors-i-rose-500), <alpha-value>)\",\n 600: \"rgba(var(--tw-colors-i-rose-600), <alpha-value>)\",\n 700: \"rgba(var(--tw-colors-i-rose-700), <alpha-value>)\",\n 800: \"rgba(var(--tw-colors-i-rose-800), <alpha-value>)\",\n 900: \"rgba(var(--tw-colors-i-rose-900), <alpha-value>)\",\n 950: \"rgba(var(--tw-colors-i-rose-950), <alpha-value>)\",\n },\n inherit: \"inherit\",\n current: \"currentColor\",\n transparent: \"transparent\",\n black: \"rgba(var(--tw-colors-i-black), <alpha-value>)\",\n white: \"rgba(var(--tw-colors-i-white), <alpha-value>)\",\n}\n\n```\n\n在项目中，引入生成的 CSS，并在 Tailwind 配置覆写颜色。\n\n```js\n// tailwind.config.js\nconst twColors = require(\"./tw-colors\")\nconst alwaysColor = require(\"tailwindcss/colors\")\n\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: [\"./src/**/*.tsx\"],\n darkMode: ['class', 'html.dark'],\n theme: {\n colors: twColors,\n extend: {\n \tcolors: {\n \t always: alwaysColor\n \t\t}\n \t}\n\t}\n}\n```\n\n这里可选配置定义下 `always`，always 的颜色仍是自带的固定颜色值。如有需要可以取用。\n\n至于 `darkMode` 是否需要定义，现在变成了可选项，如果需要用 Tailwind 提供的 `dark-mode: ` 那是需要开启的。不过既然都是动态色值了，开不开就按使用需求了。\n\n---\n\n说说缺点：\n\n- 引入了大量 CSS 变量，并且无用变量无法在编译时消除。\n\n\n\n更好的解决方式？\n\n给 Tailwind 提 PR。支持颜色多重定义，如下所示：\n\n```js\n/** @type {import('tailwindcss').Config} */\nmodule.exports = {\n content: ['./src/**/*.tsx'],\n theme: {\n colors: {\n blue: {\n 50: {\n light: '#123',\n dark: '#321',\n },\n },\n },\n },\n}\n```\n\n希望有 Tailwind 的小伙伴可以看到这个提案。\n\n最后安利一下 [xLog](https://xlog.app)，这么好用的博客平台，还不赶紧试试？\n\n对了，我自创的 Mix Space 现也支持同步到 xLog 了，赶紧来试试吧。\n\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Mix Space is now connected to the Crossbell network and able to synchronize articles to <a href=\"https://twitter.com/_xLog?ref_src=twsrc%5Etfw\">@_xLog</a> . Thank you. <a href=\"https://twitter.com/_xLog?ref_src=twsrc%5Etfw\">@_xLog</a> <a href=\"https://twitter.com/DIYgod?ref_src=twsrc%5Etfw\">@DIYgod</a> <br><br>This is the dream I had always envisioned for an article on blockchain, and now it has become a reality. <a href=\"https://t.co/QmRfK1ql8y\">pic.twitter.com/QmRfK1ql8y</a></p>— 拾一 (@__oQuery) <a href=\"https://twitter.com/__oQuery/status/1643604671133540355?ref_src=twsrc%5Etfw\">April 5, 2023</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n\n<span style=\"text-align: right;font-size: 0.8em; float: right\">此文由 [Mix Space](https://github.com/mx-space) 同步更新至 xLog\n原始链接为 <https://innei.ren/posts/programming/tailwind-built-in-colors-dark-mode></span>",
"attributes": [
{
"value": "tailwind-built-in-colors-dark-mode",
"trait_type": "xlog_slug"
}
]
}
