乐闻世界logo
搜索文章和话题
2
TailwindCSS 多主题色配置

TailwindCSS 多主题色配置

小白的头像
小白

2023年05月15日 11:23· 阅读 3535

TailwindCSS 多主题色配置

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

tailwind dark

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

html
<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 变体只对 backgroundColorborderColorgradientColorStops``placeholderColortextColor 启用。

  1. media(通过用户的操作系统进行控制)
    js
    // tailwind.config.js module.exports = { darkMode: 'media', // ... }
  2. class (手动控制,HTML树中出现 dark类时起作用)
    js
    // tailwind.config.js module.exports = { darkMode: 'class', // ... }

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

自定义配置主题色

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

以小程序(taro + react + rtk)进行介绍,其他原理类似

  • 首先需要建立一个主题文件夹放置我们需要配置的不同主题的css theme

    scss
    .textLight1 { /* text */ --t-1: #1c1d1f; --t-2: #58647a; --t-3: #8390a8; }
    scss
    .textDark1 { /* text */ --t-1: #fafafa; --t-2: #d2d3d6; --t-3: #9fa4ad; }

    以此类推 相同的的变量key值对应不同的value值

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

    scss
    @import './theme';

    tailwind.config.js

    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)', }, }, }
  • 有了主题文件跟对应的主题类名 textLight1textDark1...,我们便可以进行切换了 在外层包裹组件中使用对应的类名 就可以达到切换主题的效果。

    注意在组件中需要使用对应的key值才会有该效果

    tsx
    <Text className="text-t-1">Test</Text>
标签: