jiangyc/ruoyi-plus-soybean
1
0
Fork 0
mirror of https://github.com/m-xlsea/ruoyi-plus-soybean.git synced 2025-09-24 07:49:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(projects): add recommend color switch. closed #388

Browse Source
This commit is contained in:
Soybean
2024-04-26 02:18:36 +08:00
parent 34999971fd
commit a1920fcad9
6 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/store/modules/theme/index.ts
View File

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

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

@ -33,9 +33,10 @@ export function initThemeSettings() {
* Create theme token
*
* @param colors Theme colors
* @param [recommended=false] Use recommended color. Default is `false`
*/
export function createThemeToken(colors: App.Theme.ThemeColor) {
const paletteColors = createThemePaletteColors(colors);
export function createThemeToken(colors: App.Theme.ThemeColor, recommended = false) {
const paletteColors = createThemePaletteColors(colors, recommended);
const themeTokens: App.Theme.ThemeToken = {
colors: {
@ -75,6 +76,7 @@ export function createThemeToken(colors: App.Theme.ThemeColor) {
* Create theme palette colors
*
* @param colors Theme colors
* @param [recommended=false] Use recommended color. Default is `false`
*/
function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
@ -205,6 +207,7 @@ interface NaiveColorAction {
* Get naive theme colors
*
* @param colors Theme colors
* @param [recommended=false] Use recommended color. Default is `false`
*/
function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
const colorActions: NaiveColorAction[] = [
@ -234,13 +237,14 @@ function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false)
* Get naive theme
*
* @param colors Theme colors
* @param [recommended=false] Use recommended color. Default is `false`
*/
export function getNaiveTheme(colors: App.Theme.ThemeColor) {
export function getNaiveTheme(colors: App.Theme.ThemeColor, recommended = false) {
const { primary: colorLoading } = colors;
const theme: GlobalThemeOverrides = {
common: {
...getNaiveThemeColors(colors),
...getNaiveThemeColors(colors, recommended),
borderRadius: '6px'
},
LoadingBar: {