fixed dark/light mode

resources/css/app.css

@@ -1,16 +1,6 @@
 @import "tailwindcss";
 
-/* Dark mode configuration */
-@media (prefers-color-scheme: dark) {
-  :root {
-    color-scheme: dark;
-  }
-}
-
-/* Custom Styles */
 @theme {
-  /* Enable class-based dark mode */
-  --color-scheme: class;
   --color-primary-50: #f0f9ff;
   --color-primary-100: #e0f2fe;
   --color-primary-200: #bae6fd;
@@ -36,6 +26,8 @@
   --color-accent-950: #4a044e;
 }
 
+@variant dark (&:where(.dark, .dark *));
+
 /* Utility Classes */
 .line-clamp-1 {
   display: -webkit-box;
@@ -50,7 +42,3 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-
-.btn-primary {
-  @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
-}

resources/views/components/ui/theme-toggle.blade.php

@@ -14,14 +14,27 @@
 </button>
 
 <script>
+    if (
+        localStorage.theme === 'dark' ||
+        (!('theme' in localStorage) &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches)
+    ) {
+        document.documentElement.classList.add('dark');
+    } else {
+        document.documentElement.classList.remove('dark');
+        document.documentElement.classList.add('light');
+    }
+
     function toggleTheme() {
         const html = document.documentElement;
         const isDark = html.classList.contains('dark');
 
         if (isDark) {
             html.classList.remove('dark');
+            html.classList.add('light');
             localStorage.setItem('theme', 'light');
         } else {
+            html.classList.remove('light');
             html.classList.add('dark');
             localStorage.setItem('theme', 'dark');
         }

resources/views/layouts/app.blade.php

@@ -9,30 +9,6 @@
 
     <title>{{ $title ?? config('app.name', 'BestTech') }}</title>
 
-    <!-- Dark Mode Script (Must be in head to prevent flash) -->
-    <script>
-        // Check for saved theme preference or default to light mode
-        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-            document.documentElement.classList.add('dark');
-        } else {
-            document.documentElement.classList.remove('dark');
-        }
-
-        // Toggle theme function
-        window.toggleTheme = function() {
-            const html = document.documentElement;
-            const isDark = html.classList.contains('dark');
-
-            if (isDark) {
-                html.classList.remove('dark');
-                localStorage.setItem('theme', 'light');
-            } else {
-                html.classList.add('dark');
-                localStorage.setItem('theme', 'dark');
-            }
-        }
-    </script>
-
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.bunny.net">
     <link href="https://fonts.bunny.net/css?family=inter:300,400,500,600,700,800" rel="stylesheet">