chore: fix ssr flash

JoeyMckenzie · JoeyMckenzie · commit 5653f9c2a491 · 2025-05-14T17:15:52.000-07:00
diff --git a/resources/js/components/AppearanceTabs.vue b/resources/js/components/AppearanceTabs.vue
@@ -4,7 +4,7 @@ import { useCookies } from "@vueuse/integrations/useCookies";
 import { Monitor, Moon, Sun } from "lucide-vue-next";
 import { watchEffect } from "vue";
 
-const { store } = useColorMode({});
+const { store } = useColorMode();
 const cookies = useCookies(["appearance"]);
 const tabs = [
     { value: "light", Icon: Sun, label: "Light" },
diff --git a/resources/js/ssr.ts b/resources/js/ssr.ts
@@ -39,17 +39,16 @@ createServer(page =>
                 // @ts-expect-error: global will be available
                 globalThis.route = route;
             }
+
+            const cookie = useCookies(["appearance"]);
+            const { store } = useColorMode();
+            const appearance: "light" | "dark" | "auto" | null = cookie.get("appearance") ?? null;
+
+            if (appearance) {
+                store.value = appearance;
+            }
             else {
-                const cookie = useCookies(["appearance"]);
-                const { store } = useColorMode();
-                const appearance: "light" | "dark" | "auto" | null = cookie.get("appearance") ?? null;
-
-                if (appearance) {
-                    store.value = appearance;
-                }
-                else {
-                    store.value = "auto";
-                }
+                store.value = "auto";
             }
 
             app.use(plugin);
diff --git a/resources/views/app.blade.php b/resources/views/app.blade.php
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'auto') == 'dark'])>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" @class(['dark' => ($appearance ?? 'auto') === 'dark'])>
 <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -9,9 +9,9 @@
         (function() {
             const appearance = '{{ $appearance ?? "auto" }}';
 
-            if (appearance === 'system') {
+            if (appearance === 'auto') {
                 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-                
+
                 if (prefersDark) {
                     document.documentElement.classList.add('dark');
                 }
