refactor(projects): combine theme tokens and theme settings. close #379

Author: honghuangdc

src/components/common/dark-mode-container.vue

@@ -9,7 +9,7 @@ defineProps<Props>();
 </script>
 
 <template>
-  <div class="bg-container text-base_text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
+  <div class="bg-container text-base-text transition-300" :class="{ 'bg-inverted text-#1f1f1f': inverted }">
     <slot></slot>
   </div>
 </template>

src/layouts/modules/theme-drawer/components/setting-item.vue

@@ -14,7 +14,7 @@ defineProps<Props>();
 <template>
   <div class="w-full flex-y-center justify-between">
     <div>
-      <span class="pr-8px text-base_text">{{ label }}</span>
+      <span class="pr-8px text-base-text">{{ label }}</span>
       <slot name="suffix"></slot>
     </div>
     <slot></slot>

src/store/modules/theme/index.ts

@@ -125,7 +125,11 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
 
   /** Setup theme vars to html */
   function setupThemeVarsToHtml() {
-    const { themeTokens, darkThemeTokens } = createThemeToken(themeColors.value, settings.value.recommendColor);
+    const { themeTokens, darkThemeTokens } = createThemeToken(
+      themeColors.value,
+      settings.value.tokens,
+      settings.value.recommendColor
+    );
     addThemeVarsToHtml(themeTokens, darkThemeTokens);
   }
 

src/store/modules/theme/shared.ts

@@ -30,39 +30,40 @@ export function initThemeSettings() {
 }
 
 /**
- * Create theme token
+ * create theme token css vars value by theme settings
  *
  * @param colors Theme colors
+ * @param tokens Theme setting tokens
  * @param [recommended=false] Use recommended color. Default is `false`
  */
-export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
+export function createThemeToken(
+  colors: App.Theme.ThemeColor,
+  tokens?: App.Theme.ThemeSetting['tokens'],
+  recommended = false
+) {
   const paletteColors = createThemePaletteColors(colors, recommended);
 
-  const themeTokens: App.Theme.ThemeToken = {
+  const { light, dark } = tokens || themeSettings.tokens;
+
+  const themeTokens: App.Theme.ThemeTokenCSSVars = {
     colors: {
       ...paletteColors,
       nprogress: paletteColors.primary,
-      container: 'rgb(255, 255, 255)',
-      layout: 'rgb(247, 250, 252)',
-      inverted: 'rgb(0, 20, 40)',
-      base_text: 'rgb(31, 31, 31)'
+      ...light.colors
     },
     boxShadow: {
-      header: '0 1px 2px rgb(0, 21, 41, 0.08)',
-      sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
-      tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      ...light.boxShadow
     }
   };
 
-  const darkThemeTokens: App.Theme.ThemeToken = {
+  const darkThemeTokens: App.Theme.ThemeTokenCSSVars = {
     colors: {
       ...themeTokens.colors,
-      container: 'rgb(28, 28, 28)',
-      layout: 'rgb(18, 18, 18)',
-      base_text: 'rgb(224, 224, 224)'
+      ...dark?.colors
     },
     boxShadow: {
-      ...themeTokens.boxShadow
+      ...themeTokens.boxShadow,
+      ...dark?.boxShadow
     }
   };
 

src/theme/settings.ts

@@ -46,6 +46,28 @@ export const themeSettings: App.Theme.ThemeSetting = {
     fixed: false,
     height: 48,
     right: true
+  },
+  tokens: {
+    light: {
+      colors: {
+        container: 'rgb(255, 255, 255)',
+        layout: 'rgb(247, 250, 252)',
+        inverted: 'rgb(0, 20, 40)',
+        'base-text': 'rgb(31, 31, 31)'
+      },
+      boxShadow: {
+        header: '0 1px 2px rgb(0, 21, 41, 0.08)',
+        sider: '2px 0 8px 0 rgb(29, 35, 41, 0.05)',
+        tab: '0 1px 2px rgb(0, 21, 41, 0.08)'
+      }
+    },
+    dark: {
+      colors: {
+        container: 'rgb(28, 28, 28)',
+        layout: 'rgb(18, 18, 18)',
+        'base-text': 'rgb(224, 224, 224)'
+      }
+    }
   }
 };
 

src/theme/vars.ts

@@ -18,14 +18,14 @@ function createColorPaletteVars() {
 const colorPaletteVars = createColorPaletteVars();
 
 /** Theme vars */
-export const themeVars: App.Theme.ThemeToken = {
+export const themeVars: App.Theme.ThemeTokenCSSVars = {
   colors: {
     ...colorPaletteVars,
     nprogress: 'rgb(var(--nprogress-color))',
     container: 'rgb(var(--container-bg-color))',
     layout: 'rgb(var(--layout-bg-color))',
     inverted: 'rgb(var(--inverted-bg-color))',
-    base_text: 'rgb(var(--base-text-color))'
+    'base-text': 'rgb(var(--base-text-color))'
   },
   boxShadow: {
     header: 'var(--header-box-shadow)',

src/typings/app.d.ts

@@ -4,16 +4,6 @@ declare namespace App {
   namespace Theme {
     type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
 
-    /** Theme token */
-    type ThemeToken = {
-      colors: ThemeTokenColor;
-      boxShadow: {
-        header: string;
-        sider: string;
-        tab: string;
-      };
-    };
-
     /** Theme setting */
     interface ThemeSetting {
       /** Theme scheme */
@@ -97,6 +87,13 @@ declare namespace App {
         /** Whether float the footer to the right when the layout is 'horizontal-mix' */
         right: boolean;
       };
+      /** define some theme settings tokens, will transform to css variables */
+      tokens: {
+        light: ThemeSettingToken;
+        dark?: {
+          [K in keyof ThemeSettingToken]?: Partial<ThemeSettingToken[K]>;
+        };
+      };
     }
 
     interface OtherColor {
@@ -118,14 +115,33 @@ declare namespace App {
 
     type BaseToken = Record<string, Record<string, string>>;
 
-    interface ThemeTokenColor extends ThemePaletteColor {
-      nprogress: string;
+    interface ThemeSettingTokenColor {
+      /** the progress bar color, if not set, will use the primary color */
+      nprogress?: string;
       container: string;
       layout: string;
       inverted: string;
-      base_text: string;
-      [key: string]: string;
+      'base-text': string;
+    }
+
+    interface ThemeSettingTokenBoxShadow {
+      header: string;
+      sider: string;
+      tab: string;
+    }
+
+    interface ThemeSettingToken {
+      colors: ThemeSettingTokenColor;
+      boxShadow: ThemeSettingTokenBoxShadow;
     }
+
+    type ThemeTokenColor = ThemePaletteColor & ThemeSettingTokenColor;
+
+    /** Theme token CSS variables */
+    type ThemeTokenCSSVars = {
+      colors: ThemeTokenColor & { [key: string]: string };
+      boxShadow: ThemeSettingTokenBoxShadow & { [key: string]: string };
+    };
   }
 
   /** Global namespace */