theme-toggle

realodix · Jan 30, 2025 · a4691f1 · a4691f1
1 parent 91fb51f
commit a4691f1
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 16 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,5 +1,42 @@
 import './../../vendor/power-components/livewire-powergrid/dist/powergrid';
 
+/**
+ * Dark mode toggle
+ */
+document.addEventListener('alpine:init', () => {
+    Alpine.store('darkMode', {
+        mode: 'light',
+
+        init() {
+            if (localStorage.theme === 'dark') { this.dark() }
+            else if (localStorage.theme === 'light') { this.light() }
+            else { this.system() }
+        },
+
+        dark() {
+            document.documentElement.classList.add('dark')
+            localStorage.theme = 'dark'
+            this.mode = 'dark'
+        },
+        system() {
+            if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                document.documentElement.classList.add('dark')
+            }
+            else {
+                document.documentElement.classList.remove('dark')
+            }
+            localStorage.theme = 'system'
+            this.mode = 'system'
+        },
+        light() {
+            document.documentElement.classList.remove('dark')
+            localStorage.theme = 'light'
+            this.mode = 'light'
+        }
+    })
+})
+
+
 /**
  * Copy short url to clipboard
  *

diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php
@@ -0,0 +1,37 @@
+<div class="bg-gray-950/5 dark:bg-dark-900 border border-border-200 dark:border-dark-800 rounded-full p-0.75 inline-flex">
+    <button x-data @click="$store.darkMode.light()"
+        class="rounded-full flex items-center justify-center focus:outline-none
+            text-gray-500 hover:text-gray-800 dark:hover:text-gray-300"
+        :class="$store.darkMode.mode == 'light' ? 'bg-white text-gray-800 hover:text-gray-600 inset-ring ring ring-gray-950/10 inset-ring-white/10' : ''"
+    >
+        <span class="text-base">
+            <svg class="size-6" fill="none" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="3.5" stroke="currentColor"></circle><path d="M14 8.5V6.5" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 10.1115L19.3032 8.69727" stroke="currentColor" stroke-linecap="round"></path><path d="M19.5 14L21.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M17.889 17.8885L19.3032 19.3027" stroke="currentColor" stroke-linecap="round"></path><path d="M14 21.5V19.5" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 19.3029L10.1108 17.8887" stroke="currentColor" stroke-linecap="round"></path><path d="M6.5 14L8.5 14" stroke="currentColor" stroke-linecap="round"></path><path d="M8.69663 8.69711L10.1108 10.1113" stroke="currentColor" stroke-linecap="round"></path></svg>
+        </span>
+    </button>
+
+    <button x-data @click="$store.darkMode.system()"
+        class="rounded-full flex items-center justify-center focus:outline-none
+            text-gray-500 hover:text-gray-800 dark:hover:text-gray-300
+            ml-2"
+        :class="$store.darkMode.mode == 'system' ?
+            'bg-white dark:bg-dark-700 text-gray-800 dark:text-gray-300 inset-ring ring ring-gray-950/10 inset-ring-white/10'
+            : ''"
+    >
+        <span class="text-base">
+            <svg class="size-6" fill="none" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V16.5C20.5 17.0523 20.0523 17.5 19.5 17.5H8.5C7.94772 17.5 7.5 17.0523 7.5 16.5V8.5Z" stroke="currentColor"></path><path d="M7.5 8.5C7.5 7.94772 7.94772 7.5 8.5 7.5H19.5C20.0523 7.5 20.5 7.94772 20.5 8.5V14.5C20.5 15.0523 20.0523 15.5 19.5 15.5H8.5C7.94772 15.5 7.5 15.0523 7.5 14.5V8.5Z" stroke="currentColor"></path><path d="M16.5 20.5V17.5H11.5V20.5M16.5 20.5H11.5M16.5 20.5H17.5M11.5 20.5H10.5" stroke="currentColor" stroke-linecap="round"></path></svg>
+        </span>
+    </button>
+
+    <button x-data @click="$store.darkMode.dark()"
+        class="rounded-full flex items-center justify-center focus:outline-none
+            text-gray-500 hover:text-gray-800 dark:hover:text-gray-300
+            ml-2"
+        :class="$store.darkMode.mode == 'dark' ?
+            'dark:bg-dark-700 dark:text-gray-300 inset-ring ring ring-gray-950/10 inset-ring-white/10'
+            : ''"
+    >
+        <span class="text-base">
+            <svg class="size-6" fill="none" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" ><path d="M10.5 9.99914C10.5 14.1413 13.8579 17.4991 18 17.4991C19.0332 17.4991 20.0176 17.2902 20.9132 16.9123C19.7761 19.6075 17.109 21.4991 14 21.4991C9.85786 21.4991 6.5 18.1413 6.5 13.9991C6.5 10.8902 8.39167 8.22304 11.0868 7.08594C10.7089 7.98159 10.5 8.96597 10.5 9.99914Z" stroke="currentColor" stroke-linejoin="round"></path><path d="M16.3561 6.50754L16.5 5.5L16.6439 6.50754C16.7068 6.94752 17.0525 7.29321 17.4925 7.35607L18.5 7.5L17.4925 7.64393C17.0525 7.70679 16.7068 8.05248 16.6439 8.49246L16.5 9.5L16.3561 8.49246C16.2932 8.05248 15.9475 7.70679 15.5075 7.64393L14.5 7.5L15.5075 7.35607C15.9475 7.29321 16.2932 6.94752 16.3561 6.50754Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M20.3561 11.5075L20.5 10.5L20.6439 11.5075C20.7068 11.9475 21.0525 12.2932 21.4925 12.3561L22.5 12.5L21.4925 12.6439C21.0525 12.7068 20.7068 13.0525 20.6439 13.4925L20.5 14.5L20.3561 13.4925C20.2932 13.0525 19.9475 12.7068 19.5075 12.6439L18.5 12.5L19.5075 12.3561C19.9475 12.2932 20.2932 11.9475 20.3561 11.5075Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path></svg>
+        </span>
+    </button>
+</div>
diff --git a/resources/views/layouts/auth.blade.php b/resources/views/layouts/auth.blade.php
@@ -8,11 +8,14 @@
 
     <title>@yield('title') | {{ config('app.name') }}</title>
 
+    @livewireStyles
     @vite(['resources/css/main.css', 'resources/js/app.js'])
 </head>
 
 <body class="@yield('css_class')">
     @yield('content')
+
+    @livewireScripts
 </body>
 
 </html>
diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
@@ -7,23 +7,27 @@
     <div class="layout-container flex px-4 sm:px-6 lg:px-8 h-16 justify-between" :class="{ 'sm:hidden': atTop }">
         <a class="navbar-brand logo" href="{{ url('/') }}">{{ config('app.name') }}</a>
 
-        <x-nav-dropdown/>
+        <div class="flex items-center">
+            <x-theme-toggle />
 
-        {{-- Mobile hamburger menu button --}}
-        <div class="-mr-2 flex items-center sm:hidden">
-            <button class="navbar-toggler rounded-md
-                    text-slate-400 hover:text-slate-500 focus:text-slate-500 hover:bg-slate-100 focus:bg-slate-100 focus:outline-none
-                    dark:text-dark-400 dark:hover:text-dark-400 dark:focus:text-dark-400 dark:bg-dark-800 dark:hover:bg-dark-700 dark:focus:bg-dark-700"
-                x-on:click="open = ! open"
-            >
-                <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
-                    <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex"
-                        stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
-                    </path>
-                    <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
-                        stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
-                </svg>
-            </button>
+            <x-nav-dropdown/>
+
+            {{-- Mobile hamburger menu button --}}
+            <div class="-mr-2 ml-6 flex items-center sm:hidden">
+                <button class="navbar-toggler rounded-md
+                        text-slate-400 hover:text-slate-500 focus:text-slate-500 hover:bg-gray-950/5 focus:bg-gray-950/5 focus:outline-none
+                        dark:text-dark-400 dark:hover:text-dark-400 dark:focus:text-dark-400 dark:bg-dark-800 dark:hover:bg-dark-700 dark:focus:bg-dark-700"
+                    x-on:click="open = ! open"
+                >
+                    <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
+                        <path :class="{'hidden': open, 'inline-flex': ! open }" class="inline-flex"
+                            stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16">
+                        </path>
+                        <path :class="{'hidden': ! open, 'inline-flex': open }" class="hidden" stroke-linecap="round"
+                            stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
 

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,7 @@ export default {
     presets: [
         presetPowerGrid,
     ],
+    darkMode: 'class',
     theme: {
         extend: {
             colors: {