num/client/components/ThemeToggle.vue

<template>
  <view class="theme-switcher" :class="{ 'is-dark': isDark }">
    <text
      class="theme-btn theme-btn--dark"
      :class="{ active: isDark }"
      @click="setDark"
    >🌙</text>
    <text
      class="theme-btn theme-btn--light"
      :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: 1px solid rgba(255, 255, 255, 0.2);
 border-radius: 999px;
 padding: 3px;
 gap: 2px;
 }

 .theme-btn {
 font-size: 16px;
 padding: 6px 10px;
 border-radius: 999px;
 cursor: pointer;
 transition: all 0.25s ease;
 line-height: 1;
 opacity: 0.5;
 filter: grayscale(0.6);
 }

 .theme-btn.active {
 opacity: 1;
 filter: grayscale(0);
 background: rgba(255, 255, 255, 0.95);
 box-shadow: 0 2px 8px rgba(0,0,0,0.15);
 }

 .theme-switcher.is-dark .theme-btn.active {
 background: rgba(255, 255, 255, 1);
 }
 </style>