Update dark mode detection

assets/js/detect-dark-mode.js

@@ -1,8 +1,43 @@
-// Retrieve the value of the 'color-mode' key from local storage
-var colorMode = localStorage.getItem('color-mode');
+// Function to get the value of a cookie by name
+function getCookie(name) {
+  const cookies = document.cookie.split('; ');
+  for (const cookie of cookies) {
+    const [key, value] = cookie.split('=');
+    if (key === name) {
+      return value;
+    }
+  }
+  return null;
+}
+
+// Function to set a cookie
+function setCookie(name, value, days) {
+  let expires = '';
+  if (days) {
+    const date = new Date();
+    date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
+    expires = `; expires=${date.toUTCString()}`;
+  }
+  document.cookie = `${name}=${value || ''}${expires}; path=/`;
+}
+
+// Retrieve the value of the 'color-mode' cookie
+var colorMode = getCookie('color-mode');
 
 // Check if the value is valid and set it to 'auto' if not
 if (!colorMode || (colorMode !== 'light' && colorMode !== 'dark')) {
   colorMode = 'auto';
-  localStorage.setItem('color-mode', colorMode);
+  setCookie('color-mode', colorMode, 365); // Set the cookie to expire in 1 year
+}
+
+// If color mode is 'auto', detect the user's color scheme
+if (colorMode === 'auto') {
+  const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+  if (prefersDarkScheme) {
+    document.body.classList.add('dark');
+  }
+} else if (colorMode === 'dark') {
+  if (!document.body.classList.contains('dark')) {
+    document.body.classList.add('dark');
+  }
 }

resources/views/layouts/sidebar.blade.php

@@ -1208,6 +1208,10 @@ MODAL; // <-- Indentation breaks my code editor :/
         </div>
     </div>
 
+    @if($colorMode == 'auto')
+        <script src="{{asset('assets/js/detect-dark-mode.js')}}"></script>
+    @endif
+
     {{-- Unused. Download for removed PNG QR Code generation feature. --}}
     {{-- <script>
         document.addEventListener("DOMContentLoaded", function() {
@@ -1235,8 +1239,6 @@ MODAL; // <-- Indentation breaks my code editor :/
 
     @stack('sidebar-scripts')
 
-    {{-- <script src="{{ asset('assets/js/detect-dark-mode.js') }}"></script> --}}
-
     <script>
     document.addEventListener('livewire:navigated', () => {
         var collapseElement = document.getElementById("admin-section");