Fix & refactor dark mode

ikhsan3adi · Jun 29, 2024 · 3ccda61 · 3ccda61
1 parent 0154141
commit 3ccda61
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 28 deletions.
diff --git a/resources/js/app.js b/resources/js/app.js
@@ -1,5 +1,20 @@
 import './bootstrap';
 
+Alpine.store('darkMode', {
+    on: localStorage.getItem('isDark') === 'true',
+    init() {
+        this.on = localStorage.getItem('isDark') === 'true' ?? window.matchMedia('(prefers-color-scheme: dark)').matches;
+        if (this.on) document.documentElement.classList.add('dark');
+    },
+    toggle() {
+        this.on = !this.on;
+        localStorage.setItem('isDark', this.on);
+        this.on ?
+            document.documentElement.classList.add('dark') :
+            document.documentElement.classList.remove('dark');
+    }
+});
+
 let map;
 
 window.initializeMap = ({ onUpdate, location }) => {

diff --git a/resources/views/components/theme-toggle.blade.php b/resources/views/components/theme-toggle.blade.php
@@ -1,18 +1,9 @@
-<div x-data="{
-    toggle: () => {
-        if (darkMode === 'dark') {
-            darkMode = 'light';
-        } else {
-            darkMode = 'dark';
-        }
-    }
-}" @keydown.window.tab="toggle"
-  {{ $attributes->merge(['class' => 'flex items-center justify-center space-x-2']) }}>
-  <input id="theme-switcher" type="checkbox" name="switch" class="hidden" :checked="darkMode === 'dark'">
+<div @keydown.window.tab="toggle" {{ $attributes->merge(['class' => 'flex items-center justify-center space-x-2']) }}>
+  <input id="theme-switcher" type="checkbox" name="switch" class="hidden" :checked="$store.darkMode.on">
 
-  <button type="button" @click="toggle"
+  <button type="button" @click="$store.darkMode.toggle()"
     class="inline-flex items-center justify-center rounded-md p-2 text-gray-400 transition duration-150 ease-in-out hover:bg-gray-100 hover:text-gray-500 focus:outline-none dark:hover:bg-gray-700 dark:hover:text-gray-300">
-    <x-heroicon-o-moon class="h-5 w-5" x-show="darkMode === 'dark'" />
-    <x-heroicon-o-sun class="h-5 w-5" x-show="darkMode === 'light'" />
+    <x-heroicon-o-moon class="h-5 w-5" x-show="$store.darkMode.on" />
+    <x-heroicon-o-sun class="h-5 w-5" x-show="!$store.darkMode.on" />
   </button>
 </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -1,11 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="{
-    darkMode: localStorage.getItem('darkMode') || localStorage.setItem('darkMode', 'system')
-}" x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
-  x-bind:class="{
-      'dark': darkMode === 'dark' ||
-          (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  }">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
   <meta charset="utf-8">

diff --git a/resources/views/layouts/guest.blade.php b/resources/views/layouts/guest.blade.php
@@ -1,11 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" x-data="{
-    darkMode: localStorage.getItem('darkMode') || localStorage.setItem('darkMode', 'system')
-}" x-init="$watch('darkMode', val => localStorage.setItem('darkMode', val))"
-  x-bind:class="{
-      'dark': darkMode === 'dark' ||
-          (darkMode === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)
-  }">
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
 
 <head>
   <meta charset="utf-8">