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
@@ -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();">