TailwindCSS 多主题色配置

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 变体只对 backgroundColor、borderColor、gradientColorStops``placeholderColor 和 textColor 启用。

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>