fix: remove state in theme changer (#145)

Author: dottmp

src/lib/components/navbar.test.ts

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/svelte';
 import { readable } from 'svelte/store';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { describe, expect, it, vi } from 'vitest';
 
 import Navbar from './navbar.svelte';
 
@@ -20,29 +20,6 @@ vi.mock('$app/paths', () => ({
 vi.mock('$lib/features/awesome-privacy/components/search.svelte');
 
 describe('Navbar component', () => {
-	// mock localStorage
-	beforeEach(() => {
-		globalThis.localStorage = (function () {
-			let store: Record<string, string> = {};
-
-			return {
-				getItem: (k: string) => (k in store ? store[k] : null),
-				setItem: (k: string, v: string) => {
-					store[k] = String(v);
-				},
-				removeItem: (k: string) => {
-					delete store[k];
-				},
-				clear: () => {
-					store = {};
-				},
-
-				length: 0,
-				key: (index: number) => Object.keys(store)[index] ?? null
-			} as Storage;
-		})();
-	});
-
 	describe('URLs', () => {
 		it('Privacy News link has correct href', () => {
 			render(Navbar);

src/lib/components/theme-change.svelte

@@ -7,18 +7,11 @@
 	import { THEMES } from '$lib/configs';
 	import { cn } from '$lib/utils/cn';
 
-	const DEFAULT = 'kanagawa';
-
 	type ThemeChangeProps = HTMLAttributes<HTMLDivElement> & {
 		variant?: 'dropdown' | 'select';
 	};
 
 	let { variant = 'dropdown', class: klass, ...props }: ThemeChangeProps = $props();
-
-	let defaultTheme = $state(
-		typeof window !== 'undefined' ? (localStorage.getItem('theme') ?? DEFAULT) : DEFAULT
-	);
-
 	onMount(() => {
 		themeChange(false);
 	});
@@ -52,18 +45,12 @@
 						class="theme-controller btn btn-block w-full justify-start capitalize btn-ghost sm:btn-sm"
 						aria-label={theme}
 						value={theme}
-						checked={theme === defaultTheme}
 					/>
 				</li>
 			{/each}
 		</ul>
 	{:else}
-		<select
-			data-choose-theme
-			class="select appearance-none"
-			aria-label="Select Theme"
-			bind:value={defaultTheme}
-		>
+		<select data-choose-theme class="select appearance-none" aria-label="Select Theme">
 			{#each THEMES as theme (theme)}
 				<option class="theme-controller" aria-label={theme} value={theme}>{theme}</option>
 			{/each}