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 啟用。

1. media（通過用戶的操作系統進行控制）

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

2. 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)',},},
  }
  

• 有了主題文件跟對應的主題類名 textLight1textDark1…，我們便可以進行切換了 在外層包裹組件中使用對應的類名 就可以達到切換主題的效果。

  注意在組件中需要使用對應的key值才會有該效果

   <Text className="text-t-1">Test</Text>