Merge theme management from 'dev' into 'main'

feat(dashboard): add theme auto-switching and add theme management in customizer
feat(dashboard): enhance types in Settings

Author: kyangconn

dashboard/src/assets/mdi-subset/materialdesignicons-subset.css

@@ -1,4 +1,4 @@
-/* Auto-generated MDI subset – 247 icons */
+/* Auto-generated MDI subset – 252 icons */
 /* Do not edit manually. Run: pnpm run subset-icons */
 
 @font-face {
@@ -316,6 +316,10 @@
   content: "\F164B";
 }
 
+.mdi-database-import::before {
+  content: "\F095D";
+}
+
 .mdi-database-off::before {
   content: "\F1640";
 }
@@ -352,6 +356,10 @@
   content: "\F01DA";
 }
 
+.mdi-earth::before {
+  content: "\F01E7";
+}
+
 .mdi-emoticon::before {
   content: "\F0C68";
 }
@@ -652,6 +660,10 @@
   content: "\F0375";
 }
 
+.mdi-moon-waning-crescent::before {
+  content: "\F0F65";
+}
+
 .mdi-music-note-outline::before {
   content: "\F0F74";
 }
@@ -696,6 +708,10 @@
   content: "\F0601";
 }
 
+.mdi-palette::before {
+  content: "\F03D8";
+}
+
 .mdi-paperclip::before {
   content: "\F03E2";
 }
@@ -900,6 +916,10 @@
   content: "\F060D";
 }
 
+.mdi-sync::before {
+  content: "\F04E6";
+}
+
 .mdi-text::before {
   content: "\F09A8";
 }

dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff

@@ -259,15 +259,15 @@
             <v-list-item
               class="styled-menu-item"
               rounded="md"
-              @click="toggleTheme"
+              @click="useCustomizerStore().TOGGLE_DARK_MODE()"
             >
               <template #prepend>
                 <v-icon size="18">{{
                   isDark ? "mdi-white-balance-sunny" : "mdi-weather-night"
                 }}</v-icon>
               </template>
               <v-list-item-title>{{
-                isDark ? tm("modes.lightMode") : tm("modes.darkMode")
+                isDark ? tm("modes.light") : tm("modes.dark")
               }}</v-list-item-title>
             </v-list-item>
           </div>
@@ -848,7 +848,7 @@ watch(transportMode, (mode) => {
   localStorage.setItem("chat.transportMode", mode);
 });
 
-const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const isDark = computed(() => customizer.isDarkTheme);
 const canSend = computed(
   () =>
     Boolean(draft.value.trim() || stagedFiles.value.length) && !sending.value,
@@ -1393,10 +1393,6 @@ async function stopCurrentSession() {
   }
 }
 
-function toggleTheme() {
-  customizer.SET_UI_THEME(isDark.value ? "PurpleTheme" : "PurpleThemeDark");
-}
-
 function formatTime(value: string) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return "";

dashboard/src/assets/mdi-subset/materialdesignicons-webfont-subset.woff2

@@ -365,9 +365,7 @@ const emit = defineEmits<{
 }>();
 
 const { tm } = useModuleI18n("features/chat");
-const isDark = computed(
-  () => useCustomizerStore().uiTheme === "PurpleThemeDark",
-);
+const isDark = computed(() => useCustomizerStore().isDarkTheme);
 
 const inputField = ref<HTMLTextAreaElement | null>(null);
 const imageInputRef = ref<HTMLInputElement | null>(null);

dashboard/src/components/chat/Chat.vue

@@ -54,16 +54,15 @@
 
 <script setup lang="ts">
 import { ref, computed, onBeforeUnmount, watch } from 'vue';
-import { useTheme } from 'vuetify';
 import { useVADRecording } from '@/composables/useVADRecording';
 import SiriOrb from './LiveOrb.vue';
+import { useCustomizerStore } from '@/stores/customizer';
 
 const emit = defineEmits<{
     'close': [];
 }>();
 
-const theme = useTheme();
-const isDark = computed(() => theme.global.current.value.dark);
+const isDark = computed(() => (useCustomizerStore()).isDarkTheme);
 
 // 使用 VAD Recording composable
 const vadRecording = useVADRecording();

dashboard/src/components/chat/ChatInput.vue

@@ -217,7 +217,7 @@ const messagesContainer = ref<HTMLElement | null>(null);
 const inputRef = ref<InstanceType<typeof ChatInput> | null>(null);
 const imagePreview = reactive({ visible: false, url: "" });
 
-const isDark = computed(() => customizer.uiTheme === "PurpleThemeDark");
+const isDark = computed(() => customizer.isDarkTheme);
 const customMarkdownTags = ["ref"];
 
 const {

dashboard/src/components/chat/LiveMode.vue

@@ -1,10 +1,10 @@
 <script setup>
 import { ref, watch, computed, onUnmounted } from "vue";
-import { useTheme } from "vuetify";
 import MarkdownIt from "markdown-it";
 import axios from "axios";
 import DOMPurify from "dompurify";
 import { useI18n } from "@/i18n/composables";
+import { useCustomizerStore } from "@/stores/customizer";
 import {
   escapeHtml,
   ensureShikiLanguages,
@@ -46,7 +46,6 @@ const props = defineProps({
 
 const emit = defineEmits(["update:show"]);
 const { t, locale } = useI18n();
-const theme = useTheme();
 
 const content = ref(null);
 const error = ref(null);
@@ -57,7 +56,7 @@ const lastRequestId = ref(0);
 const lastRenderId = ref(0);
 const scrollContainer = ref(null);
 const renderedHtml = ref("");
-const isDark = computed(() => theme.global.current.value.dark);
+const isDark = computed(() => (useCustomizerStore()).isDarkTheme);
 
 const MARKDOWN_SANITIZE_OPTIONS = {
   ALLOWED_TAGS: [

dashboard/src/components/chat/StandaloneChat.vue

@@ -8,7 +8,7 @@
     "subtitle": "Welcome"
   },
   "theme": {
-    "switchToDark": "Switch to Dark Theme",
-    "switchToLight": "Switch to Light Theme"
+    "light": "Light Mode",
+    "dark": "Dark Mode"
   }
 } 

dashboard/src/components/shared/ReadmeDialog.vue

@@ -73,8 +73,8 @@
     "confirmDelete": "Are you sure you want to delete \"{name}\"? This action cannot be undone."
   },
   "modes": {
-    "darkMode": "Switch to Dark Mode",
-    "lightMode": "Switch to Light Mode"
+    "light": "Light Mode",
+    "dark": "Dark Mode"
   },
   "shortcuts": {
     "help": "Get Help",