support change theme

src/DesktopApp.vue

@@ -15,6 +15,7 @@ import { useTokensStore } from '@/stores/token.js';
 import { useExchangeRatesStore } from '@/stores/exchangeRates.js';
 
 import { loadMapAssets } from '@/lib/map/index.js';
+import { getSystemTheme } from '@/lib/ui.js';
 
 export default {
     data() {
@@ -36,8 +37,20 @@ export default {
             theme.global.name.value = 'light';
         } else if (self.$settings.getTheme() === 'dark') {
             theme.global.name.value = 'dark';
+        } else {
+            theme.global.name.value = getSystemTheme();
         }
 
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
+            if (self.$settings.getTheme() === 'auto') {
+                if (e.matches) {
+                    theme.global.name.value = 'dark';
+                } else {
+                    theme.global.name.value = 'light';
+                }
+            }
+        });
+
         let localeDefaultSettings = self.$locale.initLocale(self.userStore.currentUserLanguage);
         self.settingsStore.updateLocalizedDefaultSettings(localeDefaultSettings);
 

src/lib/ui.js

@@ -0,0 +1,7 @@
+export function getSystemTheme() {
+    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        return 'dark';
+    } else {
+        return 'light';
+    }
+}

src/views/desktop/MainLayout.vue

@@ -96,6 +96,10 @@
                             <h1 class="font-weight-medium text-xl">{{ $t('global.app.title') }}</h1>
                         </div>
                         <v-spacer />
+                        <v-btn color="primary" variant="text" class="me-2"
+                               :icon="true" @click="(currentTheme === 'light' ? currentTheme = 'dark' : (currentTheme === 'dark' ? currentTheme = 'auto' : currentTheme = 'light'))">
+                            <v-icon :icon="(currentTheme === 'light' ? icons.themeLight : (currentTheme === 'dark' ? icons.themeDark : icons.themeAuto))" size="24" />
+                        </v-btn>
                         <v-avatar class="cursor-pointer" color="primary" variant="tonal">
                             <v-icon :icon="icons.user"/>
                             <v-menu activator="parent" width="230" location="bottom end" offset="14px">
@@ -163,11 +167,15 @@
 
 <script>
 import { useDisplay } from 'vuetify';
+import { useTheme } from 'vuetify';
+
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/index.js';
 import { useSettingsStore } from '@/stores/setting.js';
 import { useUserStore } from '@/stores/user.js';
 
+import { getSystemTheme } from '@/lib/ui.js';
+
 import {
     mdiMenu,
     mdiHomeOutline,
@@ -179,6 +187,9 @@ import {
     mdiSwapHorizontal,
     mdiCogOutline,
     mdiInformationOutline,
+    mdiThemeLightDark,
+    mdiWeatherSunny,
+    mdiWeatherNight,
     mdiAccount,
     mdiAccountOutline,
     mdiLogout
@@ -186,7 +197,10 @@ import {
 
 export default {
     data() {
+        const self = this;
+
         return {
+            theme: self.$settings.getTheme(),
             logouting: false,
             isVerticalNavScrolled: false,
             showVerticalOverlayMenu: false,
@@ -204,6 +218,9 @@ export default {
                 exchangeRates: mdiSwapHorizontal,
                 settings: mdiCogOutline,
                 about: mdiInformationOutline,
+                themeAuto: mdiThemeLightDark,
+                themeLight: mdiWeatherSunny,
+                themeDark: mdiWeatherNight,
                 user: mdiAccount,
                 profile: mdiAccountOutline,
                 logout: mdiLogout
@@ -218,10 +235,31 @@ export default {
         },
         currentNickName() {
             return this.userStore.currentUserNickname || this.$t('User');
+        },
+        currentTheme: {
+            get: function () {
+                return this.theme;
+            },
+            set: function (value) {
+                if (value !== this.$settings.getTheme()) {
+                    this.theme = value;
+                    this.$settings.setTheme(value);
+
+                    if (value === 'light' || value === 'dark') {
+                        this.globalTheme.global.name.value = value;
+                    } else {
+                        this.globalTheme.global.name.value = getSystemTheme();
+                    }
+                }
+            }
         }
     },
-    created() {
+    setup () {
+        const theme = useTheme();
 
+        return {
+            globalTheme: theme
+        };
     },
     methods: {
         handleNavScroll(e) {