From b76e655e38449a346adea077c98868eace794e51 Mon Sep 17 00:00:00 2001 From: Sean Morley Date: Wed, 17 Apr 2024 00:01:19 +0000 Subject: [PATCH] Update theme handling and add theme selection dropdown in Navbar.svelte --- src/app.html | 2 +- src/hooks.server.ts | 28 ++++++++++++++++++++++++++-- src/lib/components/Navbar.svelte | 13 +++++++++++++ src/lib/components/UserAvatar.svelte | 4 ++-- src/routes/+page.server.ts | 13 +++++++++++-- src/routes/login/+page.svelte | 2 +- tailwind.config.js | 2 +- 7 files changed, 55 insertions(+), 9 deletions(-) diff --git a/src/app.html b/src/app.html index d45252a..0efe6e0 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 4b48cbc..09bd7ea 100644 --- a/src/hooks.server.ts +++ b/src/hooks.server.ts @@ -1,7 +1,8 @@ import { lucia } from "$lib/server/auth"; import type { Handle } from "@sveltejs/kit"; +import { sequence } from '@sveltejs/kit/hooks'; -export const handle: Handle = async ({ event, resolve }) => { +export const authHook: Handle = async ({ event, resolve }) => { const sessionId = event.cookies.get(lucia.sessionCookieName); if (!sessionId) { event.locals.user = null; @@ -20,7 +21,7 @@ export const handle: Handle = async ({ event, resolve }) => { }); } if (!session) { - const sessionCookie = lucia.createBlankSessionCookie(); + const sessionCookie:any = lucia.createBlankSessionCookie(); event.cookies.set(sessionCookie.name, sessionCookie.value, { path: ".", ...sessionCookie.attributes, @@ -30,3 +31,26 @@ export const handle: Handle = async ({ event, resolve }) => { event.locals.session = session; return resolve(event); }; + +export const themeHook: Handle = async ({ event, resolve }) => { + let theme:String | null = null; + + const newTheme = event.url.searchParams.get("theme"); + const cookieTheme = event.cookies.get("colortheme"); + + if(newTheme) { + theme = newTheme; + } else if (cookieTheme) { + theme = cookieTheme; + } + if (theme) { + return await resolve(event, { + transformPageChunk: ({ html }) => + html.replace('data-theme=""', `data-theme="${theme}"`) + }) + } + + return await resolve(event); +} + +export const handle = sequence(authHook, themeHook); diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte index 1c4fa84..e1a9802 100644 --- a/src/lib/components/Navbar.svelte +++ b/src/lib/components/Navbar.svelte @@ -97,5 +97,18 @@ {/if} +
+
Themes
+ +
    +
    +
    • +
    • +
    +
+
diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte index 133562b..ba5628a 100644 --- a/src/lib/components/UserAvatar.svelte +++ b/src/lib/components/UserAvatar.svelte @@ -37,8 +37,8 @@
  • Profile
    • -
    -
    • + +
    • diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 4838575..35f69e4 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -3,7 +3,7 @@ import { fail, redirect } from "@sveltejs/kit"; import type { Actions, PageServerLoad } from "./$types"; -export const load: PageServerLoad = async (event) => { +export const load: PageServerLoad = async (event: { locals: { user: any; }; }) => { if (event.locals.user) return { user: event.locals.user, @@ -15,7 +15,7 @@ export const load: PageServerLoad = async (event) => { // handle the logout action export const actions: Actions = { - default: async (event) => { + logout: async (event) => { if (!event.locals.session) { return fail(401); } @@ -28,4 +28,13 @@ export const actions: Actions = { }); return redirect(302, "/login"); }, + setTheme: async ( { url, cookies }) => { + const theme = url.searchParams.get("theme"); + if (theme) { + cookies.set("colortheme", theme, { + path: "/", + maxAge: 60 * 60 * 24 * 365, + }); + } + }, }; diff --git a/src/routes/login/+page.svelte b/src/routes/login/+page.svelte index 1270f7b..d3d5eed 100644 --- a/src/routes/login/+page.svelte +++ b/src/routes/login/+page.svelte @@ -17,7 +17,7 @@ }); if (response.ok) { - // wait .5s before redirecting + errors = {}; goto("/login"); return; } diff --git a/tailwind.config.js b/tailwind.config.js index 2d48b1b..e17912a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -6,6 +6,6 @@ export default { }, plugins: [require("@tailwindcss/typography"), require("daisyui")], daisyui: { - themes: ["night"], + themes: ["light", "dark"], }, };