feat: 添加主题管理功能，更新系统设置页面，优化用户体验

src/views/market/components/category.vue

@@ -36,7 +36,7 @@ ion-content::part(scroll) {
 .item {
   @apply px-3 py-1 rounded-full text-xs transition-all;
 }
-@media (prefers-color-scheme: dark) {
+.ion-palette-dark {
   .item {
     @apply bg-(--ion-color-step-800);
   }

src/views/onchain-address/index.vue

@@ -68,7 +68,7 @@ const { user } = useAuth();
   --background: #f4f6f8;
   --border-color: #c6c5c5;
 }
-@media (prefers-color-scheme: dark) {
+.ion-palette-dark {
   .content-wrapper {
     --background: #232324;
     --border-color: #3a3a3b;

src/views/system-settings/index.vue

@@ -1,12 +1,18 @@
 <script lang="ts" setup>
 import { alertController, toastController, useIonRouter } from "@ionic/vue";
-import { checkbox, close, information, languageOutline, refresh } from "ionicons/icons";
+import { checkbox, close, contrastOutline, information, languageOutline, refresh } from "ionicons/icons";
 
 const { t } = useI18n();
 const router = useIonRouter();
 const { cacheSize, calculateCacheSize, clearCache } = useCacheSize();
 const { isChecking, checkForUpdate } = useAppUpdate();
 const { currentLanguage } = useLanguage();
+const { theme } = useTheme();
+const themeNames = {
+  light: t("settings.themeLight"),
+  dark: t("settings.themeDark"),
+  auto: t("settings.themeAuto"),
+};
 
 function handleClearCache() {
   clearCache();
@@ -98,6 +104,21 @@ onMounted(() => {
             </div>
           </div>
         </ion-item>
+        <ion-item button @click="router.push('/system-settings/theme')">
+          <div class="flex justify-between w-full items-center">
+            <div class="flex-center space-x-2">
+              <div class="icon">
+                <ion-icon :icon="contrastOutline" class="text-lg" />
+              </div>
+              <div class="text-sm font-semibold">
+                {{ t("settings.theme") }}
+              </div>
+            </div>
+            <div class="end">
+              {{ themeNames[theme] }}
+            </div>
+          </div>
+        </ion-item>
         <ion-item button>
           <div class="flex justify-between w-full items-center">
             <div class="flex-center space-x-2">

src/views/system-settings/theme.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import type { ThemeMode } from "@/composables/useTheme";
+import { useIonRouter } from "@ionic/vue";
+
+const { t } = useI18n();
+const { theme } = useTheme();
+
+const themes: { value: ThemeMode; label: string }[] = [
+  { value: "light", label: t("settings.themeLight") },
+  { value: "dark", label: t("settings.themeDark") },
+  { value: "auto", label: t("settings.themeAuto") },
+];
+
+function handleThemeChange(event: CustomEvent) {
+  const themeMode = event.detail.value as ThemeMode;
+  theme.value = themeMode;
+}
+</script>
+
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar class="ui-toolbar">
+        <ion-back-button slot="start" />
+        <ion-title>{{ t("settings.theme") }}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content :fullscreen="true" class="ion-padding">
+      <ion-list lines="full">
+        <ion-radio-group :value="theme" @ion-change="handleThemeChange">
+          <ion-item v-for="item in themes" :key="item.value">
+            <ion-radio :value="item.value">
+              <div class="theme-item">
+                <div class="font-semibold">
+                  {{ item.label }}
+                </div>
+              </div>
+            </ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+    </ion-content>
+  </ion-page>
+</template>
+
+<style lang='css' scoped>
+@reference "tailwindcss";
+
+.theme-item {
+  @apply py-1;
+}
+
+ion-radio {
+  width: 100%;
+}
+</style>

src/views/trade-settings/bank-management/add.vue

@@ -178,7 +178,7 @@ function formatCardNumber(value: string) {
   border-color: #ef4444;
 }
 
-@media (prefers-color-scheme: dark) {
+.ion-palette-dark {
   .ui-select {
     border-color: #4b5563;
   }