Small tweaks to nightmode

- Now set 'async'
- World pies inside session accordion have correct night bg color
- Tables have correct text color (Not #FFF)

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

@@ -79,7 +79,7 @@
                 '.card,.bg-white,.modal-content,.page-loader,.nav-tabs .nav-link:hover,.nav-tabs,hr {background-color:#44475a;border-color:#6272a4!important;}' +
                 '.bg-white.collapse-inner {border:1px solid;}' +
                 '.card-header {background-color:#44475a;border-color:#6272a4;}' +
-                '#content,.col-black,.text-gray-800,.collapse-item,.modal-title,.modal-body,.page-loader,.close,.fc-title,.fc-time,pre {color:#eee8d5 !important;}' +
+                '#content,.col-black,.text-gray-800,.collapse-item,.modal-title,.modal-body,.page-loader,.close,.fc-title,.fc-time,pre,.table-dark {color:#eee8d5 !important;}' +
                 '.collapse-item:hover,.nav-link.active {background-color: #606270 !important;}' +
                 '.nav-tabs .nav-link.active {background-color: #44475a !important;border-color:#6272a4 #6272a4 #44475a !important;}' +
                 '.fc-today {background:#646e8c !important}' +
@@ -343,9 +343,11 @@
         } else {
             nightMode = true;
         }
-        window.localStorage.setItem('nightMode', nightMode);
+        setTimeout(function () {
-        changeNightModeCSS();
+            window.localStorage.setItem('nightMode', nightMode);
-        changeHighChartsNightMode();
+            changeNightModeCSS();
+            changeHighChartsNightMode();
+        }, 0);
     }
 
     $('#night-mode-toggle').on('click', toggleNightMode);

Plan/common/src/main/resources/assets/plan/web/js/graphs.js

@@ -20,6 +20,7 @@ var linegraphButtons = [{
 }];
 
 var graphs = [];
+var specialColors = {};
 
 function activityPie(id, activitySeries) {
     graphs.push(Highcharts.chart(id, {
@@ -553,12 +554,13 @@ function worldMap(id, colorMin, colorMax, mapSeries) {
     }));
 }
 
-function worldPie(id, worldSeries, gmSeries) {
+function worldPie(id, worldSeries, gmSeries, bgColor) {
     var defaultTitle = '';
     var defaultSubtitle = 'Click the slices to view used GameMode';
 
-    graphs.push(Highcharts.chart(id, {
+    var chart = Highcharts.chart(id, {
         chart: {
+            backgroundColor: bgColor ? bgColor : '#44475a',
             plotBackgroundColor: null,
             plotBorderWidth: null,
             plotShadow: false,
@@ -597,11 +599,23 @@ function worldPie(id, worldSeries, gmSeries) {
                 return {name: d.name, id: d.id, colors: gmPieColors, data: d.data}
             })
         }
-    }));
+    });
+    if (bgColor) {
+        specialColors[graphs.length] = bgColor;
+    }
+    graphs.push(chart);
 }
 
 function updateGraphs() {
+    var nightMode = window.localStorage.getItem('nightMode') == 'true';
     for (var i = 0; i < graphs.length; i++) {
-        graphs[i].update(Highcharts.theme)
+        graphs[i].update(Highcharts.theme);
+        if (nightMode && specialColors[i]) {
+            graphs[i].update({
+                chart: {
+                    backgroundColor: specialColors[i]
+                }
+            });
+        }
     }
 }

Plan/common/src/main/resources/assets/plan/web/js/sessionAccordion.js

@@ -42,7 +42,7 @@ function onOpenSession(i, sessions) {
             var worldSeries = {name: 'World Playtime', colorByPoint: true, data: session.world_series};
             var gmSeries = session.gm_series;
 
-            worldPie("worldpie_" + i, worldSeries, gmSeries);
+            worldPie("worldpie_" + i, worldSeries, gmSeries, '#3A3B45');
         }, 250);
         opened = true;
     }