Use cookies for dark mode

(also reverts most back-end changes from previous commit)
2018-08-06 16:02:42 +02:00
parent 9fd6890667
commit a63e605a15
11 changed files with 98 additions and 11 deletions
@@ -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'));
@@ -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;
+    }
+}
@@ -14,7 +14,12 @@
  <script src="{{ asset('js/app.js') }}" defer></script>

  <!-- Styles -->
-  <link href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" rel="stylesheet">
+  <link
+    rel="stylesheet"
+    id="theme-style"
+    href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}"
+    light-url="{{ asset('css/app.css') }}"
+    dark-url="{{ asset('css/app-dark.css') }}">
  <link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">
 </head>
 <body>
@@ -3,7 +3,16 @@
 <nav class="navbar navbar-expand-md navbar-{{ dark_mode() ? 'dark' : 'light' }} page-navbar">
  <div class="container">
    <a class="navbar-brand" href="{{ route('dash') }}" aria-label="Go to Dashboard">
-      <img src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
+      <img
+        id="navbar-logo"
+        src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg"
+        src-light="/images/logo.svg"
+        src-dark="/images/logo-dark.svg"
+        aria-hidden=true
+        alt="LOGO"
+        height="32px"
+        style="margin: -10px 0"
+        class="mr-2">{{--
      --}}datatable.directory
    </a>

@@ -15,6 +15,19 @@ $aclass = $dropdown ? 'dropdown-item' : 'nav-link';
    <i class="fa-key-modern fa-pr"></i>{{ __('Settings') }}
  </a>

+{!! $li !!}
+  <form method="POST" action="{{ route('toggle-dark-mode') }}" aria-hidden="true">
+    @csrf
+    <button id="toggle-dark-mode-btn" class="{{ $aclass }}" type="submit" onclick="event.preventDefault(); toggleDarkMode();">
+        <div class="dark-mode-switch-on">
+            <i class="fa-sun-o fa-pr"></i>{{ __('Light Mode') }}
+        </div>
+        <div class="dark-mode-switch-off">
+            <i class="fa-moon-o fa-pr"></i>{{ __('Dark Mode') }}
+        </div>
+    </button>
+  </form>
+
 {!! $li !!}
 <a class="{{ $aclass }}" href="{{ route('logout') }}"
   onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
@@ -16,10 +16,6 @@
        <a href="'.e(route('profile.edit')).'">profile settings</a> page.
        ', 'text-muted', false) !!}
    </div>
-    <div class="col-md-10 mt-3">
-      {!! Widget::header(2, 'General') !!}
-      {!! Widget::checkbox('dark_mode', 'Use Dark Mode')->value($user->dark_mode) !!}
-    </div>


    <div class="col-md-10 mt-3">