Merge pull request #59 from NDruce/extension/dark_mode_fix

Dark Mode fix
CriticalMoments · Apr 19, 2024 · b452f32 · b452f32
2 parents e31fe3e + 33ad12b
commit b452f32
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 18 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,9 +7,8 @@ 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,
@@ -38,18 +37,3 @@ const setSession: Handle = async ({ event, resolve }) => {
     },
   })
 }
-
-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>