refactor(projects): refactor @sa/color-palette => @sa/color & perf @sa/utils

CHANGELOG.md

@@ -30,7 +30,7 @@
 
 ###    💅 Refactors
 
-- **hooks**: refactor @sa/color-palette &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color &nbsp;-&nbsp; by @honghuangdc [<samp>(93191)</samp>](https://github.com/soybeanjs/soybean-admin/commit/9319173)
 
 ### &nbsp;&nbsp;&nbsp;📖 Documentation
 

package.json

@@ -46,7 +46,7 @@
     "@better-scroll/core": "2.5.1",
     "@iconify/vue": "4.1.2",
     "@sa/axios": "workspace:*",
-    "@sa/color-palette": "workspace:*",
+    "@sa/color": "workspace:*",
     "@sa/hooks": "workspace:*",
     "@sa/materials": "workspace:*",
     "@sa/utils": "workspace:*",

packages/color-palette/src/index.ts

@@ -1,6 +0,0 @@
-import { colorPalettes } from './constant';
-import { getColorName, getHex, getHsl, getRgb } from './shared';
-
-export * from './palette';
-export { getColorName, getHex, getHsl, getRgb, colorPalettes };
-export * from './types';

packages/color-palette/src/shared/colord.ts

@@ -1,29 +0,0 @@
-import { colord, extend } from 'colord';
-import type { HslColor } from 'colord';
-import labPlugin from 'colord/plugins/lab';
-
-extend([labPlugin]);
-
-export function isValidColor(color: string) {
-  return colord(color).isValid();
-}
-
-export function getHex(color: string) {
-  return colord(color).toHex();
-}
-
-export function getRgb(color: string) {
-  return colord(color).toRgb();
-}
-
-export function getHsl(color: string) {
-  return colord(color).toHsl();
-}
-
-export function getDeltaE(color1: string, color2: string) {
-  return colord(color1).delta(color2);
-}
-
-export function transformHslToHex(color: HslColor) {
-  return colord(color).toHex();
-}

packages/color/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@sa/color-palette",
+  "name": "@sa/color",
   "version": "1.0.5",
   "exports": {
     ".": "./src/index.ts"
@@ -10,6 +10,7 @@
     }
   },
   "dependencies": {
+    "@sa/utils": "workspace:*",
     "colord": "2.9.3"
   }
 }

packages/color/src/index.ts

@@ -0,0 +1,7 @@
+import { colorPalettes } from './constant';
+
+export * from './palette';
+export * from './shared';
+export { colorPalettes };
+
+export * from './types';

packages/color/src/palette/antd.ts

@@ -1,74 +1,6 @@
-import { colord, extend } from 'colord';
-import namesPlugin from 'colord/plugins/names';
-import mixPlugin from 'colord/plugins/mix';
-import type { AnyColor, HsvColor, RgbColor } from 'colord';
-
-extend([namesPlugin, mixPlugin]);
-
-/**
- * Add color alpha
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- */
-export function addColorAlpha(color: string, alpha: number) {
-  return colord(color).alpha(alpha).toHex();
-}
-
-/**
- * Mix color
- *
- * @param firstColor - First color
- * @param secondColor - Second color
- * @param ratio - The ratio of the second color (0 - 1)
- */
-export function mixColor(firstColor: string, secondColor: string, ratio: number) {
-  return colord(firstColor).mix(secondColor, ratio).toHex();
-}
-
-/**
- * Transform color with opacity to similar color without opacity
- *
- * @param color - Color
- * @param alpha - Alpha (0 - 1)
- * @param bgColor Background color (usually white or black)
- */
-export function transformColorWithOpacity(color: string, alpha: number, bgColor = '#ffffff') {
-  const originColor = addColorAlpha(color, alpha);
-  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
-
-  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
-
-  function calRgb(or: number, bg: number, al: number) {
-    return bg + (or - bg) * al;
-  }
-
-  const resultRgb: RgbColor = {
-    r: calRgb(oR, bgR, alpha),
-    g: calRgb(oG, bgG, alpha),
-    b: calRgb(oB, bgB, alpha)
-  };
-
-  return colord(resultRgb).toHex();
-}
-
-/**
- * Is white color
- *
- * @param color - Color
- */
-export function isWhiteColor(color: string) {
-  return colord(color).isEqual('#ffffff');
-}
-
-/**
- * Get rgb of color
- *
- * @param color Color
- */
-export function getRgbOfColor(color: string) {
-  return colord(color).toRgb();
-}
+import type { AnyColor, HsvColor } from 'colord';
+import { getHex, getHsv, isValidColor, mixColor } from '../shared';
+import type { ColorIndex } from '../types';
 
 /** Hue step */
 const hueStep = 2;
@@ -86,32 +18,23 @@ const lightColorCount = 5;
 const darkColorCount = 4;
 
 /**
- * The color index of color palette
- *
- * From left to right, the color is from light to dark, 6 is main color
- */
-type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-
-/**
- * Get color palette (from left to right, the color is from light to dark, 6 is main color)
+ * Get AntD palette color by index
  *
  * @param color - Color
  * @param index - The color index of color palette (the main color index is 6)
  * @returns Hex color
  */
-export function getColorPalette(color: AnyColor, index: ColorIndex): string {
-  const transformColor = colord(color);
-
-  if (!transformColor.isValid()) {
+export function getAntDPaletteColorByIndex(color: AnyColor, index: ColorIndex): string {
+  if (!isValidColor(color)) {
     throw new Error('invalid input color value');
   }
 
   if (index === 6) {
-    return colord(transformColor).toHex();
+    return getHex(color);
   }
 
   const isLight = index < 6;
-  const hsv = transformColor.toHsv();
+  const hsv = getHsv(color);
   const i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
 
   const newHsv: HsvColor = {
@@ -120,7 +43,7 @@ export function getColorPalette(color: AnyColor, index: ColorIndex): string {
     v: getValue(hsv, i, isLight)
   };
 
-  return colord(newHsv).toHex();
+  return getHex(newHsv);
 }
 
 /** Map of dark color index and opacity */
@@ -131,32 +54,33 @@ const darkColorMap = [
   { index: 5, opacity: 0.45 },
   { index: 5, opacity: 0.65 },
   { index: 5, opacity: 0.85 },
-  { index: 4, opacity: 0.9 },
+  { index: 5, opacity: 0.9 },
+  { index: 4, opacity: 0.93 },
   { index: 3, opacity: 0.95 },
   { index: 2, opacity: 0.97 },
   { index: 1, opacity: 0.98 }
 ];
 
 /**
- * Get color palettes
+ * Get AntD color palette
  *
  * @param color - Color
  * @param darkTheme - Dark theme
  * @param darkThemeMixColor - Dark theme mix color (default: #141414)
  */
-export function getColorPalettes(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
-  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+export function getAntDColorPalette(color: AnyColor, darkTheme = false, darkThemeMixColor = '#141414'): string[] {
+  const indexes: ColorIndex[] = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
 
-  const patterns = indexes.map(index => getColorPalette(color, index));
+  const patterns = indexes.map(index => getAntDPaletteColorByIndex(color, index));
 
   if (darkTheme) {
     const darkPatterns = darkColorMap.map(({ index, opacity }) => {
-      const darkColor = colord(darkThemeMixColor).mix(patterns[index], opacity);
+      const darkColor = mixColor(darkThemeMixColor, patterns[index], opacity);
 
       return darkColor;
     });
 
-    return darkPatterns.map(item => colord(item).toHex());
+    return darkPatterns.map(item => getHex(item));
   }
 
   return patterns;

packages/color/src/palette/index.ts

@@ -0,0 +1,45 @@
+import type { AnyColor } from 'colord';
+import { getHex } from '../shared';
+import type { ColorPaletteNumber } from '../types';
+import { getRecommendedColorPalette } from './recommend';
+import { getAntDColorPalette } from './antd';
+
+/**
+ * get color palette by provided color
+ *
+ * @param color
+ * @param recommended whether to get recommended color palette (the provided color may not be the main color)
+ */
+export function getColorPalette(color: AnyColor, recommended = false) {
+  const colorMap = new Map<ColorPaletteNumber, string>();
+
+  if (recommended) {
+    const colorPalette = getRecommendedColorPalette(getHex(color));
+    colorPalette.palettes.forEach(palette => {
+      colorMap.set(palette.number, palette.hex);
+    });
+  } else {
+    const colors = getAntDColorPalette(color);
+
+    const colorNumbers: ColorPaletteNumber[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+    colorNumbers.forEach((number, index) => {
+      colorMap.set(number, colors[index]);
+    });
+  }
+
+  return colorMap;
+}
+
+/**
+ * get color palette color by number
+ *
+ * @param color the provided color
+ * @param number the color palette number
+ * @param recommended whether to get recommended color palette (the provided color may not be the main color)
+ */
+export function getPaletteColorByNumber(color: AnyColor, number: ColorPaletteNumber, recommended = false) {
+  const colorMap = getColorPalette(color, recommended);
+
+  return colorMap.get(number as ColorPaletteNumber)!;
+}

packages/color/src/palette/recommend.ts

@@ -9,12 +9,12 @@ import type {
 } from '../types';
 
 /**
- * get color palette by provided color and color name
+ * get recommended color palette by provided color
  *
  * @param color the provided color
  */
-export function getColorPalette(color: string) {
-  const colorPaletteFamily = getColorPaletteFamily(color);
+export function getRecommendedColorPalette(color: string) {
+  const colorPaletteFamily = getRecommendedColorPaletteFamily(color);
 
   const colorMap = new Map<ColorPaletteNumber, ColorPalette>();
 
@@ -36,13 +36,13 @@ export function getColorPalette(color: string) {
 }
 
 /**
- * get color by number
+ * get recommended palette color by provided color
  *
  * @param color the provided color
  * @param number the color palette number
  */
-export function getColorByPaletteNumber(color: string, number: ColorPaletteNumber) {
-  const colorPalette = getColorPalette(color);
+export function getRecommendedPaletteColorByNumber(color: string, number: ColorPaletteNumber) {
+  const colorPalette = getRecommendedColorPalette(color);
 
   const { hex } = colorPalette.colorMap.get(number)!;
 
@@ -54,7 +54,7 @@ export function getColorByPaletteNumber(color: string, number: ColorPaletteNumbe
  *
  * @param color the provided color
  */
-export function getColorPaletteFamily(color: string) {
+export function getRecommendedColorPaletteFamily(color: string) {
   if (!isValidColor(color)) {
     throw new Error('Invalid color, please check color value!');
   }

packages/color/src/shared/colord.ts

@@ -0,0 +1,93 @@
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
+import mixPlugin from 'colord/plugins/mix';
+import labPlugin from 'colord/plugins/lab';
+import type { AnyColor, HslColor, RgbColor } from 'colord';
+
+extend([namesPlugin, mixPlugin, labPlugin]);
+
+export function isValidColor(color: AnyColor) {
+  return colord(color).isValid();
+}
+
+export function getHex(color: AnyColor) {
+  return colord(color).toHex();
+}
+
+export function getRgb(color: AnyColor) {
+  return colord(color).toRgb();
+}
+
+export function getHsl(color: AnyColor) {
+  return colord(color).toHsl();
+}
+
+export function getHsv(color: AnyColor) {
+  return colord(color).toHsv();
+}
+
+export function getDeltaE(color1: AnyColor, color2: AnyColor) {
+  return colord(color1).delta(color2);
+}
+
+export function transformHslToHex(color: HslColor) {
+  return colord(color).toHex();
+}
+
+/**
+ * Add color alpha
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ */
+export function addColorAlpha(color: AnyColor, alpha: number) {
+  return colord(color).alpha(alpha).toHex();
+}
+
+/**
+ * Mix color
+ *
+ * @param firstColor - First color
+ * @param secondColor - Second color
+ * @param ratio - The ratio of the second color (0 - 1)
+ */
+export function mixColor(firstColor: AnyColor, secondColor: AnyColor, ratio: number) {
+  return colord(firstColor).mix(secondColor, ratio).toHex();
+}
+
+/**
+ * Transform color with opacity to similar color without opacity
+ *
+ * @param color - Color
+ * @param alpha - Alpha (0 - 1)
+ * @param bgColor Background color (usually white or black)
+ */
+export function transformColorWithOpacity(color: AnyColor, alpha: number, bgColor = '#ffffff') {
+  const originColor = addColorAlpha(color, alpha);
+  const { r: oR, g: oG, b: oB } = colord(originColor).toRgb();
+
+  const { r: bgR, g: bgG, b: bgB } = colord(bgColor).toRgb();
+
+  function calRgb(or: number, bg: number, al: number) {
+    return bg + (or - bg) * al;
+  }
+
+  const resultRgb: RgbColor = {
+    r: calRgb(oR, bgR, alpha),
+    g: calRgb(oG, bgG, alpha),
+    b: calRgb(oB, bgB, alpha)
+  };
+
+  return colord(resultRgb).toHex();
+}
+
+/**
+ * Is white color
+ *
+ * @param color - Color
+ */
+export function isWhiteColor(color: AnyColor) {
+  return colord(color).isEqual('#ffffff');
+}
+
+export { colord };

packages/color/src/types/index.ts

@@ -1,4 +1,8 @@
-/** the color palette number */
+/**
+ * the color palette number
+ *
+ * the main color number is 500
+ */
 export type ColorPaletteNumber = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;
 
 /** the color palette */
@@ -45,3 +49,10 @@ export type ColorPaletteMatch = ColorPaletteFamily & {
   /** the match color of the palette */
   match: ColorPalette;
 };
+
+/**
+ * The color index of color palette
+ *
+ * From left to right, the color is from light to dark, 6 is main color
+ */
+export type ColorIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;

packages/color/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

packages/materials/src/libs/page-tab/shared.ts

@@ -1,4 +1,4 @@
-import { addColorAlpha, transformColorWithOpacity } from '@sa/utils';
+import { addColorAlpha, transformColorWithOpacity } from '@sa/color';
 import type { PageTabCssVars, PageTabCssVarsProps } from '../../types';
 
 /** The active color of the tab */

packages/utils/src/index.ts

@@ -1,4 +1,3 @@
-export * from './color';
 export * from './crypto';
 export * from './storage';
 export * from './nanoid';

packages/utils/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "lib": ["DOM", "ESNext"],
+    "baseUrl": ".",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "types": ["node"],
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist"]
+}

pnpm-lock.yaml

@@ -17,9 +17,9 @@ importers:
       '@sa/axios':
         specifier: workspace:*
         version: link:packages/axios
-      '@sa/color-palette':
+      '@sa/color':
         specifier: workspace:*
-        version: link:packages/color-palette
+        version: link:packages/color
       '@sa/hooks':
         specifier: workspace:*
         version: link:packages/hooks
@@ -179,8 +179,11 @@ importers:
         specifier: 6.9.15
         version: 6.9.15
 
-  packages/color-palette:
+  packages/color:
     dependencies:
+      '@sa/utils':
+        specifier: workspace:*
+        version: link:../utils
       colord:
         specifier: 2.9.3
         version: 2.9.3

src/components/custom/wave-bg.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { computed } from 'vue';
-import { getColorPalette } from '@sa/utils';
+import { getPaletteColorByNumber } from '@sa/color';
 
 defineOptions({ name: 'WaveBg' });
 
@@ -11,8 +11,8 @@ interface Props {
 
 const props = defineProps<Props>();
 
-const lightColor = computed(() => getColorPalette(props.themeColor, 3));
-const darkColor = computed(() => getColorPalette(props.themeColor, 6));
+const lightColor = computed(() => getPaletteColorByNumber(props.themeColor, 200));
+const darkColor = computed(() => getPaletteColorByNumber(props.themeColor, 500));
 </script>
 
 <template>

src/layouts/modules/global-menu/first-level-menu.vue

@@ -2,7 +2,7 @@
 import { computed } from 'vue';
 import { createReusableTemplate } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
-import { transformColorWithOpacity } from '@sa/utils';
+import { transformColorWithOpacity } from '@sa/color';
 import { useAppStore } from '@/store/modules/app';
 import { useRouteStore } from '@/store/modules/route';
 import { useThemeStore } from '@/store/modules/theme';

src/locales/langs/en-us.ts

@@ -65,6 +65,7 @@ const local: App.I18n.Schema = {
       'vertical-mix': 'Vertical Mix Menu Mode',
       'horizontal-mix': 'Horizontal Mix menu Mode'
     },
+    recommendColor: 'Apply Recommended Algorithm Color',
     themeColor: {
       title: 'Theme Color',
       primary: 'Primary',

src/locales/langs/zh-cn.ts

@@ -65,6 +65,7 @@ const local: App.I18n.Schema = {
       horizontal: '顶部菜单模式',
       'horizontal-mix': '顶部菜单混合模式'
     },
+    recommendColor: '应用推荐算法的颜色',
     themeColor: {
       title: '主题颜色',
       primary: '主色',

src/plugins/loading.ts

@@ -1,5 +1,5 @@
 // @unocss-include
-import { getRgbOfColor } from '@sa/utils';
+import { getRgb } from '@sa/color';
 import { $t } from '@/locales';
 import { localStg } from '@/utils/storage';
 import systemLogo from '@/assets/svg-icon/logo.svg?raw';
@@ -7,7 +7,7 @@ import systemLogo from '@/assets/svg-icon/logo.svg?raw';
 export function setupLoading() {
   const themeColor = localStg.get('themeColor') || '#646cff';
 
-  const { r, g, b } = getRgbOfColor(themeColor);
+  const { r, g, b } = getRgb(themeColor);
 
   const primaryColor = `--primary-color: ${r} ${g} ${b}`;
 

src/store/modules/theme/index.ts

@@ -2,7 +2,7 @@ import { computed, effectScope, onScopeDispose, ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import { defineStore } from 'pinia';
 import { useEventListener, usePreferredColorScheme } from '@vueuse/core';
-import { getColorPalette } from '@sa/color-palette';
+import { getPaletteColorByNumber } from '@sa/color';
 import { SetupStoreId } from '@/enum';
 import { localStg } from '@/utils/storage';
 import {
@@ -99,13 +99,18 @@ export const useThemeStore = defineStore(SetupStoreId.Theme, () => {
    * @param color Theme color
    */
   function updateThemeColors(key: App.Theme.ThemeColorKey, color: string) {
+    let colorValue = color;
+
+    if (settings.value.recommendColor) {
       // get a color palette by provided color and color name, and use the suitable color
-    const { main } = getColorPalette(color);
+
+      colorValue = getPaletteColorByNumber(color, 500, true);
+    }
 
     if (key === 'primary') {
-      settings.value.themeColor = main.hex;
+      settings.value.themeColor = colorValue;
     } else {
-      settings.value.otherColor[key] = main.hex;
+      settings.value.otherColor[key] = colorValue;
     }
   }
 

src/store/modules/theme/shared.ts

@@ -1,6 +1,5 @@
 import type { GlobalThemeOverrides } from 'naive-ui';
-import { getColorByPaletteNumber, getColorPalette } from '@sa/color-palette';
-import { addColorAlpha, getRgbOfColor } from '@sa/utils';
+import { addColorAlpha, getColorPalette, getPaletteColorByNumber, getRgb } from '@sa/color';
 import { overrideThemeSettings, themeSettings } from '@/theme/settings';
 import { themeVars } from '@/theme/vars';
 import { toggleHtmlClass } from '@/utils/common';
@@ -77,17 +76,17 @@ export function createThemeToken(colors: App.Theme.ThemeColor) {
  *
  * @param colors Theme colors
  */
-function createThemePaletteColors(colors: App.Theme.ThemeColor) {
+function createThemePaletteColors(colors: App.Theme.ThemeColor, recommended = false) {
   const colorKeys = Object.keys(colors) as App.Theme.ThemeColorKey[];
   const colorPaletteVar = {} as App.Theme.ThemePaletteColor;
 
   colorKeys.forEach(key => {
-    const { palettes, main } = getColorPalette(colors[key]);
+    const colorMap = getColorPalette(colors[key], recommended);
 
-    colorPaletteVar[key] = main.hex;
+    colorPaletteVar[key] = colorMap.get(500)!;
 
-    palettes.forEach(item => {
-      colorPaletteVar[`${key}-${item.number}`] = item.hex;
+    colorMap.forEach((hex, number) => {
+      colorPaletteVar[`${key}-${number}`] = hex;
     });
   });
 
@@ -117,7 +116,7 @@ function getCssVarByTokens(tokens: App.Theme.BaseToken) {
 
       if (key === 'colors') {
         cssVarsKey = removeRgbPrefix(cssVarsKey);
-        const { r, g, b } = getRgbOfColor(cssValue);
+        const { r, g, b } = getRgb(cssValue);
         cssValue = `${r} ${g} ${b}`;
       }
 
@@ -207,12 +206,12 @@ interface NaiveColorAction {
  *
  * @param colors Theme colors
  */
-function getNaiveThemeColors(colors: App.Theme.ThemeColor) {
+function getNaiveThemeColors(colors: App.Theme.ThemeColor, recommended = false) {
   const colorActions: NaiveColorAction[] = [
     { scene: '', handler: color => color },
     { scene: 'Suppl', handler: color => color },
-    { scene: 'Hover', handler: color => getColorByPaletteNumber(color, 500) },
-    { scene: 'Pressed', handler: color => getColorByPaletteNumber(color, 700) },
+    { scene: 'Hover', handler: color => getPaletteColorByNumber(color, 500, recommended) },
+    { scene: 'Pressed', handler: color => getPaletteColorByNumber(color, 700, recommended) },
     { scene: 'Active', handler: color => addColorAlpha(color, 0.1) }
   ];
 

src/theme/settings.ts

@@ -2,6 +2,7 @@
 export const themeSettings: App.Theme.ThemeSetting = {
   themeScheme: 'light',
   grayscale: false,
+  recommendColor: false,
   themeColor: '#646cff',
   otherColor: {
     info: '#2080f0',

src/typings/app.d.ts

@@ -2,7 +2,7 @@
 declare namespace App {
   /** Theme namespace */
   namespace Theme {
-    type ColorPaletteNumber = import('@sa/color-palette').ColorPaletteNumber;
+    type ColorPaletteNumber = import('@sa/color').ColorPaletteNumber;
 
     /** Theme token */
     type ThemeToken = {
@@ -18,10 +18,12 @@ declare namespace App {
     interface ThemeSetting {
       /** Theme scheme */
       themeScheme: UnionKey.ThemeScheme;
-      /** Theme color */
-      themeColor: string;
       /** grayscale mode */
       grayscale: boolean;
+      /** Whether to recommend color */
+      recommendColor: boolean;
+      /** Theme color */
+      themeColor: string;
       /** Other color */
       otherColor: OtherColor;
       /** Whether info color is followed by the primary color */
@@ -302,6 +304,7 @@ declare namespace App {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;
         grayscale: string;
         layoutMode: { title: string } & Record<UnionKey.ThemeLayoutMode, string>;
+        recommendColor: string;
         themeColor: {
           title: string;
           followPrimary: string;

src/views/_builtin/login/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import type { Component } from 'vue';
-import { getColorPalette, mixColor } from '@sa/utils';
+import { getPaletteColorByNumber, mixColor } from '@sa/color';
 import { $t } from '@/locales';
 import { useAppStore } from '@/store/modules/app';
 import { useThemeStore } from '@/store/modules/theme';
@@ -38,7 +38,7 @@ const moduleMap: Record<UnionKey.LoginModule, LoginModule> = {
 const activeModule = computed(() => moduleMap[props.module || 'pwd-login']);
 
 const bgThemeColor = computed(() =>
-  themeStore.darkMode ? getColorPalette(themeStore.themeColor, 7) : themeStore.themeColor
+  themeStore.darkMode ? getPaletteColorByNumber(themeStore.themeColor, 600) : themeStore.themeColor
 );
 
 const bgColor = computed(() => {