chore: optimize color

This commit is contained in:
Uyarn 2021-12-23 01:46:02 +08:00 committed by uyarnchen
parent f8aef31369
commit a1fad315e2
9 changed files with 42 additions and 17401 deletions

2
.gitignore vendored
View File

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

17361
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -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 {

View File

@ -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: '暗黑' },

View File

@ -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) {

View File

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

View File

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

View File

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

View File

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