xinyin025/soybean-admin
1
0
Fork 0
mirror of https://github.com/soybeanjs/soybean-admin.git synced 2025-09-29 14:46:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
woeoio 2024-10-30 14:08:35 +08:00
parent 9ad5d7170a
commit 1f00dfbc7f
3 changed files with 147 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -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

3
src/store/modules/theme/shared.ts
View File

@ -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;

141
src/theme/settings.ts
View File

@ -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