Use cookies for dark mode

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

app/Http/Controllers/AccountController.php

@@ -38,7 +38,6 @@ class AccountController extends Controller
                 Rule::unique('users')->ignoreModel($user),
             ],
             'new_password' => ['nullable', 'confirmed', VALI_PASSWORD],
-            'dark_mode' => 'nullable',
         ]);
 
         if ($input->email != $user->email) {

app/Models/User.php

@@ -33,7 +33,6 @@ use MightyPork\Utils\Str;
  * @property string $email - unique, for login and social auth chaining
  * @property string $password - hashed pw
  * @property bool $confirmed - user e-mail is confirmed
- * @property bool $dark_mode - user prefers dark mode
  * @property-read Proposal[]|Collection $proposals
  * @property-read Table[]|Collection $tables
  * @property-read OAuthIdentity[]|Collection $socialIdentities
@@ -63,7 +62,7 @@ class User extends BaseModel implements
      * @var array
      */
     protected $fillable = [
-        'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed', 'dark_mode'
+        'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed'
     ];
 
     /**

app/helpers.php

@@ -33,7 +33,7 @@ function faker() {
 }
 
 function dark_mode() {
-    return user() !== NULL && user()->dark_mode;
+    return isset($_COOKIE["dark_mode"]);
 }
 
 /**

database/migrations/2014_10_12_000000_create_users_table.php

@@ -23,7 +23,6 @@ class CreateUsersTable extends Migration
             $table->string('email')->unique(); // would have to be nullable if we supported login via providers that don't give us e-mail
             $table->string('password')->nullable(); // null if registered via provider and not set a pw yet
             $table->boolean('confirmed')->default(false); // set to 1 after e-mail is verified
-            $table->boolean('dark_mode')->default(false);
             $table->rememberToken();
         });
     }

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;
+    }
+}

resources/views/layouts/app.blade.php

@@ -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>

resources/views/layouts/main-nav.blade.php

@@ -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>
 

resources/views/layouts/nav-buttons.blade.php

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

resources/views/profile/edit-account.blade.php

@@ -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">

routes/web.php

@@ -69,3 +69,12 @@ Route::group(['middleware' => 'auth'], function () {
         Route::get('forget-social-login/{id}', 'AccountController@forgetSocialLogin')->name('forget-identity');
     });
 });
+
+Route::post('toggle-dark-mode', function () {
+    if (dark_mode()) {
+        setcookie('dark_mode', '0', time() - 1);
+    } else {
+        setcookie('dark_mode', '1');
+    }
+    return redirect()->back();
+})->name('toggle-dark-mode');