feat: 面板主题色增加跟随浏览器 (#3107)

Refs #3075

frontend/src/hooks/use-theme.ts

@@ -8,6 +8,10 @@ export const useTheme = () => {
     const themeConfig = computed(() => globalStore.themeConfig);
 
     const switchDark = () => {
+        if (themeConfig.value.theme === 'auto') {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
+            themeConfig.value.theme = prefersDark.matches ? 'dark' : 'light';
+        }
         const body = document.documentElement as HTMLElement;
         if (themeConfig.value.theme === 'dark') body.setAttribute('class', 'dark');
         else body.setAttribute('class', '');

frontend/src/lang/modules/en.ts

@@ -1162,6 +1162,7 @@ const message = {
         theme: 'Theme',
         dark: 'Dark',
         light: 'Light',
+        auto: 'Follow System',
         language: 'Language',
         languageHelper:
             'By default, it follows the browser language. This parameter takes effect only on the current browser',

frontend/src/lang/modules/tw.ts

@@ -1106,6 +1106,7 @@ const message = {
         componentSize: '組件大小',
         dark: '暗色',
         light: '亮色',
+        auto: '跟隨系統',
         language: '系統語言',
         languageHelper: '默認跟隨瀏覽器語言，設置後只對當前瀏覽器生效，更換瀏覽器後需要重新設置',
         sessionTimeout: '超時時間',

frontend/src/lang/modules/zh.ts

@@ -1107,6 +1107,7 @@ const message = {
         componentSize: '组件大小',
         dark: '暗色',
         light: '亮色',
+        auto: '跟随系统',
         language: '系统语言',
         languageHelper: '默认跟随浏览器语言，设置后只对当前浏览器生效，更换浏览器后需要重新设置',
         sessionTimeout: '超时时间',

frontend/src/layout/index.vue

@@ -73,6 +73,15 @@ const loadDataFromDB = async () => {
     switchDark();
 };
 
+const updateDarkMode = async (event: MediaQueryListEvent) => {
+    const res = await getSettingInfo();
+    if (res.data.theme !== 'auto') {
+        return;
+    }
+    globalStore.setThemeConfig({ ...themeConfig.value, theme: event.matches ? 'dark' : 'light' });
+    switchDark();
+};
+
 const loadStatus = async () => {
     loading.value = globalStore.isLoading;
     loadinText.value = globalStore.loadingText;
@@ -101,6 +110,17 @@ onBeforeUnmount(() => {
 onMounted(() => {
     loadStatus();
     loadDataFromDB();
+
+    const mqList = window.matchMedia('(prefers-color-scheme: dark)');
+    if (mqList.addEventListener) {
+        mqList.addEventListener('change', (e) => {
+            updateDarkMode(e);
+        });
+    } else if (mqList.addListener) {
+        mqList.addListener((e) => {
+            updateDarkMode(e);
+        });
+    }
 });
 </script>
 

frontend/src/views/setting/panel/index.vue

@@ -29,13 +29,14 @@
                             <el-form-item :label="$t('setting.theme')" prop="theme">
                                 <el-radio-group @change="onSave('Theme', form.theme)" v-model="form.theme">
                                     <el-radio-button label="light">
-                                        <el-icon><Sunny /></el-icon>
                                         <span>{{ $t('setting.light') }}</span>
                                     </el-radio-button>
                                     <el-radio-button label="dark">
-                                        <el-icon><Moon /></el-icon>
                                         <span>{{ $t('setting.dark') }}</span>
                                     </el-radio-button>
+                                    <el-radio-button label="auto">
+                                        <span>{{ $t('setting.auto') }}</span>
+                                    </el-radio-button>
                                 </el-radio-group>
                             </el-form-item>