Fix theme mode fallback

src/components/NavMenu.vue

@@ -516,7 +516,7 @@
     const handleThemeSelect = (theme) => {
         themeMenuVisible.value = false;
         settingsMenuVisible.value = false;
-        appearanceSettingsStore.saveThemeMode(theme);
+        appearanceSettingsStore.setThemeMode(theme);
     };
 
     const handleThemeColorSelect = async (colorFamily) => {

src/plugin/ui.js

@@ -23,9 +23,7 @@ export async function initUi() {
 
         const { initThemeMode, isDarkMode } =
             await getThemeMode(configRepository);
-
         setLoginContainerStyle(isDarkMode);
-        changeAppDarkStyle(isDarkMode);
         changeAppThemeStyle(initThemeMode);
     } catch (error) {
         console.error('Error initializing locale and theme:', error);

src/shared/utils/base/ui.js

@@ -6,6 +6,8 @@ import { i18n } from '../../../plugin/i18n';
 import { router } from '../../../plugin/router';
 import { useAppearanceSettingsStore } from '../../../stores';
 
+import configRepository from '../../../service/config.js';
+
 /**
  *
  * @returns {boolean}
@@ -74,11 +76,11 @@ function changeAppThemeStyle(themeMode) {
 
     let themeConfig = THEME_CONFIG[themeMode];
     if (!themeConfig) {
+        // fallback to system
         console.error('Invalid theme mode:', themeMode);
-        themeMode = 'dark';
+        configRepository.setString('VRCX_ThemeMode', 'system');
+        themeMode = systemIsDarkMode() ? 'dark' : 'light';
         themeConfig = THEME_CONFIG[themeMode];
-        const appSettingsStore = useAppearanceSettingsStore();
-        appSettingsStore.setThemeMode(themeMode);
     }
 
     const cssFiles = Array.isArray(themeConfig.cssFiles)
@@ -116,6 +118,8 @@ function changeAppThemeStyle(themeMode) {
     }
     changeAppDarkStyle(themeConfig.isDark);
 
+    return { isDark: themeConfig.isDark };
+
     // let $appThemeDarkStyle = document.getElementById('app-theme-dark-style');
     // const darkThemeCssPath = `${filePathPrefix}theme.dark.css`;
     // const shouldApplyDarkBase = themeConfig.isDark;
@@ -313,7 +317,6 @@ async function getThemeMode(configRepository) {
     );
 
     let isDarkMode;
-
     if (initThemeMode === 'light') {
         isDarkMode = false;
     } else if (initThemeMode === 'system') {

src/stores/settings/appearance.js

@@ -6,13 +6,10 @@ import { useRouter } from 'vue-router';
 
 import {
     HueToHex,
-    changeAppDarkStyle,
     changeAppThemeStyle,
     changeHtmlLangAttribute,
-    systemIsDarkMode,
     updateTrustColorClasses
 } from '../../shared/utils/base/ui';
-import { THEME_CONFIG } from '../../shared/constants';
 import { database } from '../../service/database';
 import { getNameColour } from '../../shared/utils';
 import { languageCodes } from '../../localization';
@@ -204,16 +201,8 @@ export const useAppearanceSettingsStore = defineStore(
                 await changeAppLanguage(appLanguageConfig);
             }
 
-            const normalizedThemeMode = normalizeThemeMode(themeModeConfig);
-            if (normalizedThemeMode !== themeModeConfig) {
-                configRepository.setString(
-                    'VRCX_ThemeMode',
-                    normalizedThemeMode
-                );
-            }
-
-            themeMode.value = normalizedThemeMode;
-            applyThemeMode();
+            themeMode.value = themeModeConfig;
+            setThemeMode(themeModeConfig);
             await initPrimaryColor();
 
             displayVRCPlusIconsAsAvatar.value =
@@ -289,14 +278,6 @@ export const useAppearanceSettingsStore = defineStore(
             { flush: 'sync' }
         );
 
-        function normalizeThemeMode(mode) {
-            if (Object.prototype.hasOwnProperty.call(THEME_CONFIG, mode)) {
-                return mode;
-            } else {
-                return 'dark';
-            }
-        }
-
         /**
          *
          * @param {string} language
@@ -321,21 +302,6 @@ export const useAppearanceSettingsStore = defineStore(
             changeHtmlLangAttribute(language);
         }
 
-        /**
-         * @param {string} newThemeMode
-         * @returns {Promise<void>}
-         */
-        async function saveThemeMode(newThemeMode) {
-            setThemeMode(newThemeMode);
-            await changeThemeMode();
-        }
-
-        async function changeThemeMode() {
-            await changeAppThemeStyle(themeMode.value);
-            vrStore.updateVRConfigVars();
-            await updateTrustColor(undefined, undefined);
-        }
-
         /**
          *
          * @param {string} field
@@ -463,7 +429,7 @@ export const useAppearanceSettingsStore = defineStore(
             .matchMedia('(prefers-color-scheme: dark)')
             .addEventListener('change', async () => {
                 if (themeMode.value === 'system') {
-                    await changeThemeMode();
+                    setThemeMode(themeMode.value);
                 }
             });
 
@@ -471,29 +437,14 @@ export const useAppearanceSettingsStore = defineStore(
          * @param {string} mode
          */
         function setThemeMode(mode) {
-            const normalizedThemeMode = normalizeThemeMode(mode);
-            themeMode.value = normalizedThemeMode;
-            configRepository.setString('VRCX_ThemeMode', normalizedThemeMode);
-            applyThemeMode();
-        }
-
-        function applyThemeMode() {
-            if (themeMode.value === 'light') {
-                setIsDarkMode(false);
-            } else if (themeMode.value === 'system') {
-                setIsDarkMode(systemIsDarkMode());
-            } else {
-                setIsDarkMode(true);
-            }
-        }
-
-        /**
-         * @param {boolean} isDark
-         */
-        function setIsDarkMode(isDark) {
+            themeMode.value = mode;
+            configRepository.setString('VRCX_ThemeMode', mode);
+            const { isDark } = changeAppThemeStyle(mode);
             isDarkMode.value = isDark;
-            changeAppDarkStyle(isDark);
+            vrStore.updateVRConfigVars();
+            updateTrustColor(undefined, undefined);
         }
+
         function setDisplayVRCPlusIconsAsAvatar() {
             displayVRCPlusIconsAsAvatar.value =
                 !displayVRCPlusIconsAsAvatar.value;
@@ -904,10 +855,8 @@ export const useAppearanceSettingsStore = defineStore(
             setRandomUserColours,
             setCompactTableMode,
             setTrustColor,
-            saveThemeMode,
             tryInitUserColours,
             updateTrustColor,
-            changeThemeMode,
             userColourInit,
             applyUserTrustLevel,
             changeAppLanguage,

src/views/Settings/components/Tabs/AppearanceTab.vue

@@ -19,7 +19,7 @@
             </div>
             <div class="options-container-item">
                 <span class="name">{{ t('view.settings.appearance.appearance.theme_mode') }}</span>
-                <Select :model-value="themeMode" @update:modelValue="saveThemeMode">
+                <Select :model-value="themeMode" @update:modelValue="setThemeMode">
                     <SelectTrigger size="sm">
                         <SelectValue :placeholder="t(`view.settings.appearance.appearance.theme_mode_${themeMode}`)" />
                     </SelectTrigger>
@@ -437,7 +437,7 @@
         setHideUserMemos,
         setHideUnfriends,
         updateTrustColor,
-        saveThemeMode,
+        setThemeMode,
         changeAppLanguage,
         promptMaxTableSizeDialog,
         setNotificationIconDot,