refactor(utils): Configure theme using .env environment variables

.env

@@ -49,3 +49,7 @@ VITE_STORAGE_PREFIX=SOY_
 
 # used to control whether the program automatically detects updates
 VITE_AUTOMATICALLY_DETECT_UPDATE=Y
+
+# VITE_THEME_SCHEME=dark
+VITE_THEME_LAYOUT_MODE=horizontal
+VITE_THEME_TAB_VISIBLE=false

src/store/modules/theme/shared.ts

@@ -1,6 +1,6 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
 import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
-import { overrideThemeSettings, themeSettings } from '@/theme/settings';
+import { envThemeSettings, overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { toggleHtmlClass } from '@/utils/common';
 import { localStg } from '@/utils/storage';
@@ -11,6 +11,7 @@ const DARK_CLASS = 'dark';
 export function initThemeSettings() {
   const isProd = import.meta.env.PROD;
 
+  Object.assign(themeSettings, envThemeSettings);
   // if it is development mode, the theme settings will not be cached, by update `themeSettings` in `src/theme/settings.ts` to update theme settings
   if (!isProd) return themeSettings;
 

src/theme/settings.ts

@@ -90,3 +90,144 @@ export const overrideThemeSettings: Partial<App.Theme.ThemeSetting> = {
     text: 'SoybeanAdmin'
   }
 };
+
+/**
+ * Configure theme using .env environment variables
+ *
+ * Add by woeoio@qq.com
+ */
+export const envThemeSettings: Partial<App.Theme.ThemeSetting> = {
+  // Theme Scheme
+  themeScheme: import.meta.env.VITE_THEME_SCHEME || themeSettings.themeScheme,
+
+  // Grayscale
+  grayscale: import.meta.env.VITE_THEME_GRAYSCALE
+    ? import.meta.env.VITE_THEME_GRAYSCALE === 'true'
+    : themeSettings.grayscale,
+
+  // Recommend Color
+  recommendColor: import.meta.env.VITE_THEME_RECOMMEND_COLOR
+    ? import.meta.env.VITE_THEME_RECOMMEND_COLOR === 'true'
+    : themeSettings.recommendColor,
+
+  // Theme Color
+  themeColor: import.meta.env.VITE_THEME_COLOR || themeSettings.themeColor,
+
+  // Other Colors
+  otherColor: {
+    info: import.meta.env.VITE_THEME_COLOR_INFO || themeSettings.otherColor.info,
+    success: import.meta.env.VITE_THEME_COLOR_SUCCESS || themeSettings.otherColor.success,
+    warning: import.meta.env.VITE_THEME_COLOR_WARNING || themeSettings.otherColor.warning,
+    error: import.meta.env.VITE_THEME_COLOR_ERROR || themeSettings.otherColor.error
+  },
+
+  // Info Follow Primary
+  isInfoFollowPrimary: import.meta.env.VITE_THEME_INFO_FOLLOW_PRIMARY
+    ? import.meta.env.VITE_THEME_INFO_FOLLOW_PRIMARY === 'true'
+    : themeSettings.isInfoFollowPrimary,
+
+  // Layout
+  layout: {
+    mode: import.meta.env.VITE_THEME_LAYOUT_MODE || themeSettings.layout.mode,
+    scrollMode: import.meta.env.VITE_THEME_SCROLL_MODE || themeSettings.layout.scrollMode
+  },
+
+  // Page Animation
+  page: {
+    animate: import.meta.env.VITE_THEME_PAGE_ANIMATE
+      ? import.meta.env.VITE_THEME_PAGE_ANIMATE === 'true'
+      : themeSettings.page.animate,
+    animateMode: import.meta.env.VITE_THEME_PAGE_ANIMATE_MODE || themeSettings.page.animateMode
+  },
+
+  // Header
+  header: {
+    height: Number(import.meta.env.VITE_THEME_HEADER_HEIGHT) || themeSettings.header.height,
+    breadcrumb: {
+      visible: import.meta.env.VITE_THEME_BREADCRUMB_VISIBLE
+        ? import.meta.env.VITE_THEME_BREADCRUMB_VISIBLE === 'true'
+        : themeSettings.header.breadcrumb.visible,
+      showIcon: import.meta.env.VITE_THEME_BREADCRUMB_SHOW_ICON
+        ? import.meta.env.VITE_THEME_BREADCRUMB_SHOW_ICON === 'true'
+        : themeSettings.header.breadcrumb.showIcon
+    }
+  },
+
+  // Tab
+  tab: {
+    visible: import.meta.env.VITE_THEME_TAB_VISIBLE
+      ? import.meta.env.VITE_THEME_TAB_VISIBLE === 'true'
+      : themeSettings.tab.visible,
+    cache: import.meta.env.VITE_THEME_TAB_CACHE
+      ? import.meta.env.VITE_THEME_TAB_CACHE === 'true'
+      : themeSettings.tab.cache,
+    height: Number(import.meta.env.VITE_THEME_TAB_HEIGHT) || themeSettings.tab.height,
+    mode: import.meta.env.VITE_THEME_TAB_MODE || themeSettings.tab.mode
+  },
+
+  // Fixed Header and Tab
+  fixedHeaderAndTab: import.meta.env.VITE_THEME_FIXED_HEADER_AND_TAB
+    ? import.meta.env.VITE_THEME_FIXED_HEADER_AND_TAB === 'true'
+    : themeSettings.fixedHeaderAndTab,
+
+  // Sider
+  sider: {
+    inverted: import.meta.env.VITE_THEME_SIDER_INVERTED
+      ? import.meta.env.VITE_THEME_SIDER_INVERTED === 'true'
+      : themeSettings.sider.inverted,
+    width: Number(import.meta.env.VITE_THEME_SIDER_WIDTH) || themeSettings.sider.width,
+    collapsedWidth: Number(import.meta.env.VITE_THEME_SIDER_COLLAPSED_WIDTH) || themeSettings.sider.collapsedWidth,
+    mixWidth: Number(import.meta.env.VITE_THEME_SIDER_MIX_WIDTH) || themeSettings.sider.mixWidth,
+    mixCollapsedWidth:
+      Number(import.meta.env.VITE_THEME_SIDER_MIX_COLLAPSED_WIDTH) || themeSettings.sider.mixCollapsedWidth,
+    mixChildMenuWidth:
+      Number(import.meta.env.VITE_THEME_SIDER_MIX_CHILD_MENU_WIDTH) || themeSettings.sider.mixChildMenuWidth
+  },
+
+  // Footer
+  footer: {
+    visible: import.meta.env.VITE_THEME_FOOTER_VISIBLE
+      ? import.meta.env.VITE_THEME_FOOTER_VISIBLE === 'true'
+      : themeSettings.footer.visible,
+    fixed: import.meta.env.VITE_THEME_FOOTER_FIXED
+      ? import.meta.env.VITE_THEME_FOOTER_FIXED === 'true'
+      : themeSettings.footer.fixed,
+    height: Number(import.meta.env.VITE_THEME_FOOTER_HEIGHT) || themeSettings.footer.height,
+    right: import.meta.env.VITE_THEME_FOOTER_RIGHT
+      ? import.meta.env.VITE_THEME_FOOTER_RIGHT === 'true'
+      : themeSettings.footer.right
+  }
+};
+
+/** .env variables */
+// VITE_THEME_SCHEME=dark
+// VITE_THEME_GRAYSCALE=true
+// VITE_THEME_RECOMMEND_COLOR=true
+// VITE_THEME_COLOR=#409EFF
+// VITE_THEME_COLOR_INFO=#2080f0
+// VITE_THEME_COLOR_SUCCESS=#52c41a
+// VITE_THEME_COLOR_WARNING=#faad14
+// VITE_THEME_COLOR_ERROR=#f5222d
+// VITE_THEME_INFO_FOLLOW_PRIMARY=true
+// VITE_THEME_LAYOUT_MODE=vertical
+// VITE_THEME_SCROLL_MODE=content
+// VITE_THEME_PAGE_ANIMATE=true
+// VITE_THEME_PAGE_ANIMATE_MODE=fade-slide
+// VITE_THEME_HEADER_HEIGHT=60
+// VITE_THEME_BREADCRUMB_VISIBLE=true
+// VITE_THEME_BREADCRUMB_SHOW_ICON=true
+// VITE_THEME_TAB_VISIBLE=false
+// VITE_THEME_TAB_CACHE=true
+// VITE_THEME_TAB_HEIGHT=44
+// VITE_THEME_TAB_MODE=chrome
+// VITE_THEME_FIXED_HEADER_AND_TAB=true
+// VITE_THEME_SIDER_INVERTED=false
+// VITE_THEME_SIDER_WIDTH=220
+// VITE_THEME_SIDER_COLLAPSED_WIDTH=64
+// VITE_THEME_SIDER_MIX_WIDTH=90
+// VITE_THEME_SIDER_MIX_COLLAPSED_WIDTH=64
+// VITE_THEME_SIDER_MIX_CHILD_MENU_WIDTH=200
+// VITE_THEME_FOOTER_VISIBLE=true
+// VITE_THEME_FOOTER_FIXED=false
+// VITE_THEME_FOOTER_HEIGHT=48
+// VITE_THEME_FOOTER_RIGHT=true