app/helpers.php

@@ -32,6 +32,10 @@ function faker() {
     return $fac = Faker\Factory::create();
 }
 
+function dark_mode() {
+    return isset($_COOKIE["dark_mode"]);
+}
+
 /**
  * Recursively expand validation rules
  *

public/mix-manifest.json

@@ -1,4 +1,5 @@
 {
     "/js/app.js": "/js/app.js",
-    "/css/app.css": "/css/app.css"
+    "/css/app.css": "/css/app.css",
+    "/css/app-dark.css": "/css/app-dark.css"
 }

resources/assets/js/app.js

@@ -65,6 +65,42 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
   }
 })
 
+$(function () {
+  // theme switcher without reloading
+
+  let themeStyle = $('#theme-style');
+  const lightURL = themeStyle.data('light-url');
+  const darkURL = themeStyle.data('dark-url');
+  const navbar = $('.page-navbar');
+  const logo = $('#navbar-logo');
+
+  window.toggleDarkMode = function () {
+    let newStyle = document.createElement('link');
+    newStyle.rel = 'stylesheet';
+    if (themeStyle.attr('href') === lightURL) {
+      newStyle.href = darkURL;
+      navbar.removeClass('navbar-light');
+      navbar.addClass('navbar-dark');
+      logo.attr('src', logo.data('src-dark'));
+
+      document.cookie = "dark_mode=1";
+    } else {
+      newStyle.href = lightURL;
+      navbar.removeClass('navbar-dark');
+      navbar.addClass('navbar-light');
+      logo.attr('src', logo.data('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);
+    themeStyle.on('load', () => oldThemeStyle.remove());
+    $(document.head).append(themeStyle);
+  };
+});
+
 window.Vue = require('vue');
 
 Vue.component('column-editor', require('./components/ColumnEditor.vue'));

resources/assets/sass/app-dark.scss

@@ -0,0 +1,30 @@
+// Variables
+$theme: dark;
+
+@import "bootstrap";
+
+html {
+    overflow-y: scroll;
+}
+
+@import "helpers";
+@import "fa-utils";
+@import "block-collapse";
+@import "form-help";
+
+@import "bootstrap-customizations/paginate";
+@import "bootstrap-customizations/card";
+@import "bootstrap-customizations/tooltip";
+@import "bootstrap-customizations/navbar";
+@import "bootstrap-customizations/footer";
+@import "bootstrap-customizations/link";
+@import "bootstrap-customizations/border";
+@import "bootstrap-customizations/button";
+@import "bootstrap-customizations/responsive";
+@import "bootstrap-customizations/typography";
+
+.bio-table {
+    td {
+        padding-top: dist(2);
+    }
+}

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

@@ -39,3 +39,7 @@
 	min-width: 1.5rem;
 	text-align:center;
 }
+
+.card .auth-footer {
+	background-color: $body-bg;
+}

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

@@ -2,5 +2,5 @@
 .page-footer {
 	font-size: 95%;
 	background: $body-bg;
-	border-top: 2px dotted $gray-200;
+	border-top: 2px dotted $footer-separator-color;
 }

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

@@ -1,6 +1,6 @@
 // layout tweaks
 .page-navbar {
-	background: white;
+	background: $navbar-bg;
 	border-bottom: 1px solid $primary;
 
 	box-shadow: 0 -3px 8px rgba(black, 1);
@@ -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/assets/sass/bootstrap-customizations/_variables.scss

@@ -25,3 +25,60 @@ $tooltip-arrow-color: $tooltip-bg;
 
 $pagination-padding-y-sm: dist(1);
 $pagination-padding-x-sm: dist(3);
+
+$navbar-bg: white;
+
+$footer-separator-color: $gray-200;
+
+$theme: light !default;
+@if $theme == dark {
+    // dark mode overrides
+
+    $body-bg: $gray-900;
+    $body-color: $gray-100;
+    $text-muted: $gray-500;
+    $link-color: lighten($primary, 15%);
+    $link-hover-color: lighten($primary, 20%);
+
+    $card-bg: $gray-800;
+    $list-group-bg: $gray-800;
+    $list-group-hover-bg: $gray-700;
+    $list-group-disabled-color: $gray-400;
+    $list-group-action-color: $gray-200;
+    $list-group-action-hover-color: $gray-200;
+    $list-group-action-active-bg: $gray-600;
+    $list-group-action-active-color: $gray-100;
+
+    $tooltip-color: rgba($white, 0.9);
+
+    $navbar-bg: lighten($gray-900, 2%);
+    $footer-separator-color: $gray-800;
+
+    $close-color: $white;
+
+    $input-bg: $gray-700;
+    $input-color: $gray-200;
+    $input-disabled-bg: $gray-900;
+    $input-border-color: $gray-600;
+    $input-focus-bg: $input-bg;
+    $input-focus-color: $input-color;
+    $input-group-addon-bg: $gray-800;
+    $input-group-addon-color: $input-color;
+    $input-group-addon-border-color: $input-border-color;
+
+    $custom-select-color: $input-color;
+    $custom-select-bg: $input-bg;
+    $custom-select-disabled-bg: $input-disabled-bg;
+    $custom-select-indicator-color: $gray-300;
+    $custom-select-border-color: $input-border-color;
+    $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23");
+
+    $dropdown-bg: $gray-700;
+    $dropdown-link-color: $gray-300;
+    $dropdown-link-hover-color: lighten($gray-300, 5%);
+    $dropdown-link-hover-bg: $gray-800;
+    $dropdown-link-disabled-color: $gray-500;
+    $dropdown-header-color: $gray-400;
+
+    $border-color: $gray-600;
+}

resources/views/auth/login.blade.php

@@ -31,7 +31,7 @@
             </form>
           </div>
 
-          <div class="card-footer bg-white">
+          <div class="card-footer auth-footer">
             <div class="form-group row mb-0">
               <span class="col-md-4 col-form-label text-md-right text-muted">…or authenticate with</span>
 

resources/views/auth/register.blade.php

@@ -37,7 +37,7 @@
             </form>
           </div>
 
-          <div class="card-footer bg-white text-muted">
+          <div class="card-footer auth-footer text-muted">
             You can also register by logging in with
             <a href="{{route('oauth-google-authorize')}}">Google</a>,
             <a href="{{route('oauth-github-authorize')}}">GitHub</a>,

resources/views/layouts/app.blade.php

@@ -14,7 +14,12 @@
   <script src="{{ asset('js/app.js') }}" defer></script>
 
   <!-- Styles -->
-  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+  <link
+    rel="stylesheet"
+    id="theme-style"
+    href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}"
+    data-light-url="{{ asset('css/app.css') }}"
+    data-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

@@ -1,9 +1,18 @@
 {{-- Global navbar --}}
 
-<nav class="navbar navbar-expand-md navbar-light page-navbar">
+<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.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"
+        data-src-light="/images/logo.svg"
+        data-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

@@ -17,6 +17,7 @@
         ', 'text-muted', false) !!}
     </div>
 
+
     <div class="col-md-10 mt-3">
       {!! Widget::header(2, 'Identifiers') !!}
 

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');

webpack.mix.js

@@ -29,4 +29,5 @@ mix.webpackConfig({
 });
 
 mix.js('resources/assets/js/app.js', 'public/js')
-   .sass('resources/assets/sass/app.scss', 'public/css');
+   .sass('resources/assets/sass/app.scss', 'public/css')
+   .sass('resources/assets/sass/app-dark.scss', 'public/css');