轻松实现主题切换其二——使用TailwindCSS

首先你得集成安装好Tailwindcss

下面是tailwind.config.js配置:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      backgroundColor: {
        primary: "rgb(var(--color-primary) / <alpha-value>)",
        secondary: "rgb(var(--color-secondary) / <alpha-value>)",
        background: "rgb(var(--color-background) / <alpha-value>)",
        foreground: "rgb(var(--color-foreground) / <alpha-value>)",
        separator: "rgb(var(--color-separator) / <alpha-value>)",
      },
      textColor: {
        primary: "rgb(var(--color-foreground) / <alpha-value>)",
      },
    },
  },
  plugins: [],
  darkMode: "class",
}

然后index.css 在加入样式

/* ./src/index.css */

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


.theme-dark {
    background: black !important;
    color: white !important;
}

.theme-high {
    background: white !important;
    color: black !important;
}

使用方式也很简单

const theme = ref("dark")
<div id="app" :clsss="`theme-${theme}`"></div>