HighCharts night -> day mode

Plan/common/src/main/resources/assets/plan/web/js/color-selector.js

@@ -103,101 +103,68 @@
 
     function changeHighChartsNightMode() {
         try {
-            console.log(Highcharts.getOptions());
             Highcharts.theme = nightMode ? {
                 chart: {
                     backgroundColor: '#44475a',
                     plotBorderColor: '#606063'
                 },
                 title: {
-                    style: {
+                    style: {color: '#eee8d5'}
-                        color: '#eee8d5'
-                    }
                 },
                 subtitle: {
-                    style: {
+                    style: {color: '#eee8d5'}
-                        color: '#eee8d5'
-                    }
                 },
                 xAxis: {
                     gridLineColor: '#707073',
                     labels: {
-                        style: {
+                        style: {color: '#eee8d5'}
-                            color: '#eee8d5'
-                        }
                     },
                     lineColor: '#707073',
                     minorGridLineColor: '#505053',
                     tickColor: '#707073',
                     title: {
-                        style: {
+                        style: {color: '#eee8d5'}
-                            color: '#eee8d5'
-                        }
                     }
                 },
                 yAxis: {
                     gridLineColor: '#707073',
                     labels: {
-                        style: {
+                        style: {color: '#eee8d5'}
-                            color: '#eee8d5'
-                        }
                     },
                     lineColor: '#707073',
                     minorGridLineColor: '#505053',
                     tickColor: '#707073',
                     tickWidth: 1,
                     title: {
-                        style: {
+                        style: {color: '#eee8d5'}
-                            color: '#eee8d5'
-                        }
                     }
                 },
                 tooltip: {
                     backgroundColor: '#44475a',
-                    style: {
+                    style: {color: '#eee8d5'}
-                        color: '#eee8d5'
-                    }
                 },
                 plotOptions: {
                     series: {
-                        dataLabels: {
+                        dataLabels: {color: '#B0B0B3'},
-                            color: '#B0B0B3'
+                        marker: {lineColor: '#333'}
-                        },
-                        marker: {
-                            lineColor: '#333'
-                        }
                     }
                 },
                 legend: {
-                    itemStyle: {
+                    itemStyle: {color: '#eee8d5'},
-                        color: '#eee8d5'
+                    itemHoverStyle: {color: '#eee8d5'},
-                    },
+                    itemHiddenStyle: {color: '#606063'}
-                    itemHoverStyle: {
-                        color: '#eee8d5'
-                    },
-                    itemHiddenStyle: {
-                        color: '#606063'
-                    }
                 },
                 labels: {
-                    style: {
+                    style: {color: '#eee8d5'}
-                        color: '#eee8d5'
-                    }
                 },
                 drilldown: {
-                    activeAxisLabelStyle: {
+                    activeAxisLabelStyle: {color: '#eee8d5'},
-                        color: '#eee8d5'
+                    activeDataLabelStyle: {color: '#eee8d5'}
-                    },
-                    activeDataLabelStyle: {
-                        color: '#eee8d5'
-                    }
                 },
                 navigation: {
                     buttonOptions: {
                         symbolStroke: '#eee8d5',
-                        theme: {
+                        theme: {fill: '#44475a'}
-                            fill: '#44475a'
-                        }
                     }
                 },
                 // scroll charts
@@ -205,23 +172,17 @@
                     buttonTheme: {
                         fill: '#505053',
                         stroke: '#646e8c',
-                        style: {
+                        style: {color: '#CCC'},
-                            color: '#CCC'
-                        },
                         states: {
                             hover: {
-                                fill: '#707073',
+                                fill: '#646e9d',
-                                stroke: '#000000',
+                                stroke: '#646e8c',
-                                style: {
+                                style: {color: 'white'}
-                                    color: 'white'
-                                }
                             },
                             select: {
                                 fill: '#646e9d',
                                 stroke: '#646e8c',
-                                style: {
+                                style: {color: 'white'}
-                                    color: 'white'
-                                }
                             }
                         }
                     },
@@ -230,9 +191,7 @@
                         backgroundColor: '#333',
                         color: 'silver'
                     },
-                    labelStyle: {
+                    labelStyle: {color: 'silver'}
-                        color: 'silver'
-                    }
                 },
 
                 navigator: {
@@ -242,13 +201,8 @@
                     },
                     outlineColor: '#CCC',
                     maskFill: 'rgba(255,255,255,0.1)',
-                    series: {
+                    series: {lineColor: '#A6C7ED'},
-                        color: '#7798BF',
+                    xAxis: {gridLineColor: '#505053'}
-                        lineColor: '#A6C7ED'
-                    },
-                    xAxis: {
-                        gridLineColor: '#505053'
-                    }
                 },
 
                 scrollbar: {
@@ -261,10 +215,118 @@
                     trackBackgroundColor: '#404043',
                     trackBorderColor: '#404043'
                 }
-            } : {
+            } : { // Defaults
                 chart: {
-                    backgroundColor: '#fff'
+                    backgroundColor: '#fff',
-                } // TODO Get the defaults from print above
+                    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();