Dark mode

Icemont · Jan 7, 2023 · c05a523 · c05a523
1 parent aea2edb
commit c05a523
Show file tree

Hide file tree

Showing 7 changed files with 74 additions and 2 deletions.
diff --git a/app/Http/Controllers/ThemeController.php b/app/Http/Controllers/ThemeController.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Http\Controllers;
+
+use App\Models\User;
+use Illuminate\Http\RedirectResponse;
+use Illuminate\Http\Request;
+
+class ThemeController extends Controller
+{
+    public function __invoke(Request $request): RedirectResponse
+    {
+        /** @var User $user */
+        $user = auth()->user();
+
+        $user->dark_theme = ($request->get('theme') == 'dark');
+        $user->save();
+
+        return back();
+    }
+}
diff --git a/app/Models/User.php b/app/Models/User.php
@@ -34,6 +34,7 @@ class User extends Authenticatable implements MustVerifyEmail
         'phone',
         'business',
         'currency_id',
+        'dark_theme',
     ];
 
     /**
@@ -54,6 +55,7 @@ class User extends Authenticatable implements MustVerifyEmail
     protected $casts = [
         'email_verified_at' => 'datetime',
         'business' => BusinessCast::class,
+        'dark_theme' => 'boolean',
     ];
 
 

diff --git a/database/migrations/2023_01_07_190740_add_dark_theme_to_admin_users_table.php b/database/migrations/2023_01_07_190740_add_dark_theme_to_admin_users_table.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration {
+    public function up(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->boolean('dark_theme')->after('remember_token')->default(false);
+        });
+    }
+
+    public function down(): void
+    {
+        Schema::table('users', function (Blueprint $table) {
+            $table->dropColumn('dark_theme');
+        });
+    }
+};
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -19,7 +19,7 @@
         }
     </style>
 </head>
-<body class="theme-light">
+<body class="theme-{{ Auth::user()->dark_theme ? 'dark' : 'light' }}">
 @include('layouts.navigation')
 <div class="page">
     <div class="page-wrapper">

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -16,7 +16,7 @@
         }
     </style>
 </head>
-<body>
+<body class="theme-{{ Auth::user()?->dark_theme ? 'dark' : 'light' }}">
 <div class="font-sans text-gray-900 antialiased">
     {{ $slot }}
 </div>

diff --git a/resources/views/layouts/navigation.blade.php b/resources/views/layouts/navigation.blade.php
@@ -5,6 +5,25 @@
         </button>
         <x-application-logo class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3"/>
         <div class="navbar-nav flex-row order-md-last">
+            <div class="d-none d-md-flex">
+                <a href="{{ route('theme', ['theme' => 'dark']) }}" class="nav-link px-0 hide-theme-dark" title="{{ __('Enable dark mode') }}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                         stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z"/>
+                    </svg>
+                </a>
+                <a href="{{ route('theme', ['theme' => 'light']) }}" class="nav-link px-0 hide-theme-light" title="{{ __('Enable light mode') }}" data-bs-toggle="tooltip" data-bs-placement="bottom">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
+                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                         stroke-linejoin="round">
+                        <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                        <circle cx="12" cy="12" r="4"/>
+                        <path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7"/>
+                    </svg>
+                </a>
+            </div>
             <div class="nav-item dropdown">
                 <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown"
                    aria-label="{{ __('Open user menu') }}">

diff --git a/routes/web.php b/routes/web.php
@@ -8,9 +8,14 @@
 use App\Http\Controllers\InvoiceController;
 use App\Http\Controllers\PaymentMethodController;
 use App\Http\Controllers\ReportController;
+use App\Http\Controllers\ThemeController;
 use App\Http\Controllers\UserSettingsController;
 use Illuminate\Support\Facades\Route;
 
+Route::middleware(['auth'])->group(static function () {
+    Route::get('/theme', ThemeController::class)->name('theme');
+});
+
 Route::middleware(['auth', 'verified', 'filled'])->group(static function () {
     Route::get('/', DashboardController::class)->name('dashboard');