num/client/components/ThemeToggle.vue

<template>
 <view class="theme-switcher">
 <text
 class="theme-btn"
 :class="{ active: isDark }"
 @click="setDark"
 >深色</text>
 <text
 class="theme-btn"
 :class="{ active: !isDark }"
 @click="setLight"
 >浅色</text>
 </view>
 </template>

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

 const themeStore = useThemeStore()

 const isDark = computed(() => themeStore.theme === 'dark')

 function setDark() {
 themeStore.setTheme('dark')
 }

 function setLight() {
 themeStore.setTheme('light')
 }
 </script>

 <style>
 .theme-switcher {
 display: inline-flex;
 align-items: center;
 background: rgba(255, 255, 255, 0.12);
 border-radius: 8px;
 padding: 2px;
 gap: 2px;
 }

 .theme-btn {
 font-size: 12px;
 padding: 4px 12px;
 border-radius: 6px;
 color: rgba(255, 255, 255, 0.7);
 transition: all 0.2s ease;
 line-height: 1.4;
 }

 .theme-btn.active {
 background: rgba(255, 255, 255, 0.95);
 color: #1A1A2E;
 font-weight: 600;
 }
 </style>