当前位置：首页 > news >正文

TailwindCSS 多主题色配置

news 2025/7/18 6:59:30

TailwindCSS 多主题色配置

现在大多数网站都支持主题色变换，比如切换深色模式。那么我们该如何进行主题色配置呢？

tailwind dark

tailwind 包含一个 dark变体，当启用深色模式时，可以为网站设置不同样式

<div class="bg-white dark:bg-gray-800"><h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1><p class="text-gray-600 dark:text-gray-300">Lorem ipsum...</p>
</div>

启用深色模式

tailwind.config.js 文件darkMode选项默认是false，需要启用深色模式，则可以设置为 media 或者 class

启动了深色模式后， dark:{class}类将会优先于无前缀的类

默认情况下，dark 变体只对 backgroundColor、borderColor、gradientColorStops``placeholderColor 和 textColor 启用。

media（通过用户的操作系统进行控制）

// tailwind.config.js
module.exports = {darkMode: 'media',// ...
}

class （手动控制，HTML树中出现 dark类时起作用）

// tailwind.config.js
module.exports = {darkMode: 'class',// ...
}

这种操作可以实现模式切换，但是也不难看出，class中使用dark:{class} 还是比较繁琐的，而且不易查找和修改，并且无法实现多种主题色配置

自定义配置主题色

想要配置不同的主题色，那么就希望配置的颜色可以在不同主题下进行变化。那么如何实现这样的能力呢？我们可以在最外层dom结构上配置不同的类，不同类下的颜色赋予不同值，那么就可以实现多种主题色的切换了，是不是感觉实现很简单，接下来介绍一下代码项目不同主题色的配置。

以小程序（taro + react + rtk）进行介绍，其他原理类似

首先需要建立一个主题文件夹放置我们需要配置的不同主题的css
theme
```
.textLight1 {/* text */--t-1: #1c1d1f;--t-2: #58647a;--t-3: #8390a8;
}
```
```
.textDark1 {/* text */--t-1: #fafafa;--t-2: #d2d3d6;--t-3: #9fa4ad;
}
```
以此类推相同的的变量key值对应不同的value值

其次需要在入口处引入我们的主题文件并在配置文件中加入我们定义的变量
app.css

@import './theme';

tailwind.config.js

// Example `tailwind.config.js` file
const colors = require('tailwindcss/colors')module.exports = {theme: {colors: {/* text */'t-1': 'var(--t-1)','t-2': 'var(--t-2)','t-3': 'var(--t-3)',},},
}