Add manual dark/light mode toggle to the user menu

brufdev · brufdev · commit a46e8529984c · 2025-10-20T12:39:52.000+01:00
diff --git a/resources/css/app.css b/resources/css/app.css
@@ -1,5 +1,7 @@
 @import 'tailwindcss';
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 
diff --git a/resources/views/components/icons/moon.blade.php b/resources/views/components/icons/moon.blade.php
@@ -0,0 +1,4 @@
+<svg {{ $attributes }} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
+        d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z" />
+</svg>
diff --git a/resources/views/components/layouts/app.blade.php b/resources/views/components/layouts/app.blade.php
@@ -1,16 +1,34 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+<html
+    lang="{{ str_replace('_', '-', app()->getLocale()) }}"
+    x-data="{ darkMode: document.documentElement.classList.contains('dark') }"
+    x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
+    x-bind:class="{ 'dark': darkMode }"
+>
 
 <head>
+    <script>
+        (function() {
+            const darkMode = localStorage.getItem('darkMode');
+            const windowPrefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+            if (darkMode === 'true' || (darkMode === null && windowPrefersDarkMode)) {
+                document.documentElement.classList.add('dark');
+            } else {
+                document.documentElement.classList.remove('dark');
+            }
+        })();
+    </script>
+
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
+    <meta name="apple-mobile-web-app-title" content="Many Notes">
     <title>{{ $title ?? 'Many Notes' }}</title>
     <link rel="icon" type="image/png" href="/assets/icon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/assets/icon-32x32.png" sizes="32x32">
     <link rel="icon" type="image/svg+xml" href="/assets/icon.svg" sizes="any">
     <link rel="shortcut icon" href="/assets/favicon.ico">
     <link rel="apple-touch-icon" href="/assets/icon-180x180.png" sizes="180x180">
-    <meta name="apple-mobile-web-app-title" content="Many Notes">
     <link rel="manifest" href="/manifest.json">
 
     @vite('resources/css/app.css')
diff --git a/resources/views/livewire/layout/userMenu.blade.php b/resources/views/livewire/layout/userMenu.blade.php
@@ -81,6 +81,19 @@
                 </x-menu.itemLink>
             </x-menu.close>
 
+            <x-menu.item @click="darkMode = !darkMode">
+                <span class="flex items-center justify-between w-full">
+                    <span class="flex items-center gap-2">
+                        <x-icons.moon class="w-4 h-4" />
+                        {{ __('Dark mode') }}
+                    </span>
+                    <label class="inline-flex items-center cursor-pointer">
+                        <input type="checkbox" class="sr-only peer" x-model="darkMode">
+                        <span class="relative w-9 h-5 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-primary-300 dark:peer-checked:bg-primary-600"></span>
+                    </label>
+                </span>
+            </x-menu.item>
+            
             <x-menu.itemDivider></x-menu.itemDivider>
 
             @if (auth()->user()->isAdmin())
