Dark theme selector

CriticalMoments · Mar 15, 2024 · 00200ff · 00200ff
1 parent 940ba38
commit 00200ff
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 5 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-theme="default">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/src/hooks.server.ts b/src/hooks.server.ts
@@ -7,8 +7,9 @@ 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"
 
-export const handle: Handle = async ({ event, resolve }) => {
+const setSession: Handle = async ({ event, resolve }) => {
   event.locals.supabase = createSupabaseServerClient({
     supabaseUrl: PUBLIC_SUPABASE_URL,
     supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
@@ -37,3 +38,18 @@ export const handle: 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)/+layout.svelte b/src/routes/(admin)/account/(menu)/+layout.svelte
@@ -2,6 +2,7 @@
   import "../../../../app.css"
   import { writable } from "svelte/store"
   import { setContext } from "svelte"
+  import Theme from "./theme.svelte"
 
   const adminSectionStore = writable("")
   setContext("adminSection", adminSectionStore)
@@ -135,7 +136,10 @@
       </li>
 
       <li class="mt-auto">
-        <a href="/account/sign_out" class="mt-auto text-base">Sign Out</a>
+        <Theme />
+      </li>
+      <li>
+        <a href="/account/sign_out" class="text-base">Sign Out</a>
       </li>
     </ul>
   </div>

diff --git a/src/routes/(admin)/account/(menu)/theme.svelte b/src/routes/(admin)/account/(menu)/theme.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { browser } from "$app/environment"
+
+  $: isDefault =
+    browser &&
+    document?.querySelector("html")?.getAttribute("data-theme") === "default"
+
+  function setTheme(event: Event) {
+    const theme = (event.target as HTMLInputElement).checked
+      ? "dark"
+      : "default"
+    document.querySelector("html")?.setAttribute("data-theme", theme)
+    document.cookie = `theme=${theme}; expires=Thu, 1 Dec 2050 12:00:00 UTC`
+  }
+</script>
+
+<div>
+  <div class="inline-grid grid-cols-2">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-4 w-4 m-1 col-start-1 row-start-1"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+      />
+    </svg>
+
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="h-4 w-4 m-1 col-start-2 row-start-1"
+      fill="none"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        stroke-width="2"
+        d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+      />
+    </svg>
+
+    <input
+      type="checkbox"
+      class="toggle bg-transparent col-start-1 row-start-1 col-span-2"
+      on:change={setTheme}
+      checked={!isDefault}
+    />
+  </div>
+</div>
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -11,7 +11,7 @@ export default {
   daisyui: {
     themes: [
       {
-        saasstartertheme: {
+        default: {
           "primary": "#180042",
           "primary-content": "#fefbf6",
           "secondary": "#c7b9f8",
@@ -25,7 +25,7 @@ export default {
           "success": "#37d399",
           "error": "#f77272",
         },
-      }
+      }, 'dark'
     ],
   }
 }