如何利用tailwindcss实现主题切换功能？现在，深色模式(Dark Mode)是许多操作系统的首要功能，设计一个暗

站长

2024年10月16日 18:46 · 阅读数 375

前言

现在，深色模式(Dark Mode)是许多操作系统的首要功能，设计一个暗版本的网站来配合默认设计变得越来越普遍。这篇文章就讲一下如何利用tailwindcss实现主题切换功能。

如何在css中实现主题切换

利用媒体查询 prefers-color-scheme与css变量

prefers-color-scheme是一种 CSS 媒体查询，用于根据用户的操作系统主题设置（如暗黑模式或亮色模式）来应用不同的样式。它可以让网页响应用户的主题偏好，提供更好的用户体验。

prefers-color-scheme主要是用于根据用户系统的主题设置来改变页面的主题，而不是通过js去改变

:root {
            --bg-color: red;
            --text-color: black
        }

 @media (prefers-color-scheme: dark) { // 设置媒体查询
            :root {
                --bg-color: black;
                --text-color: white
            }
        }

如何利用tailwindcss实现主题切换功能？现在，深色模式(Dark Mode)是许多操作系统的首要功能，设计一个暗

利用js与css变量

使用js和css变量这种方式可以让你自定义外观模式。

        :root { // 默认主题色
            --bg-color: red;
            --text-color: black
        }

        .dark { // 深色主题
            --bg-color: black;
            --text-color: white
        }

        .gray { // 灰色主题
            --bg-color: gray;
            --text-color: white
        }

        .item {
            background-color: var(--bg-color);
            color: var(--text-color);
        }

    <div class="item">主题切换</div>
    <div id="default">默认主题</div>
    <div id="dark">深色主题</div>
    <div id="gray">灰色主题</div>
    
        const de = document.getElementById('default');
        const dark = document.getElementById('dark');
        const gray = document.getElementById('gray');
        const root = document.documentElement;
        de.addEventListener('click', () => {
            root.className = ''; // 清空根html元素的类名
            root.classList.add('default') // 添加主题色类名
        })
        dark.addEventListener('click', () => {
            root.className = '';
            root.classList.add('dark')
        })
        gray.addEventListener('click', () => {
            root.className = '';
            root.classList.add('gray')
        })

如何利用tailwindcss实现主题切换功能？现在，深色模式(Dark Mode)是许多操作系统的首要功能，设计一个暗

如何在tailwindcss中实现主题切换

tailwindcss默认提供Dark Mode模式

通过在tailwind.config.js配置文件中的darkMode属性开启。该属性比较常用的有三种值：

1.media(默认值)：根据用户系统的主题色来进行切换，原理还是利用了css中的媒体查询prefers-color-scheme。

2.class：通过添加特定的类名.dark来启用暗黑模式。这种方式可以让你手动控制何时启用暗黑模式。这种模式需要手动通过js来控制根html上的类名来切换与通过js和css变量实现切换原理一致。

3.selector：使用自定义的 CSS 选择器来启用暗黑模式。这允许你指定一个选择器，当这个选择器匹配时应用暗黑模式。

也可以传递数组进行自定义配置，具体可以去看下官网

那么如何在元素中使用呢？

1.如果是media这种情况：直接在元素上使用dark:[class]的形式来定义深色模式的主题样式，当系统切换到深色模式下时，该元素会自动应用dark:后边的类名的样式。

         <div className="w-full h-60 text-black bg-red-500 dark:text-white dark:bg-black">
            主题测试
          </div>

2.如果是class这种情况：首先需要在元素上使用dark:[class]的形式来定义深色模式的主题样式，然后如果要切换主题也需要使用js来给根html添加dark类名。

<html> 
<body> 
  <!-- 白色背景 --> 
  <div class="bg-white dark:bg-black"> <!-- ... --> </div> 
</body> 
</html> 

<html class="dark"> 
<body> 
  <!-- 黑色背景 --> 
  <div class="bg-white dark:bg-black"> <!-- ... --> </div> 
</body> 
</html>

3.如果是selector这种情况比如：darkMode:['selector', 'data-mode="aaa"'],这种就是自定义css选择器来切换主题。也要用到js来切换根html上的自定义的属性。

<html> 
<body> 
  <!-- 白色背景 --> 
  <div class="bg-white dark:bg-black"> <!-- ... --> </div> 
</body> 
</html> 

<html data-mode='aaa'> 
<body> 
  <!-- 黑色背景 --> 
  <div class="bg-white dark:bg-black"> <!-- ... --> </div> 
</body> 
</html>

这种默认的darkMode虽然方便，但是也有点局限性，你只能定义深色主题不能定义其它主题，但是主题的颜色也可以在配置文件中去自定义。接下来讲讲如何通过定义css变量来实现主题切换，原理与上边所说的使用js与css变量一致，只多了一个在tailwindcss配置文件中配置自定义颜色的步骤。

1.tailwindcss中定义css变量

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: white /* 白色的背景 */
    --text: black /* 黑色的文字 */
  }

  .dark {
    --background: black /* 黑色的背景 */
    --text: white /* 白色的文字 */
  }
  
  .gray {
    --background: gray /* 灰色的背景 */
    --text: black /* 黑色的文字 */
  }
}

2.在配置文件中定义自定义颜色

const config = {
  content: [
    './pages/**/*.{ts,tsx}',
    './components/**/*.{ts,tsx}',
    './app/**/*.{ts,tsx}',
    './src/**/*.{ts,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        // 通用颜色
        background: 'var(--background)',
        textColor: 'var(--text)'
  },
  
}

在元素中使用

<html> 
<body> 
  <!-- 白色背景,黑色文字 --> 
  <div class="bg-background text-textColor"> <!-- ... --> </div> 
</body> 
</html> 

<html class="dark"> 
<body> 
  <!-- 黑色背景，白色文字 --> 
  <div class="bg-background text-textColor"> <!-- ... --> </div> 
</body> 
</html>

<html class="gray"> 
<body> 
  <!-- 灰色背景，黑色文字 --> 
  <div class="bg-background text-textColor"> <!-- ... --> </div> 
</body> 
</html>

这种方式可以自定义主题也可以自定义主题颜色，比较灵活。目前shadcn ui组件库中的主题也是使用的这两种方式。

转载自:https://juejin.cn/post/7403953367766908980