Vue中使用TailwindCSS实现深色模式（跟随系统和手动控制）

源码下载

点击跳转：https://github.com/weijianpeng18421/csdn_tailwindcss.git

先贴一下手动控制的成品效果

正常模式（通过以下两个按钮点击切换）：

深色模式：

创建VUE工程

如果您还没有建立一个新的 Vue+Vite 项目，请先创建一个新的项目。

npm init vite my-project
cd my-project

接下来，使用 npm 安装 Vite 的前端依赖关系

npm install

初始化 Tailwind CSS

Tailwind CSS 需要 Node.js 12.13.0 或更高版本。‎

安装 Tailwind 以及其它依赖项

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

接下来，生成您的 tailwind.config.js 和 postcss.config.js 文件：

npx tailwindcss init -p

这将会在您的项目根目录创建一个最小化的 tailwind.config.js 文件（注意html文件的位置）：

// tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // media:跟随系统（win10在个性化-颜色-选择默认应用模式  中修改）   class:手动通过事件改变
  darkMode: 'class', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {}
  },
}

在 CSS 中引入 Tailwind

创建 ./src/assets/css/tailwind.css文件 并使用 @tailwind 指令来包含 Tailwind的 base、 components 和 utilities 样式，来替换掉原来的文件内容。

/* ./src/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

将CSS 文件被导入到 ./src/main.js 文件中

// src/main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

import './assets/css/tailwind.css'

createApp(App).mount('#app')

在app.vue中手动设置深色模式页面及逻辑（切记tailwind.config.cjs中的darkMode为’class’）

<template>
  <div class="h-full bg-white dark:bg-slate-800 px-6 py-8 ring-1 ring-slate-900/5 shadow-xl">
    <div>
      <div class="flex items-stretch justify-center">
        <div class="px-16 py-4 bg-cyan-400 dark:bg-indigo-500 shadow-lg shadow-cyan-500/50 text-white rounded-md m-1">
          Flex01
        </div>
        <div
            class="self-auto bg-cyan-400 dark:bg-indigo-500 shadow-lg shadow-cyan-500/50 px-16 py-4 text-white rounded-md m-1">
          Flex02
        </div>
        <div class="px-16 py-4 bg-cyan-400 dark:bg-indigo-500 shadow-lg shadow-cyan-500/50 text-white m-1 rounded-md">
          Flex03
        </div>
      </div>
      <div class="my-20">
        <button class="text-white px-2.5 py-1.5 mx-10 bg-cyan-500 shadow-lg shadow-cyan-500/50 rounded-md"
                @click="lightMode">普通模式
        </button>
        <button class="text-white px-2.5 py-1.5 mx-10 bg-blue-500 shadow-lg shadow-blue-500/50 rounded-md"
                @click="darkMode">暗黑模式
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const darkMode = () => {
  //这个条件用于判断当前系统应用模式是否开启了“暗”模式（win10在   个性化-颜色-选择默认应用模式  中修改）
  // if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  if (localStorage.theme === 'dark' || (!('theme' in localStorage))) {
    document.documentElement.classList.add('dark')
  } else {
    document.documentElement.classList.remove('dark')
  }

  localStorage.theme = 'light'

  localStorage.theme = 'dark'

  localStorage.removeItem('theme')
}
const lightMode = () => {
  document.documentElement.classList.remove('dark')
}
</script>

跟随系统变化

跟随系统变化只需在引入TailwindCSS后设置tailwind.config.cjs中的darkMode为’media’，然后在“个性化”中切换“颜色”中的“选择默认应用模式”即可看到效果。

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  // media:跟随系统（win10在个性化-颜色-选择默认应用模式  中修改）   class:手动通过事件改变
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    extend: {},
  },
  plugins: [],
  variants: {
    extend: {}
  },
}