Add dark mode [db]

app/Http/Controllers/AccountController.php

@@ -38,6 +38,7 @@ 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,6 +33,7 @@ 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
@@ -62,7 +63,7 @@ class User extends BaseModel implements
      * @var array
      */
     protected $fillable = [
-        'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed'
+        'name', 'title', 'email', 'password', 'bio', 'website', 'confirmed', 'dark_mode'
     ];
 
     /**

app/helpers.php

@@ -32,6 +32,10 @@ function faker() {
     return $fac = Faker\Factory::create();
 }
 
+function dark_mode() {
+    return user() !== NULL && user()->dark_mode;
+}
+
 /**
  * Recursively expand validation rules
  *

database/migrations/2014_10_12_000000_create_users_table.php

@@ -23,6 +23,7 @@ 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();
         });
     }

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

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,7 @@
   <script src="{{ asset('js/app.js') }}" defer></script>
 
   <!-- Styles -->
-  <link href="{{ asset('css/app.css') }}" rel="stylesheet">
+  <link href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" rel="stylesheet">
   <link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">
 </head>
 <body>

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

@@ -1,9 +1,9 @@
 {{-- 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 src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" aria-hidden=true alt="LOGO" height="32px" style="margin: -10px 0" class="mr-2">{{--
       --}}datatable.directory
     </a>
 

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

@@ -16,6 +16,11 @@
         <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">
       {!! Widget::header(2, 'Identifiers') !!}

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