Tailwind CSS + Pinia，轻松实现黑白模式切换

前言

在现代前端开发中，实现黑白模式切换是一个很常见的需求。它不仅可以提升用户体验，还能满足不同用户的视觉偏好。今天，我们就来探讨如何使用 Tailwind CSS 和 Pinia 在 Vue 项目中轻松实现黑白模式切换。

一、项目搭建

首先，确保你已经创建了一个 Vue 项目，并且安装了 Tailwind CSS 和 Pinia。

安装 Tailwind CSS：

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

安装 Pinia：

npm install pinia

二、创建 Pinia Store

创建一个 store 来管理主题模式的状态。

// stores/theme.js
import { defineStore } from 'pinia';

export const useThemeStore = defineStore('theme', {
  state: () => ({
    darkMode: false // 默认为浅色模式
  }),
  actions: {
    toggleDarkMode() {
      this.darkMode = !this.darkMode;
      this.applyDarkMode();
    },
    applyDarkMode() {
      if (this.darkMode) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    }
  }
});

三、配置 Tailwind CSS

在 Tailwind 的配置文件中，添加对暗黑模式的支持。

// tailwind.config.js
module.exports = {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
  darkMode: 'class' // 使用 class 来切换暗黑模式
}

四、实现模式切换组件

创建一个组件来实现黑白模式的切换按钮。

<!-- components/ThemeToggle.vue -->
<template>
  <button @click="toggleDarkMode" class="p-2 rounded-lg transition-colors">
    <span v-if="!darkMode" class="material-icons">dark_mode</span>
    <span v-else class="material-icons">light_mode</span>
  </button>
</template>

<script setup>
import { useThemeStore } from '../stores/theme';
import { computed } from 'vue';

const themeStore = useThemeStore();
const darkMode = computed(() => themeStore.darkMode);

const toggleDarkMode = () => {
  themeStore.toggleDarkMode();
};
</script>

五、应用样式

在你的应用中，根据模式状态应用不同的样式。

<!-- App.vue -->
<template>
  <div class="min-h-screen bg-white dark:bg-gray-900">
    <nav class="bg-blue-500 p-4">
      <div class="container mx-auto flex justify-between items-center">
        <h1 class="text-white text-xl font-bold">我的应用</h1>
        <ThemeToggle />
      </div>
    </nav>
    <div class="container mx-auto p-4">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import ThemeToggle from './components/ThemeToggle.vue';
</script>

六、总结

通过 Tailwind CSS 和 Pinia 的结合，我们能够轻松实现黑白模式的切换。Tailwind CSS 提供了便捷的样式管理，而 Pinia 则负责状态的集中管理。这种组合不仅代码简洁，而且易于维护和扩展。