Added an toggle to activate a simple dark mode.

The dark mode is only available on browsers that support mix-blend-mode. There are some quirks with hover images...

assets/css/app.css

@@ -165,7 +165,7 @@ showing the sidebar (on devices with md or higher)
 .toast-container {
     position: fixed;
     top: auto;
-    z-index: 1;
+    z-index: 3000; /* Over darkmode layer for correct colors! */
     right: 25px;
 }
 
@@ -347,7 +347,6 @@ btn-xs
     display: block;
     margin-left: auto;
     margin-right: auto;
-
 }
 
 .hoverpic:hover {
@@ -356,6 +355,10 @@ btn-xs
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
 
+.darkmode--activated .hoverpic:hover {
+    background: black;
+}
+
 
 .thumbnail-sm {
     max-height: 100px;
@@ -790,3 +793,11 @@ table.dataTable {
     font-size: 17.5px;
     border-left: 5px solid #eee;
 }
+
+.darkmode-layer {
+    z-index: 2020;
+}
+
+.darkmode--activated img {
+    mix-blend-mode: difference;
+}

assets/js/app.js

@@ -88,6 +88,8 @@ require('../css/tagsinput.css');
 //Tristate checkbox support
 require('./jquery.tristate.js');
 
+require('darkmode-js');
+
 require('../ts_src/ajax_ui');
 import {ajaxUI} from "../ts_src/ajax_ui";
 
@@ -97,6 +99,26 @@ window.ajaxUI = ajaxUI;
 require('../ts_src/event_listeners');
 
 
+
+//Register darkmode (we must do it here, TS does not support ES6 constructor...
+try {
+    //The browser needs to support mix blend mode
+    if(typeof window.getComputedStyle(document.body).mixBlendMode !== 'undefined') {
+        const darkmode = new Darkmode();
+
+        $(document).on("ajaxUI:start ajaxUI:reload", function () {
+            //Show darkmode toggle to user
+            $('#toggleDarkmodeContainer, #toggleDarkmodeSeparator').removeAttr('hidden');
+            $('#toggleDarkmode').prop('checked', darkmode.isActivated());
+            $('#toggleDarkmode').change(function () {
+                darkmode.toggle();
+            });
+        });
+    }
+} catch (e) {
+    //Ignore all errors (for compatibiltiy with old browsers)
+}
+
 //Start AjaxUI AFTER all event has been registered
 $(document).ready(ajaxUI.start());