Use cookies for dark mode

(also reverts most back-end changes from previous commit)

resources/assets/js/app.js

@@ -65,6 +65,44 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
   }
 })
 
+$(function () {
+  // theme switcher without reloading
+
+  let themeStyle = document.querySelector('#theme-style');
+  const lightURL = themeStyle.getAttribute('light-url');
+  const darkURL = themeStyle.getAttribute('dark-url');
+  const navbar = document.querySelector('.page-navbar');
+  const logo = document.querySelector('#navbar-logo');
+
+  window.toggleDarkMode = function () {
+    let newStyle = document.createElement('link');
+    newStyle.rel = 'stylesheet';
+    if (themeStyle.href === lightURL) {
+      newStyle.href = darkURL;
+      navbar.classList.remove('navbar-light');
+      navbar.classList.add('navbar-dark');
+      logo.src = logo.getAttribute('src-dark');
+
+      document.cookie = "dark_mode=1";
+    } else {
+      newStyle.href = lightURL;
+      navbar.classList.remove('navbar-dark');
+      navbar.classList.add('navbar-light');
+      logo.src = logo.getAttribute('src-light');
+
+      document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
+    }
+
+    // remove old css after new css has loaded to prevent FOUC
+    let oldThemeStyle = themeStyle;
+    themeStyle = newStyle;
+    newStyle.addEventListener('load', () => {
+      document.head.removeChild(oldThemeStyle);
+    });
+    document.head.appendChild(newStyle);
+  };
+});
+
 window.Vue = require('vue');
 
 Vue.component('column-editor', require('./components/ColumnEditor.vue'));

resources/assets/sass/bootstrap-customizations/_navbar.scss

@@ -17,3 +17,23 @@
 .dropdown-menu {
 	box-shadow: 0 3px 4px 0 rgba(black, .1);
 }
+
+.dropdown-menu .dropdown-item.nav-link {
+    cursor: pointer;
+}
+
+@if $theme == 'dark' {
+    .dropdown-menu .dark-mode-switch-on {
+        display: block;
+    }
+    .dropdown-menu .dark-mode-switch-off {
+        display: none;
+    }
+} @else {
+    .dropdown-menu .dark-mode-switch-on {
+        display: none;
+    }
+    .dropdown-menu .dark-mode-switch-off {
+        display: block;
+    }
+}