Dark Mode fix

CriticalMoments · Apr 18, 2024 · 4edc091 · 4edc091
1 parent e31fe3e
commit 4edc091
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 22 deletions.
diff --git a/src/app.html b/src/app.html
@@ -5,6 +5,12 @@
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     %sveltekit.head%
+    <script>
+      var ui_theme = localStorage.getItem("ui_theme");
+      if (ui_theme && ui_theme !== "default") {
+        document.querySelector("html").dataset.theme = ui_theme;
+      }
+    </script>
   </head>
   <body
     data-sveltekit-preload-data="hover"

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -7,19 +7,18 @@ import { PRIVATE_SUPABASE_SERVICE_ROLE } from "$env/static/private"
 import { createSupabaseServerClient } from "@supabase/auth-helpers-sveltekit"
 import { createClient } from "@supabase/supabase-js"
 import type { Handle } from "@sveltejs/kit"
-import { sequence } from "@sveltejs/kit/hooks"
 
-const setSession: Handle = async ({ event, resolve }) => {
+export const handle: Handle = async ({ event, resolve }) => {
   event.locals.supabase = createSupabaseServerClient({
     supabaseUrl: PUBLIC_SUPABASE_URL,
     supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
     event,
   })
 
   event.locals.supabaseServiceRole = createClient(
-    PUBLIC_SUPABASE_URL,
-    PRIVATE_SUPABASE_SERVICE_ROLE,
-    { auth: { persistSession: false } },
+      PUBLIC_SUPABASE_URL,
+      PRIVATE_SUPABASE_SERVICE_ROLE,
+      { auth: { persistSession: false } },
   )
 
   /**
@@ -37,19 +36,4 @@ const setSession: Handle = async ({ event, resolve }) => {
       return name === "content-range"
     },
   })
-}
-
-const insertTheme: Handle = async ({ event, resolve }) => {
-  const theme = event.cookies.get("theme")
-
-  return await resolve(event, {
-    transformPageChunk: ({ html }) => {
-      if (theme) {
-        html = html.replace('data-theme="default"', `data-theme="${theme}"`)
-      }
-      return html
-    },
-  })
-}
-
-export const handle = sequence(setSession, insertTheme)
+}
diff --git a/src/routes/(admin)/account/(menu)/theme.svelte b/src/routes/(admin)/account/(menu)/theme.svelte
@@ -10,7 +10,11 @@
       ? "dark"
       : "default"
     document.querySelector("html")?.setAttribute("data-theme", theme)
-    document.cookie = `theme=${theme}; expires=Thu, 1 Dec 2050 12:00:00 UTC`
+    if (theme !== "default") {
+      localStorage.setItem("ui_theme", theme)
+    } else {
+      localStorage.removeItem("ui_theme")
+    }
   }
 </script>