1
:root {
2
  /** 默认亮色主题 */
3
  --primary-color: #3b82f6;
4
  --bg-color: #ffffff;
5
  --text-color: #1f2937;
6
  --border-color: #e5e7eb;
7
  --card-bg: #f9fafb;
8
}
9
[data-theme='dark']{
10
  /** 暗色主题 */
11
  --primary-color: #60a5fa;
12
  --bg-color: #1f2937;
13
  --text-color: #f9fafb;
14
  --border-color: #374151;
15
  --card-bg: #374151;
16
}
17
[data-theme="blue"] {
18
    /* 蓝色主题 */
19
  --primary-color: #1e40af;
20
  --bg-color: #eff6ff;
21
  --text-color: #1e3a8a;
22
  --border-color: #bfdbfe;
23
  --card-bg: #dbeafe;
24
}
25
/* @media (prefers-color-scheme: dark) { } */
26
body{
27
  background-color: var(--bg-color);
28
  color: var(--text-color);
29
  transition: all 0.5s ease;
30
}
31
.card{
32
  background-color: var(--card-bg);
33
  border-color: var(--border-color);
34
}
35
.btn-primary{
36
  background-color: var(--primary-color);
37
  color: white;
38
}

1
  import { ref, watch } from 'vue';
2

3
  export type ThemeType = 'light' | 'dark' | 'blue';
4

5
  const THEME_KEY = 'app-theme';
6

7
  export const useTheme = () => {
8
    const currentTheme = ref<ThemeType>(
9
      (localStorage.getItem(THEME_KEY) as ThemeType) || 'light'
10
    );
11

12
    // 应用主题到 DOM
13
    const applyTheme = (theme: ThemeType) => {
14
      document.documentElement.setAttribute('data-theme', theme);
15
    };
16

17
    // 切换主题
18
    const setTheme = (theme: ThemeType) => {
19
      currentTheme.value = theme;
20
      applyTheme(theme);
21
      localStorage.setItem(THEME_KEY, theme);
22
    };
23

24
    // 监听主题变化
25
    watch(currentTheme, (newTheme) => {
26
      applyTheme(newTheme);
27
    }, { immediate: true });
28

29
    // 获取所有可用主题
30
    const availableThemes = ref<{ key: ThemeType; label: string }[]>([
31
      { key: 'light', label: '亮色模式' },
32
      { key: 'dark', label: '深色模式' },
33
      { key: 'blue', label: '蓝色模式' }
34
    ]);
35

36
    return {
37
      currentTheme: readonly(currentTheme),
38
      setTheme,
39
      availableThemes
40
    };
41
  };

1
  <template>
2
    <div class="theme-toggle">
3
      <button
4
        v-for="theme in availableThemes"
5
        :key="theme.key"
6
        @click="setTheme(theme.key)"
7
        :class="['theme-btn', { active: currentTheme === theme.key }]"
8
      >
9
        {{ theme.label }}
10
      </button>
11
    </div>
12
  </template>
13

14
  <script setup lang="ts">
15
  import { useTheme } from '@/composables/useTheme';
16

17
  const { currentTheme, setTheme, availableThemes } = useTheme();
18
  </script>
19

20
  <style scoped>
21
  .theme-toggle {
22
    display: flex;
23
    gap: 8px;
24
    padding: 4px;
25
    background: var(--card-bg);
26
    border-radius: 8px;
27
    border: 1px solid var(--border-color);
28
  }
29

30
  .theme-btn {
31
    padding: 8px 16px;
32
    border: none;
33
    border-radius: 6px;
34
    background: transparent;
35
    color: var(--text-color);
36
    cursor: pointer;
37
    transition: all 0.2s ease;
38
  }
39

40
  .theme-btn:hover {
41
    background: var(--border-color);
42
  }
43

44
  .theme-btn.active {
45
    background: var(--primary-color);
46
    color: white;
47
  }
48
  </style>