diff --git a/CHANGELOG.md b/CHANGELOG.md
index ad41dfe06..0a7f0e9ad 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,7 +30,7 @@
### 💅 Refactors
-- **hooks**: refactor @sa/color-palette - by @honghuangdc [(93191)](https://github.com/soybeanjs/soybean-admin/commit/9319173)
+- **hooks**: refactor @sa/color - by @honghuangdc [(93191)](https://github.com/soybeanjs/soybean-admin/commit/9319173)
### 📖 Documentation
diff --git a/package.json b/package.json
index 1f554f3ba..39af44ec2 100644
--- a/package.json
+++ b/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:*",
diff --git a/packages/color-palette/src/index.ts b/packages/color-palette/src/index.ts
deleted file mode 100644
index 56fde01d1..000000000
--- a/packages/color-palette/src/index.ts
+++ /dev/null
@@ -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';
diff --git a/packages/color-palette/src/shared/colord.ts b/packages/color-palette/src/shared/colord.ts
deleted file mode 100644
index 797148dd5..000000000
--- a/packages/color-palette/src/shared/colord.ts
+++ /dev/null
@@ -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();
-}
diff --git a/packages/color-palette/package.json b/packages/color/package.json
similarity index 76%
rename from packages/color-palette/package.json
rename to packages/color/package.json
index f246d262a..9d9aaf30a 100644
--- a/packages/color-palette/package.json
+++ b/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"
}
}
diff --git a/packages/color-palette/src/constant/index.ts b/packages/color/src/constant/index.ts
similarity index 100%
rename from packages/color-palette/src/constant/index.ts
rename to packages/color/src/constant/index.ts
diff --git a/packages/color-palette/src/constant/name.ts b/packages/color/src/constant/name.ts
similarity index 100%
rename from packages/color-palette/src/constant/name.ts
rename to packages/color/src/constant/name.ts
diff --git a/packages/color-palette/src/constant/palette.ts b/packages/color/src/constant/palette.ts
similarity index 100%
rename from packages/color-palette/src/constant/palette.ts
rename to packages/color/src/constant/palette.ts
diff --git a/packages/color/src/index.ts b/packages/color/src/index.ts
new file mode 100644
index 000000000..42a4d5471
--- /dev/null
+++ b/packages/color/src/index.ts
@@ -0,0 +1,7 @@
+import { colorPalettes } from './constant';
+
+export * from './palette';
+export * from './shared';
+export { colorPalettes };
+
+export * from './types';
diff --git a/packages/utils/src/color.ts b/packages/color/src/palette/antd.ts
similarity index 53%
rename from packages/utils/src/color.ts
rename to packages/color/src/palette/antd.ts
index 88c359596..c3d5b4882 100644
--- a/packages/utils/src/color.ts
+++ b/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;
diff --git a/packages/color/src/palette/index.ts b/packages/color/src/palette/index.ts
new file mode 100644
index 000000000..ba3b85355
--- /dev/null
+++ b/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();
+
+ 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)!;
+}
diff --git a/packages/color-palette/src/palette/index.ts b/packages/color/src/palette/recommend.ts
similarity index 88%
rename from packages/color-palette/src/palette/index.ts
rename to packages/color/src/palette/recommend.ts
index 354bd51a7..904cae259 100644
--- a/packages/color-palette/src/palette/index.ts
+++ b/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();
@@ -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!');
}
diff --git a/packages/color/src/shared/colord.ts b/packages/color/src/shared/colord.ts
new file mode 100644
index 000000000..4c52330a4
--- /dev/null
+++ b/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 };
diff --git a/packages/color-palette/src/shared/index.ts b/packages/color/src/shared/index.ts
similarity index 100%
rename from packages/color-palette/src/shared/index.ts
rename to packages/color/src/shared/index.ts
diff --git a/packages/color-palette/src/shared/name.ts b/packages/color/src/shared/name.ts
similarity index 100%
rename from packages/color-palette/src/shared/name.ts
rename to packages/color/src/shared/name.ts
diff --git a/packages/color-palette/src/types/index.ts b/packages/color/src/types/index.ts
similarity index 82%
rename from packages/color-palette/src/types/index.ts
rename to packages/color/src/types/index.ts
index 46ceb4570..3a63bc860 100644
--- a/packages/color-palette/src/types/index.ts
+++ b/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;
diff --git a/packages/color/tsconfig.json b/packages/color/tsconfig.json
new file mode 100644
index 000000000..5823ed54e
--- /dev/null
+++ b/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"]
+}
diff --git a/packages/materials/src/libs/page-tab/shared.ts b/packages/materials/src/libs/page-tab/shared.ts
index c6ff0c395..db71f5d9c 100644
--- a/packages/materials/src/libs/page-tab/shared.ts
+++ b/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 */
diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts
index a12ed34e7..98c5d245a 100644
--- a/packages/utils/src/index.ts
+++ b/packages/utils/src/index.ts
@@ -1,4 +1,3 @@
-export * from './color';
export * from './crypto';
export * from './storage';
export * from './nanoid';
diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json
new file mode 100644
index 000000000..5823ed54e
--- /dev/null
+++ b/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"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 77474187c..d41ed623d 100644
--- a/pnpm-lock.yaml
+++ b/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
diff --git a/src/components/custom/wave-bg.vue b/src/components/custom/wave-bg.vue
index bd79fc279..1d63f2e69 100644
--- a/src/components/custom/wave-bg.vue
+++ b/src/components/custom/wave-bg.vue
@@ -1,6 +1,6 @@
diff --git a/src/layouts/modules/global-menu/first-level-menu.vue b/src/layouts/modules/global-menu/first-level-menu.vue
index a90ba8ba8..8a7981e9b 100644
--- a/src/layouts/modules/global-menu/first-level-menu.vue
+++ b/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';
diff --git a/src/locales/langs/en-us.ts b/src/locales/langs/en-us.ts
index 57a5255e3..e09fe7b3d 100644
--- a/src/locales/langs/en-us.ts
+++ b/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',
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 4bd288250..7536baf10 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -65,6 +65,7 @@ const local: App.I18n.Schema = {
horizontal: '顶部菜单模式',
'horizontal-mix': '顶部菜单混合模式'
},
+ recommendColor: '应用推荐算法的颜色',
themeColor: {
title: '主题颜色',
primary: '主色',
diff --git a/src/plugins/loading.ts b/src/plugins/loading.ts
index d61bc58ab..f5c79a24c 100644
--- a/src/plugins/loading.ts
+++ b/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}`;
diff --git a/src/store/modules/theme/index.ts b/src/store/modules/theme/index.ts
index f45a81d8c..bc30cc5a3 100644
--- a/src/store/modules/theme/index.ts
+++ 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) {
- // get a color palette by provided color and color name, and use the suitable color
- const { main } = getColorPalette(color);
+ let colorValue = color;
+
+ if (settings.value.recommendColor) {
+ // get a color palette by provided color and color name, and use the suitable 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;
}
}
diff --git a/src/store/modules/theme/shared.ts b/src/store/modules/theme/shared.ts
index 2c81af935..f975cc76b 100644
--- a/src/store/modules/theme/shared.ts
+++ b/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) }
];
diff --git a/src/theme/settings.ts b/src/theme/settings.ts
index 1a1088f3e..42e94fc3d 100644
--- a/src/theme/settings.ts
+++ b/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',
diff --git a/src/typings/app.d.ts b/src/typings/app.d.ts
index 49d054c76..75f815503 100644
--- a/src/typings/app.d.ts
+++ b/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;
grayscale: string;
layoutMode: { title: string } & Record;
+ recommendColor: string;
themeColor: {
title: string;
followPrimary: string;
diff --git a/src/views/_builtin/login/index.vue b/src/views/_builtin/login/index.vue
index 78911fe77..bf487d93c 100644
--- a/src/views/_builtin/login/index.vue
+++ b/src/views/_builtin/login/index.vue
@@ -1,7 +1,7 @@