diff --git a/src/assets/assets-setting-auto.svg b/src/assets/assets-setting-auto.svg index 1aca31c..66f57de 100644 --- a/src/assets/assets-setting-auto.svg +++ b/src/assets/assets-setting-auto.svg @@ -1,5 +1,5 @@ - + diff --git a/src/assets/assets-setting-light.svg b/src/assets/assets-setting-light.svg index 5ddb219..ffa8f34 100644 --- a/src/assets/assets-setting-light.svg +++ b/src/assets/assets-setting-light.svg @@ -1,13 +1,13 @@ - - - - - - - - - - + + + + + + + + + + \ No newline at end of file diff --git a/src/config/color.ts b/src/config/color.ts index d6dfab9..19dd0f0 100644 --- a/src/config/color.ts +++ b/src/config/color.ts @@ -3,6 +3,27 @@ import hexToHsl from 'hex-to-hsl'; export type ColorToken = Record; export type ColorSeries = Record; +export const defaultLightColor = [ + '#0052d9', + '#0594fa', + '#00a870', + '#ebb105', + '#ed7b2f', + '#e34d59', + '#ed49b4', + '#834ec2', +]; +export const defaultDarkColor = [ + '#4582e6', + '#29a4fb', + '#03a56f', + '#ca8d03', + '#ed7b2f', + '#ea7b84', + '#f172c5', + '#ab87d5', +]; + export const BACKGROUND_TOKEN: ColorSeries = { BLUE_GREY: { '@gray-color-1': '#F1F2F5', diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts index 004b1f4..edbd4b2 100644 --- a/src/pages/dashboard/base/index.ts +++ b/src/pages/dashboard/base/index.ts @@ -1,7 +1,7 @@ import dayjs from 'dayjs'; import * as echarts from 'echarts/core'; import { Color } from 'tvision-color'; -import { getBrandColor, generateColorMap } from '@/config/color'; +import { getBrandColor, defaultLightColor, defaultDarkColor } from '@/config/color'; import store from '@/store'; const { state } = store; @@ -16,31 +16,25 @@ const { state } = store; export function getColorFromTheme(theme: string) { const { setting } = state as any; const { colorList, mode } = setting; - let themeColor = getBrandColor(theme, colorList); + const isDarkMode = mode === 'dark'; + let themeColorList = []; + const themeColor = getBrandColor(theme, colorList); - if (theme === 'dynamic' || (!/^#[A-F\d]{6}$/i.test(theme) && mode === 'dark')) { - theme = themeColor?.['@brand-color-1'] || '#0052D9'; + if (!/^#[A-F\d]{6}$/i.test(theme)) { + theme = themeColor?.['@brand-color'] || '#0052D9'; + const themIdx = defaultLightColor.indexOf(theme.toLocaleLowerCase()); + const defaultGradients = !isDarkMode ? defaultLightColor : defaultDarkColor; - const newPalette = Color.getPaletteByGradation({ - colors: [theme], - step: 10, - })[0]; - - themeColor = generateColorMap(theme, newPalette, mode); + const spliceThemeList = defaultGradients.slice(0, themIdx); + themeColorList = defaultGradients.slice(themIdx, defaultGradients.length).concat(spliceThemeList); + } else { + theme = themeColor?.['@brand-color']; + themeColorList = Color.getRandomPalette({ + color: theme, + colorGamut: 'bright', + number: 8, + }); } - // theme = themeColor?.['@brand-color']; - const themeColorList: Array = []; - - // eslint-disable-next-line no-restricted-syntax - for (const key in themeColor) { - if (Object.prototype.hasOwnProperty.call(themeColor, key)) { - const elementColor: string = themeColor[key]; - - themeColorList.push(elementColor); - } - } - // console.log(themeColorList, 'themeColorList'); - // console.log(theme, 'theme'); return themeColorList; }