HighCharts night -> day mode

This commit is contained in:
Rsl1122 2019-08-16 11:16:32 +03:00
parent 6b5d44019e
commit 84f2cfdb3a

View File

@ -103,101 +103,68 @@
function changeHighChartsNightMode() {
try {
console.log(Highcharts.getOptions());
Highcharts.theme = nightMode ? {
chart: {
backgroundColor: '#44475a',
plotBorderColor: '#606063'
},
title: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
subtitle: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
}
},
tooltip: {
backgroundColor: '#44475a',
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
dataLabels: {color: '#B0B0B3'},
marker: {lineColor: '#333'}
}
},
legend: {
itemStyle: {
color: '#eee8d5'
},
itemHoverStyle: {
color: '#eee8d5'
},
itemHiddenStyle: {
color: '#606063'
}
itemStyle: {color: '#eee8d5'},
itemHoverStyle: {color: '#eee8d5'},
itemHiddenStyle: {color: '#606063'}
},
labels: {
style: {
color: '#eee8d5'
}
style: {color: '#eee8d5'}
},
drilldown: {
activeAxisLabelStyle: {
color: '#eee8d5'
},
activeDataLabelStyle: {
color: '#eee8d5'
}
activeAxisLabelStyle: {color: '#eee8d5'},
activeDataLabelStyle: {color: '#eee8d5'}
},
navigation: {
buttonOptions: {
symbolStroke: '#eee8d5',
theme: {
fill: '#44475a'
}
theme: {fill: '#44475a'}
}
},
// scroll charts
@ -205,23 +172,17 @@
buttonTheme: {
fill: '#505053',
stroke: '#646e8c',
style: {
color: '#CCC'
},
style: {color: '#CCC'},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
fill: '#646e9d',
stroke: '#646e8c',
style: {color: 'white'}
},
select: {
fill: '#646e9d',
stroke: '#646e8c',
style: {
color: 'white'
}
style: {color: 'white'}
}
}
},
@ -230,9 +191,7 @@
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
labelStyle: {color: 'silver'}
},
navigator: {
@ -242,13 +201,8 @@
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
series: {lineColor: '#A6C7ED'},
xAxis: {gridLineColor: '#505053'}
},
scrollbar: {
@ -261,10 +215,118 @@
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
}
} : {
} : { // Defaults
chart: {
backgroundColor: '#fff'
} // TODO Get the defaults from print above
backgroundColor: '#fff',
plotBorderColor: '#cccccc'
},
title: {
style: {color: '#3E576F'}
},
subtitle: {
style: {color: '#3E576F'}
},
xAxis: {
gridLineColor: '#E6E6E6',
labels: {
style: {color: '#333333'}
},
lineColor: '#E6E6E6',
minorGridLineColor: '#505053',
tickColor: '#E6E6E6',
title: {
style: {color: '#333333'}
}
},
yAxis: {
gridLineColor: '#E6E6E6',
labels: {
style: {color: '#333333'}
},
lineColor: '#E6E6E6',
minorGridLineColor: '#505053',
tickColor: '#E6E6E6',
tickWidth: 1,
title: {
style: {color: '#333333'}
}
},
tooltip: {
backgroundColor: 'rgba(247,247,247,0.85)',
style: {color: '#333333'}
},
plotOptions: {
series: {
dataLabels: {color: undefined},
marker: {lineColor: undefined}
}
},
legend: {
itemStyle: {color: '#333333'},
itemHoverStyle: {color: '#000000'},
itemHiddenStyle: {color: '#cccccc'}
},
labels: {
style: {color: '#333333'}
},
drilldown: {
activeAxisLabelStyle: {color: '#333333'},
activeDataLabelStyle: {color: '#333333'}
},
navigation: {
buttonOptions: {
symbolStroke: '#333333',
theme: {fill: '#CCCCCC'}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#F7F7F7',
stroke: '#333',
style: {color: '#4B336A'},
states: {
hover: {
fill: '#E6EBF5',
stroke: '#333',
style: {color: 'black'}
},
select: {
fill: '#E6EBF5',
stroke: '#333',
style: {color: 'black'}
}
}
},
inputBoxBorderColor: '#CCCCCC',
inputStyle: {
backgroundColor: '#333',
color: '#666666'
},
labelStyle: {color: "#666666"}
},
navigator: {
handles: {
backgroundColor: '#f2f2f2',
borderColor: '#999999'
},
outlineColor: '#cccccc',
maskFill: 'rgba(102,133,194,0.3)',
series: {lineColor: "#3FA0FF"},
xAxis: {gridLineColor: '#e6e6e6'}
},
scrollbar: {
barBackgroundColor: '#cccccc',
barBorderColor: '#cccccc',
buttonArrowColor: '#333333',
buttonBackgroundColor: '#e6e6e6',
buttonBorderColor: '#cccccc',
rifleColor: '#333333',
trackBackgroundColor: '#f2f2f2',
trackBorderColor: '#f2f2f2'
}
};
Highcharts.setOptions(Highcharts.theme);
updateGraphs();