Stop sending theme to server

src/hooks.server.ts

@@ -21,14 +21,12 @@ if (AUTO_MIGRATE === 'true') {
 await runSeeds();
 
 const handleThemeHook = (async ({ resolve, event }) => {
-	// Take the theme from the query parameters or from the cookies
+	// Take the theme from the cookies
-	const newTheme = event.url.searchParams.get('themeMode') as ThemeModeType;
 	const cookieTheme = event.cookies.get('themeMode') as ThemeModeType;
 
-	const theme: ThemeModeType = newTheme || cookieTheme;
+	if (cookieTheme) {
-	if (theme) {
 		return await resolve(event, {
-			transformPageChunk: ({ html }) => html.replace(/theme-base=""/g, `theme-base="${theme}"`)
+			transformPageChunk: ({ html }) => html.replace('theme-base=""', `theme-base="${cookieTheme}"`)
 		});
 	}
 

src/lib/components/Paginator.svelte

@@ -21,8 +21,7 @@
 		class="page-button page-prev {firstPage ? 'disabled' : ''}"
 		href={`?${makePageUrl($page.url.searchParams, pageNum - 1)}`}
 		tabindex={firstPage ? -1 : 0}
-		aria-label={$t('common.previous')}
+		aria-label={$t('common.previous')}>&lt;</a
-		aria-disabled={firstPage}>&lt;</a
 	>
 
 	{#each pageButtons as buttonNumber}
@@ -31,8 +30,7 @@
 			class="page-button page-link {active ? 'disabled' : ''}"
 			href={`?${makePageUrl($page.url.searchParams, buttonNumber)}`}
 			tabindex={active ? -1 : 0}
-			aria-label={`${$t('common.page')} ${buttonNumber}`}
+			aria-label={`${$t('common.page')} ${buttonNumber}`}>{buttonNumber}</a
-			aria-disabled={active}>{buttonNumber}</a
 		>
 	{/each}
 
@@ -40,8 +38,7 @@
 		class="page-button page-prev {lastPage ? 'disabled' : ''}"
 		tabindex={lastPage ? -1 : 0}
 		href={`?${makePageUrl($page.url.searchParams, pageNum + 1)}`}
-		aria-label={$t('common.next')}
+		aria-label={$t('common.next')}>&gt;</a
-		aria-disabled={lastPage}>&gt;</a
 	>
 </nav>
 

src/lib/constants.ts

@@ -2,3 +2,4 @@ export const ALLOWED_IMAGES = ['image/png', 'image/jpg', 'image/jpeg'];
 export const OAUTH2_MAX_REDIRECTS = 5;
 export const OAUTH2_MAX_URLS = 1;
 export const MAX_FILE_SIZE_MB = 10;
+export const THEME_COOKIE_MAX_AGE = 60 * 60 * 24 * 30;

src/lib/theme-mode.ts

@@ -1,6 +1,7 @@
 import { browser } from '$app/environment';
 import { onMount } from 'svelte';
 import { writable } from 'svelte/store';
+import { THEME_COOKIE_MAX_AGE } from './constants';
 
 export type ThemeModeType = 'light' | 'dark';
 
@@ -14,15 +15,8 @@ export const themeMode = writable<ThemeModeType>('light', (set) => {
  * Send a theme to the server so that it can be saved as a cookie.
  * @param theme - theme to send to server
  */
-export const forwardThemeToServer = async (theme: ThemeModeType) =>
+export const setThemeCookie = async (theme: ThemeModeType) =>
-	fetch(`/?/setTheme&themeMode=${theme}`, {
+	(document.cookie = `themeMode=${theme}; path=/; SameSite=Lax; Max-Age=${THEME_COOKIE_MAX_AGE}`);
-		method: 'POST',
-		body: new FormData(),
-		credentials: 'include',
-		headers: {
-			'x-sveltekit-action': 'true'
-		}
-	});
 
 export const forwardInitialTheme = () =>
 	onMount(() => {
@@ -40,7 +34,7 @@ export const forwardInitialTheme = () =>
 
 		const unsubscribeForward = themeMode.subscribe(async (theme) => {
 			document.documentElement.setAttribute('theme-base', theme);
-			await forwardThemeToServer(theme);
+			await setThemeCookie(theme);
 		});
 
 		uaTheme?.addEventListener?.('change', uaSetter);

src/routes/+page.server.ts

@@ -1,4 +1,5 @@
 import { env } from '$env/dynamic/private';
+import { THEME_COOKIE_MAX_AGE } from '$lib/constants.js';
 import { redirect } from '@sveltejs/kit';
 
 export const actions = {
@@ -7,8 +8,8 @@ export const actions = {
 		const themeMode = url.searchParams.get('themeMode');
 		if (themeMode) {
 			cookies.set('themeMode', themeMode, {
-				maxAge: 60 * 60 * 24 * 365,
+				maxAge: THEME_COOKIE_MAX_AGE,
-				httpOnly: true,
+				httpOnly: false,
 				secure: env.SESSION_SECURE === 'true',
 				sameSite: 'lax',
 				path: '/'