feat(theme): add support for night theme in Element Plus and streamli…

…ne settings UI
emqx · Nov 25, 2024 · 467cb23 · 467cb23
1 parent b0b445e
commit 467cb23
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 54 deletions.
diff --git a/apps/desktop/electron.vite.config.ts b/apps/desktop/electron.vite.config.ts
@@ -78,6 +78,16 @@ export default defineConfig({
           custom: FileSystemIconLoader('../../packages/ui/src/assets/icons'),
         },
       }),
+      {
+        name: 'element-plus-night-theme',
+        transform(code, id) {
+          if (id.endsWith('packages/ui/src/styles/index.scss')) {
+            const nightThemeCode = code.replace(/html\.dark/g, 'html.night')
+            return `${code}\n${nightThemeCode}`
+          }
+          return code
+        },
+      },
     ],
     css: {
       preprocessorOptions: {

diff --git a/apps/web/components.d.ts b/apps/web/components.d.ts
@@ -21,7 +21,6 @@ declare module 'vue' {
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDivider: typeof import('element-plus/es')['ElDivider']
-    ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconDelete: typeof import('@element-plus/icons-vue')['Delete']
     ElIconPrinter: typeof import('@element-plus/icons-vue')['Printer']
     ElIconUpload: typeof import('@element-plus/icons-vue')['Upload']
@@ -34,7 +33,6 @@ declare module 'vue' {
     ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    Help: typeof import('./../../packages/ui/src/components/Help.vue')['default']
     HelpView: typeof import('./../../packages/ui/src/components/HelpView.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

diff --git a/apps/web/vite.config.ts b/apps/web/vite.config.ts
@@ -64,6 +64,16 @@ export default defineConfig({
         custom: FileSystemIconLoader('../../packages/ui/src/assets/icons'),
       },
     }),
+    {
+      name: 'element-plus-night-theme',
+      transform(code, id) {
+        if (id.endsWith('packages/ui/src/styles/index.scss')) {
+          const nightThemeCode = code.replace(/html\.dark/g, 'html.night')
+          return `${code}\n${nightThemeCode}`
+        }
+        return code
+      },
+    },
   ],
   resolve: {
     alias: {

diff --git a/packages/ui/src/components/SettingsView.vue b/packages/ui/src/components/SettingsView.vue
@@ -102,11 +102,7 @@ const AImodelsOptions = [
             <label>{{ $t('settings.automatically') }}</label>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.autoCheck"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.autoCheck" />
           </ElCol>
         </ElRow>
 
@@ -117,7 +113,6 @@ const AImodelsOptions = [
             <label>{{ $t('settings.autoResub') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
               :open-delay="500"
               :content="$t('settings.autoResubDesc')"
             >
@@ -127,11 +122,7 @@ const AImodelsOptions = [
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.autoResub"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.autoResub" />
           </ElCol>
         </ElRow>
 
@@ -142,7 +133,7 @@ const AImodelsOptions = [
             <label>{{ $t('settings.multiTopics') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
+
               :open-delay="500"
               :content="$t('settings.multiTopicsDesc')"
             >
@@ -152,11 +143,7 @@ const AImodelsOptions = [
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.multiTopics"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.multiTopics" />
           </ElCol>
         </ElRow>
 
@@ -189,7 +176,6 @@ const AImodelsOptions = [
             <label>{{ $t('settings.syncOsTheme') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
               :open-delay="500"
               :content="$t('settings.syncOsThemeDesc')"
             >
@@ -199,11 +185,7 @@ const AImodelsOptions = [
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.syncOsTheme"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.syncOsTheme" />
           </ElCol>
         </ElRow>
 
@@ -235,7 +217,6 @@ const AImodelsOptions = [
             <label>{{ $t('settings.jsonHighlight') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
               :open-delay="500"
             >
               <template #content>
@@ -247,11 +228,7 @@ const AImodelsOptions = [
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.jsonHighlight"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.jsonHighlight" />
           </ElCol>
         </ElRow>
 
@@ -270,7 +247,6 @@ const AImodelsOptions = [
             <label>{{ $t('log.logLevel') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
               :open-delay="500"
               :content="$t('log.logLevelDesc')"
             >
@@ -347,7 +323,6 @@ const AImodelsOptions = [
             <label>{{ $t('settings.ignoreQoS0Message') }}</label>
             <ElTooltip
               placement="top"
-              :effect="settings.currentTheme !== 'light' ? 'light' : 'dark'"
               :open-delay="500"
               :content="$t('settings.ignoreQoS0MessageDesc')"
             >
@@ -357,11 +332,7 @@ const AImodelsOptions = [
             </ElTooltip>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.ignoreQoS0Message"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.ignoreQoS0Message" />
           </ElCol>
         </ElRow>
 
@@ -380,11 +351,7 @@ const AImodelsOptions = [
             <label>{{ $t('settings.enableCopilot') }}</label>
           </ElCol>
           <ElCol :span="8">
-            <ElSwitch
-              v-model="settings.enableCopilot"
-              active-color="#13ce66"
-              inactive-color="#A2A9B0"
-            />
+            <ElSwitch v-model="settings.enableCopilot" />
           </ElCol>
         </ElRow>
 

diff --git a/packages/ui/src/stores/useSettingsStore.ts b/packages/ui/src/stores/useSettingsStore.ts
@@ -34,13 +34,13 @@ export const useSettingsStore = defineStore('settings', () => {
   })
 
   watch([() => settings.value?.syncOsTheme, () => settings.value?.currentTheme], ([syncOsTheme, currentTheme]) => {
-    const htmlClassList = document.documentElement.classList
+    if (typeof document === 'undefined') return
     if (syncOsTheme) {
       const isDark = usePreferredDark()
       settings.value!.currentTheme = isDark.value ? 'dark' : 'light'
-      htmlClassList.replace(htmlClassList.value, isDark.value ? 'dark' : 'light')
+      document.documentElement.className = isDark.value ? 'dark' : 'light'
     } else {
-      htmlClassList.replace(htmlClassList.value, currentTheme || 'light')
+      document.documentElement.className = currentTheme || 'light'
     }
   })
 

diff --git a/packages/ui/src/styles/variable.scss b/packages/ui/src/styles/variable.scss
@@ -1,9 +1,12 @@
-@forward './themes/light.scss';
-@forward './themes/dark.scss';
-@forward './themes/night.scss';
+@use 'element-plus/theme-chalk/dark/css-vars.css' as *;
+@use './themes/light.scss' as *;
+@use './themes/dark.scss' as *;
+@use './themes/night.scss' as *;
 
 /* Element UI CSS Vars Colors */
-:root {
+html.light,
+html.dark,
+html.night {
   --el-color-primary: var(--color-main-green);
   --el-color-primary-light-3: #34c387e0;
   --el-color-primary-light-5: #34c387b6;
@@ -16,10 +19,10 @@
   --el-color-danger: var(--color-minor-red);
   --el-color-error: var(--color-minor-red);
 }
-/* Uncomment and add this code to change Element UI color for different themes. */
-// html.dark {
-//   --el-color-primary: black;
-// }
+
+html.night {
+  color-scheme: night;
+}
 
 /* Common Scss Vars */
 $font-family: