ion/Melo
1
0
Fork 0
Code Issues Pull Requests Actions 11 Packages Projects Releases Wiki Activity

添加主题字体颜色设置

Browse Source
This commit is contained in:
lyswhut
2022-12-30 12:12:09 +08:00
parent a7c2857808
commit 6ff1d683a5
33 changed files with 628 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/theme/createThemes.js
+17 -2
View File
@@ -11,6 +11,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(77, 175, 124)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -33,6 +34,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(52, 152, 219)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -55,6 +57,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(77, 131, 175)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-600)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -77,6 +80,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(245, 171, 53)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -99,6 +103,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(214, 69, 65)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -121,6 +126,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(241, 130, 141)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -143,6 +149,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(155, 89, 182)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -165,6 +172,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(108, 122, 137)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -187,6 +195,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(51, 110, 123)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -209,6 +218,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(79, 98, 208)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'var(--color-primary-light-600-alpha-700)',
'--color-main-background': 'rgba(255, 255, 255, 1)',
'--color-nav-font': 'var(--color-primary)',
@@ -231,6 +241,7 @@ const defaultThemes = [
isDark: true,
config: {
primary: 'rgb(150, 150, 150)',
font: 'rgb(229, 229, 229)',
'--color-app-background': 'rgba(0, 0, 0, 0)',
'--color-main-background': 'rgba(19, 19, 19, 0.9)',
'--color-nav-font': 'var(--color-primary)',
@@ -253,6 +264,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(74, 55, 82)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0)',
'--color-main-background': 'rgba(255, 255, 255, 0.9)',
'--color-nav-font': 'var(--color-primary-light-600)',
@@ -276,6 +288,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(87, 144, 167)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@@ -298,6 +311,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgba(47, 47, 47, 1)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@@ -321,6 +335,7 @@ const defaultThemes = [
isDark: false,
config: {
primary: 'rgb(192, 57, 43)',
font: 'rgb(33, 33, 33)',
'--color-app-background': 'rgba(255, 255, 255, 0.15)',
'--color-main-background': 'rgba(255, 255, 255, 0.8)',
'--color-nav-font': 'var(--color-primary)',
@@ -339,12 +354,12 @@ const defaultThemes = [
},
]
const themes = defaultThemes.map(({ config: { primary, ...extInfo }, ...themeInfo }) => {
const themes = defaultThemes.map(({ config: { primary, font, ...extInfo }, ...themeInfo }) => {
return {
...themeInfo,
isCustom: false,
config: {
themeColors: createThemeColors(primary, themeInfo.isDark),
themeColors: createThemeColors(primary, font, themeInfo.isDark),
extInfo,
},
}
src/common/theme/index.json
+330 -15
View File
@@ -216,7 +216,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(77, 175, 124)"
"--color-theme": "rgb(77, 175, 124)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -451,7 +472,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(52, 152, 219)"
"--color-theme": "rgb(52, 152, 219)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -686,7 +728,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(77, 131, 175)"
"--color-theme": "rgb(77, 131, 175)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-600)",
@@ -921,7 +984,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(245, 171, 53)"
"--color-theme": "rgb(245, 171, 53)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1156,7 +1240,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(214, 69, 65)"
"--color-theme": "rgb(214, 69, 65)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1391,7 +1496,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(241, 130, 141)"
"--color-theme": "rgb(241, 130, 141)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1626,7 +1752,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(155, 89, 182)"
"--color-theme": "rgb(155, 89, 182)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -1861,7 +2008,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(108, 122, 137)"
"--color-theme": "rgb(108, 122, 137)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2096,7 +2264,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(51, 110, 123)"
"--color-theme": "rgb(51, 110, 123)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2331,7 +2520,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(79, 98, 208)"
"--color-theme": "rgb(79, 98, 208)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "var(--color-primary-light-600-alpha-700)",
@@ -2566,7 +2776,28 @@
"--color-primary-light-1000-alpha-700": "rgba(47, 47, 47, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(47, 47, 47, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(47, 47, 47, 0.10)",
"--color-theme": "rgb(59,59,59)"
"--color-theme": "rgb(59,59,59)",
"--color-1000": "rgb(229, 229, 229)",
"--color-950": "rgb(218,218,218)",
"--color-900": "rgb(207,207,207)",
"--color-850": "rgb(197,197,197)",
"--color-800": "rgb(187,187,187)",
"--color-750": "rgb(178,178,178)",
"--color-700": "rgb(169,169,169)",
"--color-650": "rgb(161,161,161)",
"--color-600": "rgb(153,153,153)",
"--color-550": "rgb(145,145,145)",
"--color-500": "rgb(138,138,138)",
"--color-450": "rgb(131,131,131)",
"--color-400": "rgb(124,124,124)",
"--color-350": "rgb(118,118,118)",
"--color-300": "rgb(112,112,112)",
"--color-250": "rgb(106,106,106)",
"--color-200": "rgb(101,101,101)",
"--color-150": "rgb(96,96,96)",
"--color-100": "rgb(91,91,91)",
"--color-050": "rgb(86,86,86)",
"--color-000": "rgb(82,82,82)"
},
"extInfo": {
"--color-app-background": "rgba(0, 0, 0, 0)",
@@ -2801,7 +3032,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(74, 55, 82)"
"--color-theme": "rgb(74, 55, 82)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0)",
@@ -3036,7 +3288,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(87, 144, 167)"
"--color-theme": "rgb(87, 144, 167)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0.15)",
@@ -3271,7 +3544,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgba(47, 47, 47, 1)"
"--color-theme": "rgba(47, 47, 47, 1)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0)",
@@ -3506,7 +3800,28 @@
"--color-primary-light-1000-alpha-700": "rgba(255, 255, 255, 0.30)",
"--color-primary-light-1000-alpha-800": "rgba(255, 255, 255, 0.20)",
"--color-primary-light-1000-alpha-900": "rgba(255, 255, 255, 0.10)",
"--color-theme": "rgb(192, 57, 43)"
"--color-theme": "rgb(192, 57, 43)",
"--color-1000": "rgb(33, 33, 33)",
"--color-950": "rgb(44,44,44)",
"--color-900": "rgb(55,55,55)",
"--color-850": "rgb(66,66,66)",
"--color-800": "rgb(77,77,77)",
"--color-750": "rgb(89,89,89)",
"--color-700": "rgb(100,100,100)",
"--color-650": "rgb(111,111,111)",
"--color-600": "rgb(122,122,122)",
"--color-550": "rgb(133,133,133)",
"--color-500": "rgb(144,144,144)",
"--color-450": "rgb(155,155,155)",
"--color-400": "rgb(166,166,166)",
"--color-350": "rgb(177,177,177)",
"--color-300": "rgb(188,188,188)",
"--color-250": "rgb(200,200,200)",
"--color-200": "rgb(211,211,211)",
"--color-150": "rgb(222,222,222)",
"--color-100": "rgb(233,233,233)",
"--color-050": "rgb(244,244,244)",
"--color-000": "rgb(255,255,255)"
},
"extInfo": {
"--color-app-background": "rgba(255, 255, 255, 0.15)",
src/common/theme/utils.js
+41 -8
View File
@@ -1,6 +1,6 @@
const { RGB_Linear_Shade, RGB_Alpha_Shade } = require('./colorUtils')
exports.createThemeColors = (rgbaColor, isDark) => {
exports.createThemeColors = (rgbaColor, fontRgbaColor, isDark) => {
const colors = {
'--color-primary': rgbaColor,
}
@@ -30,13 +30,46 @@ exports.createThemeColors = (rgbaColor, isDark) => {
colors['--color-theme'] = isDark ? colors['--color-primary-light-900'] : rgbaColor
return { ...colors, ...createFontColors(fontRgbaColor, isDark) }
}
const createFontColors = (rgbaColor, isDark) => {
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
if (rgbaColor == null) rgbaColor = isDark ? 'rgb(229, 229, 229)' : 'rgb(33, 33, 33)'
if (isDark) return createFontDarkColors(rgbaColor)
let colors = {
'--color-1000': rgbaColor,
}
let step = isDark ? -0.05 : 0.05
for (let i = 1; i < 21; i += 1) {
colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = RGB_Linear_Shade(step * i, rgbaColor)
}
// console.log(colors)
return colors
}
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
// let colors = [prec]
// for (let j = 1; j < 11; j += 1) {
// colors.push(prec = RGB_Linear_Shade(-0.15, prec))
// }
// console.log(colors)
const createFontDarkColors = (rgbaColor) => {
// rgb(238, 238, 238)
// let prec = 'rgb(255, 255, 255)'
let colors = {
'--color-1000': rgbaColor,
}
const step = -0.05
let preColor = rgbaColor
for (let i = 1; i < 21; i += 1) {
preColor = RGB_Linear_Shade(step, preColor)
colors[`--color-${String(1000 - 50 * i).padStart(3, '0')}`] = preColor
}
// console.log(colors)
return colors
}
// console.log(createFontColors('rgb(33, 33, 33)', false))
// console.log(createFontColors('rgb(255, 255, 255)', true))
// console.log(createFontDarkColors('rgb(255, 255, 255)'))
src/common/types/theme.d.ts
Vendored
+23 -11
View File
@@ -1,17 +1,29 @@
declare namespace LX {
interface ThemeColors {
// '--color-000': string
// '--color-050': string
// '--color-100': string
// '--color-200': string
// '--color-300': string
// '--color-400': string
// '--color-500': string
// '--color-600': string
// '--color-700': string
// '--color-800': string
// '--color-900': string
'--color-000': string
'--color-050': string
'--color-100': string
'--color-150': string
'--color-200': string
'--color-250': string
'--color-300': string
'--color-350': string
'--color-400': string
'--color-450': string
'--color-500': string
'--color-550': string
'--color-600': string
'--color-650': string
'--color-700': string
'--color-750': string
'--color-800': string
'--color-850': string
'--color-900': string
'--color-950': string
'--color-1000': string
'--color-theme': string
'--color-primary': string