mirror of
https://github.com/akveo/ngx-admin.git
synced 2026-01-20 00:06:10 +01:00
fix(demo): refactor js theme using
This commit is contained in:
KostyaDanovsky
parent
672615b710
commit
b772882cd6
28 changed files with 561 additions and 492 deletions
|
|
@ -2,152 +2,122 @@ export const COSMIC_THEME = {
|
|||
name: 'cosmic',
|
||||
base: 'default',
|
||||
variables: {
|
||||
tempColorGreen: '#7bff24',
|
||||
tempColorLightBlue: '#31ffad',
|
||||
tempColorBlue: '#2ec7fe',
|
||||
tempColorYellow: '#fff024',
|
||||
tempColorOrange: '#f7bd59',
|
||||
|
||||
solarColorDarkGreen: '#19977E',
|
||||
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
|
||||
trafficColorBlack: '#000000',
|
||||
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
|
||||
trafficShadowLineBg: '#bdbaff',
|
||||
trafficShadowLineDarkBg: '#a695ff',
|
||||
trafficShadowLineShadow: 'rgba(33, 7, 77, 0.5)',
|
||||
trafficGradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
trafficGradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
temperature: [
|
||||
'#2ec7fe',
|
||||
'#31ffad',
|
||||
'#7bff24',
|
||||
'#fff024',
|
||||
'#f7bd59',
|
||||
],
|
||||
|
||||
electricityAxisColor: '#a1a1e5',
|
||||
electricityLineGradFrom: '#00ffaa',
|
||||
electricityLineGradTo: '#fff835',
|
||||
electricityLineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
electricityAreaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
electricityAreaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
solar: {
|
||||
color: '#19977E',
|
||||
shadowColor: 'rgba(0, 217, 119, 0.3)',
|
||||
gradientLeft: '#7bff24',
|
||||
gradientRight: '#2ec7fe',
|
||||
},
|
||||
|
||||
bubbleMapTitleColor: '#ffffff',
|
||||
bubbleMapGeoColor1: '#e6b045',
|
||||
bubbleMapGeoColor2: '#0088ff',
|
||||
bubbleMapGeoColor3: '#ff386a',
|
||||
bubbleMapGeoColor4: '#00d977',
|
||||
bubbleMapGeoColor5: '#7659ff',
|
||||
bubbleMapGeoColor6: '#24dec8',
|
||||
bubbleMapAreaColor: '#2c2961',
|
||||
bubbleMapAreaHoverColor: '#a1a1e5',
|
||||
bubbleMapAreaBorderColor: '#654ddb',
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
lineBg: 'rgba(146, 141, 255, 0.5)',
|
||||
shadowLineBg: '#bdbaff',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
},
|
||||
|
||||
echartsBackgroundColor: '#363175',
|
||||
electricity: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
axisColor: '#a1a1e5',
|
||||
lineGradFrom: '#00ffaa',
|
||||
lineGradTo: '#fff835',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
},
|
||||
|
||||
echartsPieColor1: 'rgb(168, 56, 93)',
|
||||
echartsPieColor2: 'rgb(122, 163, 229)',
|
||||
echartsPieColor3: 'rgb(170, 227, 245)',
|
||||
echartsPieColor4: 'rgb(173, 205, 237)',
|
||||
echartsPieColor5: 'rgb(162, 126, 168)',
|
||||
echartsPieLegendTextColor: 'white',
|
||||
echartsPieItemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
bubbleMap: {
|
||||
titleColor: '#ffffff',
|
||||
geoColors: ['#e6b045', '#0088ff', '#ff386a', '#00d977', '#7659ff', '#24dec8'],
|
||||
areaColor: '#2c2961',
|
||||
areaHoverColor: '#a1a1e5',
|
||||
areaBorderColor: '#654ddb',
|
||||
},
|
||||
|
||||
echartsBarColor1: '#3398DB',
|
||||
echartsBarXAxisLineColor: 'white',
|
||||
echartsBarYAxisLineColor: 'white',
|
||||
echarts: {
|
||||
bg: '#363175',
|
||||
legendTextColor: 'white',
|
||||
xAxisLineColor: 'white',
|
||||
yAxisLineColor: 'white',
|
||||
|
||||
echartsLineColor1: 'red',
|
||||
echartsLineColor2: 'black',
|
||||
echartsLineColor3: 'white',
|
||||
echartsLineLegendTextColor: 'white',
|
||||
echartsLineXAxisLineColor: 'white',
|
||||
echartsLineYAxisLineColor: 'white',
|
||||
pie: {
|
||||
colors: [
|
||||
'rgb(168, 56, 93)',
|
||||
'rgb(122, 163, 229)',
|
||||
'rgb(170, 227, 245)',
|
||||
'rgb(173, 205, 237)',
|
||||
'rgb(162, 126, 168)',
|
||||
],
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
|
||||
echartsMultipleXAxisColor1: '#5793f3',
|
||||
echartsMultipleXAxisColor2: '#d14a61',
|
||||
echartsMultipleXAxisColor3: '#675bba',
|
||||
echartsMultipleXAxisLegendTextColor: 'white',
|
||||
echartsMultipleXAxisYAxisLineColor: 'white',
|
||||
bar: {
|
||||
color: '#3398DB',
|
||||
},
|
||||
|
||||
echartsAreaStackColor1: 'red',
|
||||
echartsAreaStackColor2: 'blue',
|
||||
echartsAreaStackColor3: 'purple',
|
||||
echartsAreaStackColor4: 'yellow',
|
||||
echartsAreaStackColor5: 'pink',
|
||||
echartsAreaStackLegendTextColor: 'white',
|
||||
echartsAreaStackXAxisLineColor: 'white',
|
||||
echartsAreaStackYAxisLineColor: 'white',
|
||||
echartsAreaStackTooltipBackgroundColor: '#6a7985',
|
||||
barAnimation: {
|
||||
colors: ['red', 'white'],
|
||||
},
|
||||
|
||||
echartsBarAnimationColor1: 'red',
|
||||
echartsBarAnimationColor2: 'white',
|
||||
echartsBarAnimationLegendTextColor: 'white',
|
||||
echartsBarAnimationXAxisLineColor: 'white',
|
||||
echartsBarAnimationYAxisLineColor: 'white',
|
||||
line: {
|
||||
colors: ['red', 'black', 'white'],
|
||||
},
|
||||
|
||||
echartsRadarColor1: 'red',
|
||||
echartsRadarColor2: 'white',
|
||||
echartsRadarLegendTextColor: 'white',
|
||||
echartsRadarNameTextColor: 'white',
|
||||
echartsRadarSplitAreaStyleColor: 'transparent',
|
||||
multipleLine: {
|
||||
colors: ['#5793f3', '#d14a61', '#675bba'],
|
||||
},
|
||||
|
||||
chartjsPieXAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsPieYAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsPieTickColor: 'white',
|
||||
chartjsPieLegendTextColor: 'white',
|
||||
areaStack: {
|
||||
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
},
|
||||
|
||||
chartjsBarXAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsBarYAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsBarTickColor: 'white',
|
||||
chartjsBarLegendTextColor: 'white',
|
||||
radar: {
|
||||
colors: ['red', 'white'],
|
||||
nameTextColor: 'white',
|
||||
splitAreaStyleColor: 'transparent',
|
||||
},
|
||||
},
|
||||
|
||||
chartjsLineXAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsLineYAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsLineTickColor: 'white',
|
||||
chartjsLineLegendTextColor: 'white',
|
||||
chartjs: {
|
||||
xAxisColor: 'rgba(148,159,177,1)',
|
||||
yAxisColor: 'rgba(148,159,177,1)',
|
||||
tickColor: 'white',
|
||||
legendTextColor: 'white',
|
||||
|
||||
chartjsMultipleXAxisXAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsMultipleXAxisYAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsMultipleXAxisTickColor: 'white',
|
||||
chartjsMultipleXAxisLegendTextColor: 'white',
|
||||
barHorizontal: {
|
||||
colors: ['red', 'blue'],
|
||||
},
|
||||
|
||||
chartjsBarHorizontalColor1: 'red',
|
||||
chartjsBarHorizontalColor2: 'blue',
|
||||
chartjsBarHorizontalXAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsBarHorizontalYAxisColor: 'rgba(148,159,177,1)',
|
||||
chartjsBarHorizontalTickColor: 'white',
|
||||
chartjsBarHorizontalLegendTextColor: 'white',
|
||||
radar: {
|
||||
colors: ['red', 'blue'],
|
||||
scaleGridLinesColor: 'white',
|
||||
scaleAngleLinesColor: 'white',
|
||||
pointLabelFontColor: 'white',
|
||||
},
|
||||
},
|
||||
|
||||
chartjsRadarColor1: 'red',
|
||||
chartjsRadarColor2: 'blue',
|
||||
chartjsRadarLegendTextColor: 'white',
|
||||
chartjsRadarScaleGridLinesColor: 'white',
|
||||
chartjsRadarScaleAngleLinesColor: 'white',
|
||||
chartjsRadarPointLabelFontColor: 'white',
|
||||
|
||||
d3PieColor1: '#5AA454',
|
||||
d3PieColor2: '#A10A28',
|
||||
d3PieColor3: '#C7B42C',
|
||||
d3PieColor4: '#AAAAAA',
|
||||
|
||||
d3BarColor1: '#5AA454',
|
||||
d3BarColor2: '#A10A28',
|
||||
d3BarColor3: '#C7B42C',
|
||||
d3BarColor4: '#AAAAAA',
|
||||
|
||||
d3LineColor1: '#5AA454',
|
||||
d3LineColor2: '#A10A28',
|
||||
d3LineColor3: '#C7B42C',
|
||||
d3LineColor4: '#AAAAAA',
|
||||
|
||||
d3AdvancedPieColor1: '#5AA454',
|
||||
d3AdvancedPieColor2: '#A10A28',
|
||||
d3AdvancedPieColor3: '#C7B42C',
|
||||
d3AdvancedPieColor4: '#AAAAAA',
|
||||
|
||||
d3AreaStackColor1: '#5AA454',
|
||||
d3AreaStackColor2: '#A10A28',
|
||||
d3AreaStackColor3: '#C7B42C',
|
||||
d3AreaStackColor4: '#AAAAAA',
|
||||
|
||||
d3PolarColor1: '#5AA454',
|
||||
d3PolarColor2: '#A10A28',
|
||||
d3PolarColor3: '#C7B42C',
|
||||
d3PolarColor4: '#AAAAAA',
|
||||
d3: {
|
||||
pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,40 +1,117 @@
|
|||
export const DEFAULT_THEME = {
|
||||
name: 'default',
|
||||
base: 'default',
|
||||
base: null,
|
||||
variables: {
|
||||
tempColorGreen: '#7bff24',
|
||||
tempColorLightBlue: '#7bff24',
|
||||
tempColorBlue: '#7bff24',
|
||||
tempColorYellow: '#7bff24',
|
||||
tempColorOrange: '#7bff24',
|
||||
|
||||
solarColorDarkGreen: '#7bff24',
|
||||
solarColorShadow: 'rgba(0, 217, 119, 0.3)',
|
||||
trafficColorBlack: '#7bff24',
|
||||
trafficTooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
trafficLineBg: 'rgba(146, 141, 255, 0.5)',
|
||||
trafficShadowLineBg: '#7bff24',
|
||||
trafficShadowLineDarkBg: '#7bff24',
|
||||
trafficShadowLineShadow: '#7bff24',
|
||||
trafficGradFrom: '#7bff24',
|
||||
trafficGradTo: '#7bff24',
|
||||
temperature: ['#7bff24', '#31ffad', '#2ec7fe', '#fff024', '#f7bd59'],
|
||||
|
||||
electricityAxisColor: '#7bff24',
|
||||
electricityLineGradFrom: '#7bff24',
|
||||
electricityLineGradTo: '#7bff24',
|
||||
electricityLineShadow: '#7bff24',
|
||||
electricityAreaGradFrom: '#7bff24',
|
||||
electricityAreaGradTo: '#7bff24',
|
||||
solar: {
|
||||
color: '#19977E',
|
||||
shadowColor: 'rgba(0, 217, 119, 0.3)',
|
||||
gradientLeft: '#7bff24',
|
||||
gradientRight: '#2ec7fe',
|
||||
},
|
||||
|
||||
bubbleMapTitleColor: '#333333',
|
||||
bubbleMapGeoColor1: '#e6b045',
|
||||
bubbleMapGeoColor2: '#0088ff',
|
||||
bubbleMapGeoColor3: '#ff386a',
|
||||
bubbleMapGeoColor4: '#00d977',
|
||||
bubbleMapGeoColor5: '#7659ff',
|
||||
bubbleMapGeoColor6: '#24dec8',
|
||||
bubbleMapAreaColor: '#2f3234',
|
||||
bubbleMapAreaHoverColor: '#a1a1e5',
|
||||
bubbleMapAreaBorderColor: '#dddddd',
|
||||
traffic: {
|
||||
colorBlack: '#000000',
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
lineBg: 'rgba(146, 141, 255, 0.5)',
|
||||
shadowLineBg: '#bdbaff',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
shadowLineShadow: 'rgba(33, 7, 77, 0.5)',
|
||||
gradFrom: 'rgba(118, 89, 255, 0.4)',
|
||||
gradTo: 'rgba(164, 84, 255, 0.5)',
|
||||
},
|
||||
|
||||
electricity: {
|
||||
tooltipBg: 'rgba(0, 255, 170, 0.35)',
|
||||
axisColor: '#a1a1e5',
|
||||
lineGradFrom: '#00ffaa',
|
||||
lineGradTo: '#fff835',
|
||||
lineShadow: 'rgba(14, 16, 48, 0.4)',
|
||||
areaGradFrom: 'rgba(188, 92, 255, 0.5)',
|
||||
areaGradTo: 'rgba(188, 92, 255, 0)',
|
||||
shadowLineDarkBg: '#a695ff',
|
||||
},
|
||||
|
||||
bubbleMap: {
|
||||
titleColor: '#ffffff',
|
||||
geoColors: ['#e6b045', '#0088ff', '#ff386a', '#00d977', '#7659ff', '#24dec8'],
|
||||
areaColor: '#2c2961',
|
||||
areaHoverColor: '#a1a1e5',
|
||||
areaBorderColor: '#654ddb',
|
||||
},
|
||||
|
||||
echarts: {
|
||||
bg: '#363175',
|
||||
legendTextColor: 'white',
|
||||
xAxisLineColor: 'white',
|
||||
yAxisLineColor: 'white',
|
||||
|
||||
pie: {
|
||||
colors: [
|
||||
'rgb(168, 56, 93)',
|
||||
'rgb(122, 163, 229)',
|
||||
'rgb(170, 227, 245)',
|
||||
'rgb(173, 205, 237)',
|
||||
'rgb(162, 126, 168)',
|
||||
],
|
||||
itemHoverShadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
|
||||
bar: {
|
||||
color: '#3398DB',
|
||||
},
|
||||
|
||||
barAnimation: {
|
||||
colors: ['red', 'white'],
|
||||
},
|
||||
|
||||
line: {
|
||||
colors: ['red', 'black', 'white'],
|
||||
},
|
||||
|
||||
multipleLine: {
|
||||
colors: ['#5793f3', '#d14a61', '#675bba'],
|
||||
},
|
||||
|
||||
areaStack: {
|
||||
colors: ['red', 'blue', 'purple', 'yellow', 'pink'],
|
||||
tooltipBackgroundColor: '#6a7985',
|
||||
},
|
||||
|
||||
radar: {
|
||||
colors: ['red', 'white'],
|
||||
nameTextColor: 'white',
|
||||
splitAreaStyleColor: 'transparent',
|
||||
},
|
||||
},
|
||||
|
||||
chartjs: {
|
||||
xAxisColor: 'rgba(148,159,177,1)',
|
||||
yAxisColor: 'rgba(148,159,177,1)',
|
||||
tickColor: 'white',
|
||||
legendTextColor: 'white',
|
||||
|
||||
barHorizontal: {
|
||||
colors: ['red', 'blue'],
|
||||
},
|
||||
|
||||
radar: {
|
||||
colors: ['red', 'blue'],
|
||||
scaleGridLinesColor: 'white',
|
||||
scaleAngleLinesColor: 'white',
|
||||
pointLabelFontColor: 'white',
|
||||
},
|
||||
},
|
||||
|
||||
d3: {
|
||||
pie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
bar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
line: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
advancedPie: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
areaStack: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
polar: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -63,7 +63,7 @@ const PIPES = [CapitalizePipe, PluralPipe, RoundPipe];
|
|||
const NGA_THEME_PROVIDERS = [
|
||||
...NgaThemeModule.forRoot(
|
||||
{
|
||||
name: 'cosmic',
|
||||
name: 'default',
|
||||
},
|
||||
[DEFAULT_THEME, COSMIC_THEME],
|
||||
).providers,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue