add light theme

This commit is contained in:
Vick Scarlet
2021-11-28 11:40:21 +08:00
parent 4f55c00f86
commit e1e2ab4701
6 changed files with 418 additions and 50 deletions

View File

@@ -69,10 +69,16 @@ function mapSet(target, source) {
function deepMapSet(target, source) {
for(const key in source) {
if(typeof source[key] === 'object')
deepMapSet(target[key], source[key]);
else
target[key] = source[key];
let value = source[key];
switch(typeof value) {
case 'function': value = value();
case 'object':
if(!Array.isArray(value)) {
deepMapSet(target[key], value);
break;
}
default: target[key] = value;
}
}
return target;
}

File diff suppressed because one or more lines are too long

View File

@@ -46,7 +46,7 @@ const cyber = {
}
}
const def = {
const dark = {
pages: {
[pages.LOADING]: "loading",
[pages.MAIN]: "default/main",
@@ -67,13 +67,12 @@ const def = {
trajectoryItem: {
box: {
defaultColor: '#4a5361',
defaultStroke: '#eeeeee',
defaultStroke: '#4a5361',
defaultLabel: '#eeeeee',
hoverColor: '#4a5361',
hoverStroke: '#eeeeee',
hoverStroke: '#4a5361',
hoverLabel: '#eeeeee',
lineWidth: 2,
radius: 0,
filters: ()=>[new Laya.GlowFilter("#eeeeee", 8, 0, 0)],
},
ageColor: '#ffffee',
contentColor: '#eeeeee',
@@ -293,8 +292,8 @@ const def = {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: { color: '#eeeeee' },
labSubTitle: { color: '#eeeeee' },
labTitle: 'title',
labSubTitle: 'title',
},
names: {
btnSmall: 'btn_small',
@@ -386,11 +385,375 @@ const def = {
}
},
popups: {
[popups.ACHIEVEMENT]: {
vars: {
bg1: {
defaultColor: '#292a28',
defaultStroke: '#84ff55',
hoverColor: '#292a28',
hoverStroke: '#84ff55',
}
}
}
}
}
}
const light = {
pages: {
[pages.LOADING]: "loading",
[pages.MAIN]: "default/main",
[pages.TALENT]: "default/talent",
[pages.PROPERTY]: "default/property",
[pages.TRAJECTORY]: "default/trajectory",
[pages.SUMMARY]: "default/summary",
[pages.ACHIEVEMENT]: "default/achievement",
[pages.THANKS]: "default/thanks",
},
popups: {
[popups.ACHIEVEMENT]: "default/popup/achievementPopup",
},
configs: {
bgColor: '#ffffff',
common: {
defaultFontColor: '#000000',
trajectoryItem: {
box: {
defaultColor: '#ffffff',
defaultStroke: '#ffffff',
defaultLabel: '#000000',
hoverColor: '#ffffff',
hoverStroke: '#ffffff',
hoverLabel: '#000000',
lineWidth: 0,
radius: 0,
filters: ()=>[new Laya.GlowFilter("#b1b1b1", 8, 0, 0)],
},
ageColor: '#000000',
contentColor: '#000000',
},
grade: [
'#000000',
'#55fffe',
'#b17cff',
'#ffce45',
],
filter: [
'#000000ff',
'#55fffeff',
'#b17cffff',
'#ffce45ff',
],
card: [
{
normal: {
defaultColor: '#ededed',
defaultStroke: '#f8f8f8',
defaultLabel: '#666666',
hoverColor: '#666666',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
},
selected: {
defaultColor: '#666666',
defaultStroke: '#a5ff88',
defaultLabel: '#ffffff',
hoverColor: '#666666',
hoverStroke: '#a5ff88',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
}
},
{
normal: {
defaultColor: '#87cefa',
defaultStroke: '#f8f8f8',
defaultLabel: '#666666',
hoverColor: '#6495ed',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
},
selected: {
defaultColor: '#6495ed',
defaultStroke: '#a5ff88',
defaultLabel: '#ffffff',
hoverColor: '#6495ed',
hoverStroke: '#a5ff88',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
}
},
{
normal: {
defaultColor: '#e7beff',
defaultStroke: '#f8f8f8',
defaultLabel: '#666666',
hoverColor: '#e2a7ff',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
},
selected: {
defaultColor: '#e2a7ff',
defaultStroke: '#a5ff88',
defaultLabel: '#ffffff',
hoverColor: '#e2a7ff',
hoverStroke: '#a5ff88',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
}
},
{
normal: {
defaultColor: '#f7a989',
defaultStroke: '#f8f8f8',
defaultLabel: '#666666',
hoverColor: '#ffa07a',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
},
selected: {
defaultColor: '#ffa07a',
defaultStroke: '#f8f8f8',
defaultLabel: '#ffffff',
hoverColor: '#ffa07a',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
}
}
],
summary: [
{
defaultColor: '#ededed',
defaultStroke: '#f8f8f8',
defaultLabel: '#666666',
hoverColor: '#666666',
hoverStroke: '#f8f8f8',
hoverLabel: '#ffffff',
lineWidth: 4,
radius: 4,
},{
defaultColor: '#6495ed',
defaultStroke: '#f8f8f8',
defaultLabel: '#ffffff',
hoverColor: '#87cefa',
hoverStroke: '#f8f8f8',
hoverLabel: '#666666',
lineWidth: 4,
radius: 4,
},{
defaultColor: '#e2a7ff',
defaultStroke: '#f8f8f8',
defaultLabel: '#ffffff',
hoverColor: '#e7beff',
hoverStroke: '#f8f8f8',
hoverLabel: '#666666',
lineWidth: 4,
radius: 4,
},{
defaultColor: '#ffa07a',
defaultStroke: '#f8f8f8',
defaultLabel: '#ffffff',
hoverColor: '#f7a989',
hoverStroke: '#f8f8f8',
hoverLabel: '#666666',
lineWidth: 4,
radius: 4,
},
],
achievement: [
{
defaultColor: '#ededed',
defaultStroke: '#cccccc',
defaultLabel: '#000000',
hoverColor: '#eeeeee',
hoverStroke: '#cccccc',
hoverLabel: '#efefef',
lineWidth: 4,
radius: 0,
},{
defaultColor: '#6495ed',
defaultStroke: '#cccccc',
defaultLabel: '#eeeeee',
hoverColor: '#87cefa',
hoverStroke: '#cccccc',
hoverLabel: '#3b3b3b',
lineWidth: 4,
radius: 0,
},{
defaultColor: '#e2a7ff',
defaultStroke: '#cccccc',
defaultLabel: '#eeeeee',
hoverColor: '#e7beff',
hoverStroke: '#cccccc',
hoverLabel: '#3b3b3b',
lineWidth: 4,
radius: 0,
},{
defaultColor: '#ffa07a',
defaultStroke: '#cccccc',
defaultLabel: '#eeeeee',
hoverColor: '#f7a989',
hoverStroke: '#cccccc',
hoverLabel: '#3b3b3b',
lineWidth: 4,
radius: 0,
}
]
},
class: {
btn_main: {
defaultColor: '#ffffff',
defaultStroke: '#cccccc',
defaultLabel: '#000000',
hoverColor: '#ff7878',
hoverStroke: '#cccccc',
hoverLabel: '#ffffff',
lineWidth: 2,
radius: 4,
},
btn_small: {
defaultColor: '#5865f2',
defaultStroke: '#eeeeee',
defaultLabel: '#eeeeee',
hoverColor: '#1160b0',
hoverStroke: '#eeeeee',
hoverLabel: '#eeeeee',
lineWidth: 0,
radius: 4,
},
title: {
color: '#000000',
},
font_default: {
color: '#000000',
}
},
pages: {
[pages.MAIN]: {
vars: {
btnRemake: 'btn_main',
labTitle: 'title',
labSubTitle: 'title',
},
names: {
btnSmall: 'btn_small',
}
},
[pages.TALENT]: {
vars: {
btnDrawCard: 'btn_main',
btnNext: 'btn_main',
title: 'title',
}
},
[pages.PROPERTY]: {
vars: {
btnRandomAllocate: 'btn_main',
btnNext: 'btn_main',
title: 'title',
},
names: {
font_default: 'font_default',
property: {
colorFilter: '#000000ff'
}
}
},
[pages.TRAJECTORY]: {
vars: {
btnSummary: 'btn_main',
boxTrajectory: {
defaultColor: '#ffffff',
defaultStroke: '#9b9b9b',
defaultLabel: '#eeeeee',
hoverColor: '#ffffff',
hoverStroke: '#9b9b9b',
hoverLabel: '#eeeeee',
lineWidth: 1,
radius: 4,
},
boxSpeed: {
colorFilter: '#666666ff'
}
},
names: {
propertyBox: {
defaultColor: '#8d8d8d',
defaultStroke: '#eeeeee',
defaultLabel: '#ffffff',
hoverColor: '#8d8d8d',
hoverStroke: '#eeeeee',
hoverLabel: '#ffffff',
lineWidth: 2,
radius: 4,
},
propertyValue: {
defaultColor: '#ffffff',
defaultStroke: '#eeeeee',
defaultLabel: '#222831',
hoverColor: '#ffffff',
hoverStroke: '#eeeeee',
hoverLabel: '#222831',
lineWidth: 0,
radius: 4,
}
}
},
[pages.SUMMARY]: {
vars: {
btnAgain: 'btn_main',
title: 'title',
},
names: {
font_default: 'font_default',
}
},
[pages.ACHIEVEMENT]: {
vars: {
btnBack: 'btn_small',
btnRank: 'btn_small',
},
names: {
font_default: 'font_default',
title: 'title',
}
},
[pages.THANKS]: {
vars: {
btnBack: 'btn_small',
},
}
},
popups: {
[popups.ACHIEVEMENT]: {
vars: {
bg1: {
defaultColor: '#ffffff',
defaultStroke: '#84ff55',
hoverColor: '#ffffff',
hoverStroke: '#84ff55',
lineWidth: 1,
}
}
}
}
}
}
const themes = { default: def, cyber };
const themes = { default: dark, cyber, dark, light };
export default { themes, pages, popups };