用Tailwind CSS进行主题切换的3个步骤

让我们开始吧，我想给我的网站添加一个黑暗/白色的主题，我应该怎么做？

故事就是这样开始的，从字面上看，就是在网站上切换主题

因此，大多数网站在React中使用Tailwind CSS，所以让我们只从这个开始。

步骤1:

将主题名称附加到应用程序的根元素中。

基本上，应用程序的根 div 元素应该包含类名，当主题为暗色时为暗色，当主题为白色时为白色。

import React from "react";

const App = () => (
 <div classname={`${theme}`}>
  <div> Home </div>
 </div>
);

export default App;

步骤2:

在本地存储中存储当前的主题。

如下面的代码例子所示，将暗色主题CSS添加到UI组件中。

import React from "react";

const App = () => {

 const theme = window.localstorage.get("theme");
 // fetch theme from localstorage


 return (
  <div classname={`${theme}`}>
   <div> <button className="dark:bg-gray-800 bg-gray-100"></button></div>
    // append the dark theme and work is done 
  </div>
)};

export default App;

步骤3:

在Tailwind配置中启用黑暗主题

进入根目录下的tailwind.config.js文件，如果没有，请创建一个同名的文件。

// append the below line or out it after purge key
darkMode: "class", // or media or class,

这基本上会指示tailwind追加元素根部存在的给定类CSS。

如果提供了媒体值，Tailwind CSS将提供一个手动主题或默认的白色主题。