From 00200ffbc441fb9449b3b5e523f8b36a7d44309c Mon Sep 17 00:00:00 2001 From: Charl Best Date: Fri, 15 Mar 2024 18:41:31 +0000 Subject: [PATCH] Dark theme selector --- src/app.html | 2 +- src/hooks.server.ts | 18 +++++- .../(admin)/account/(menu)/+layout.svelte | 6 +- .../(admin)/account/(menu)/theme.svelte | 56 +++++++++++++++++++ tailwind.config.js | 4 +- 5 files changed, 81 insertions(+), 5 deletions(-) create mode 100644 src/routes/(admin)/account/(menu)/theme.svelte diff --git a/src/app.html b/src/app.html index 101c87ba..9a0f5b64 100644 --- a/src/app.html +++ b/src/app.html @@ -1,5 +1,5 @@ - + diff --git a/src/hooks.server.ts b/src/hooks.server.ts index 76c2b8a7..f222db69 100644 --- 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 index 7b652d7b..fe51fcd7 100644 --- 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 @@
  • - Sign Out + +
    • +
  • + Sign Out
    • diff --git a/src/routes/(admin)/account/(menu)/theme.svelte b/src/routes/(admin)/account/(menu)/theme.svelte new file mode 100644 index 00000000..c0601909 --- /dev/null +++ b/src/routes/(admin)/account/(menu)/theme.svelte @@ -0,0 +1,56 @@ + + +
    +
    + + + + + + + + + +
    +
    diff --git a/tailwind.config.js b/tailwind.config.js index 0a8cfbb7..74cf2793 100644 --- 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' ], } }