react 下 使用Tailwind CSS 来进行页面颜色切换

要做什么

比如你使用react编写了一个网页，现在你要完成切换页面主题的功能，具体来说就是：

• 当切换到深色主题，背景色加深，文字颜色变浅

• 当切换到浅色主题，背景色变浅，文字颜色加深

辩证 使用使用 tailwind CSS 完成该功能的优缺点

优点

• 简单

• 特别简单

缺点

• 不知道，爱谁谁

需要什么

• Tailwind Css

步骤

1. react开发环境的安装和 tailwind依赖安装 (这里请参照tailwind文档的设置)

2. tailwind Css的基础配置

3. config文件配置

1. 配置 `content: ["./src/**/*.{js,jsx,ts,tsx}"]`,告知tailwind 项目文件在哪个目录
  
2. 配置  `darkMode: "class"` ,告知tailwind我想手动切换颜色模式

2. css文件配置(引入tailwind的样式文件)

切换背景色和文字颜色的CSS配置

• 在index.css中添加如下内容

/*  切换 color mode */
.color-change-base {
  @apply bg-gray-100 text-black dark:bg-blue-900   dark:text-white;
}

• color-change-base 是自定义的类名，任何需要设置切换颜色主题功能的组件，只要加上了这个类名，就能完成颜色切换。

• bg-gray-100 text-black dark:bg-blue-900 dark:text-whit 是tailwind Css提供的工具类

  • 因为这些类的功能性极强，比如 bg-gray-100 就是设置背景颜色为 灰色-不透明度100

  • 注意 bg-gray-100 text-black 和dark:bg-blue-900 dark:text-white 这一组，前面两个是浅色模式下，背景颜色灰色，文字黑色，后两个是 深色模式下背景颜色蓝色，文字颜色白色

• @apply 是告诉 tailwind ，请把后边一长串功能类提供的功能传递给 color-change-base这个类名

具体使用到组件/页面

• 在需要使用颜色切换的组件上 添加 color-change-base类名

• 当使用 class 模式(tailwind.config.js文件中的设置)，在html标签添加或删除 dark类名，就能完成页面的颜色模式切换

切换逻辑

请查看tailwind CSS官网

// On page load or when changing themes, best to add inline in `head` to avoid FOUC
if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  document.documentElement.classList.add('dark')
} else {
  document.documentElement.classList.remove('dark')
}

// Whenever the user explicitly chooses light mode
localStorage.theme = 'light'

// Whenever the user explicitly chooses dark mode
localStorage.theme = 'dark'

// Whenever the user explicitly chooses to respect the OS preference
localStorage.removeItem('theme')