chore: optimize color

.gitignore

@@ -19,4 +19,4 @@ yarn-error.log
 .history
 .stylelintcache
 yarn.lock
-package-lock.lock
+package-lock.json

src/config/color.ts

@@ -189,12 +189,14 @@ export const LIGHT_CHART_COLORS: ColorToken = {
   textColor: 'rgba(0, 0, 0, 0.9)',
   placeholderColor: 'rgba(0, 0, 0, 0.35)',
   borderColor: '#dcdcdc',
+  containerColor: '#fff',
 };
 
 export const DARK_CHART_COLORS: ColorToken = {
   textColor: 'rgba(255, 255, 255, 0.9)',
   placeholderColor: 'rgba(255, 255, 255, 0.35)',
   borderColor: '#5e5e5e',
+  containerColor: '#242424',
 };
 
 function toUnderline(name: string): string {

src/layouts/setting.vue

@@ -116,7 +116,7 @@ import SettingLightIcon from '@/assets/assets-setting-light.svg';
 import SettingAutoIcon from '@/assets/assets-setting-auto.svg';
 
 const LAYOUT_OPTION = ['side', 'top', 'mix'];
-const COLOR_OPTIONS = ['default', 'purple', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'dynamic'];
+const COLOR_OPTIONS = ['default', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'dynamic'];
 const MODE_OPTIONS = [
   { type: 'light', text: '明亮' },
   { type: 'dark', text: '暗黑' },

src/store/modules/setting.ts

@@ -87,6 +87,7 @@ const actions = {
     if (theme !== state.mode) {
       document.documentElement.setAttribute('theme-mode', isDarkMode ? 'dark' : '');
     }
+
     commit('changeChartColor', isDarkMode ? DARK_CHART_COLORS : LIGHT_CHART_COLORS);
   },
   changeBrandTheme({ state }: { state: IStateType }, payload: IStateType) {

src/style/theme/green.less

@@ -1,15 +1,14 @@
 :root[theme-color='green'] {
-  --td-brand-color: #00a870;
+  --td-brand-color-1: #e8f8f2;
-  --td-brand-color-1: #8dffd9;
+  --td-brand-color-2: #bcebdc;
-  --td-brand-color-2: #00f2a2;
+  --td-brand-color-3: #85dbbe;
-  --td-brand-color-3: #00dc92;
+  --td-brand-color-4: #48c79c;
-  --td-brand-color-4: #00c583;
   --td-brand-color-5: #00a870;
-  --td-brand-color-6: #009a5d;
+  --td-brand-color-6: #078d5c;
-  --td-brand-color-7: #00c583;
+  --td-brand-color-7: #067945;
   --td-brand-color-8: #00a870;
-  --td-brand-color-9: #009a5d;
+  --td-brand-color-9: #044f2a;
-  --td-brand-color-10: #004a14;
+  --td-brand-color-10: #033017;
 }
 
 :root[theme-color='green'][theme-mode='dark'] {

src/style/theme/orange.less

@@ -15,13 +15,13 @@
 
 :root[theme-color='orange'][theme-mode='dark'] {
   --td-brand-color: #ed7b2f;
-  --td-brand-color-1: #7f0a02;
+  --td-brand-color-1: #692204;
-  --td-brand-color-2: #9b1804;
+  --td-brand-color-2: #873105;
-  --td-brand-color-3: #b62a07;
+  --td-brand-color-3: #a24006;
-  --td-brand-color-4: #d03e0b;
+  --td-brand-color-4: #c25110;
-  --td-brand-color-5: #e75510;
+  --td-brand-color-5: #d66724;
-  --td-brand-color-6: #ed7b2f;
+  --td-brand-color-6: #ed8139;
-  --td-brand-color-7: #d03e0b;
+  --td-brand-color-7: #ff9852;
   --td-brand-color-8: #ed7b2f;
   --td-brand-color-9: #ed7b2f;
   --td-brand-color-10: #fce5d7;

src/style/theme/pink.less

@@ -13,15 +13,15 @@
 }
 
 :root[theme-color='pink'][theme-mode='dark'] {
-  --td-brand-color: #f172c5;
+  --td-brand-color: #ff70cf;
-  --td-brand-color-1: #8f025e;
+  --td-brand-color-1: #5b374f;
-  --td-brand-color-2: #ac0572;
+  --td-brand-color-2: #9b066d;
-  --td-brand-color-3: #ca0987;
+  --td-brand-color-3: #bc088a;
-  --td-brand-color-4: #e80f9d;
+  --td-brand-color-4: #d435a0;
-  --td-brand-color-5: #ed49b4;
+  --td-brand-color-5: #ed53b7;
-  --td-brand-color-6: #f172c5;
+  --td-brand-color-6: #ff70cf;
-  --td-brand-color-7: #ed49b4;
+  --td-brand-color-7: #ff99e4;
-  --td-brand-color-8: #f172c5;
+  --td-brand-color-8: #ff70cf;
-  --td-brand-color-9: #f491d2;
+  --td-brand-color-9: #ffdbfd;
-  --td-brand-color-10: #fce5f4;
+  --td-brand-color-10: #fff2ff;
 }

src/style/theme/red.less

@@ -13,15 +13,15 @@
 }
 
 :root[theme-color='red'][theme-mode='dark'] {
-  --td-brand-color: #ea7b84;
+  --td-brand-color: #fb6e77;
-  --td-brand-color-1: #8d0309;
+  --td-brand-color-1: #4f3335;
-  --td-brand-color-2: #ac0911;
+  --td-brand-color-2: #960627;
-  --td-brand-color-3: #cc111c;
+  --td-brand-color-3: #b01c37;
-  --td-brand-color-4: #e42c3a;
+  --td-brand-color-4: #c9384a;
-  --td-brand-color-5: #e34d59;
+  --td-brand-color-5: #e35661;
-  --td-brand-color-6: #ea7b84;
+  --td-brand-color-6: #fb6e77;
-  --td-brand-color-7: #e34d59;
+  --td-brand-color-7: #ff9195;
-  --td-brand-color-8: #ea7b84;
+  --td-brand-color-8: #fb6e77;
-  --td-brand-color-9: #ef989f;
+  --td-brand-color-9: #ffd6d8;
-  --td-brand-color-10: #fbe5e7;
+  --td-brand-color-10: #fff2f2;
 }