feat(web): simplify theme handling

Signed-off-by: Jordan Shatford <[email protected]>

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
 
 jobs:
   ci:
-    name: CI (Build, Lint, Format, Check)
+    name: CI (Lint, Format, Check, Build)
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:

apps/web/src/lib/config.ts

@@ -1,4 +1,4 @@
-import { AudioFormat, Theme } from '$lib/utils/types';
+import { AudioFormat } from '$lib/utils/types';
 
 export const env = {
 	serverAddress: import.meta.env.VITE_SERVER_ADDR as string
@@ -15,10 +15,6 @@ const config = {
 			format: AudioFormat.MP3
 		}
 	},
-	theme: {
-		key: 'theme',
-		default: Theme.DARK
-	},
 	github: 'https://github.com/jordanshatford/youtube-audio-downloader',
 	copyright: {
 		owner: 'Jordan Shatford',

apps/web/src/lib/stores/theme.ts

@@ -1,19 +1,19 @@
 import { browser } from '$app/environment';
 import { writable } from 'svelte/store';
-import { Theme } from '$lib/utils/types';
-import config from '$lib/config';
 
-function createThemeStore() {
-	const THEME_KEY = config.theme.key;
-	const DEFAULT_THEME_VALUE = config.theme.default;
+const THEME_KEY = 'theme';
 
-	const { subscribe, set, update } = writable(DEFAULT_THEME_VALUE);
+function createThemeStore() {
+	const { subscribe, set, update } = writable<'light' | 'dark'>('light');
 
 	if (browser) {
-		const data = localStorage?.getItem(THEME_KEY) as Theme;
+		const data = localStorage?.getItem(THEME_KEY) as 'light' | 'dark';
 
 		if (data) {
 			set(data);
+			if (data === 'dark') {
+				document.querySelector('html')?.classList.add('dark');
+			}
 		}
 	}
 
@@ -23,22 +23,17 @@ function createThemeStore() {
 		}
 	});
 
-	function applyDark() {
-		document.querySelector('html')?.classList.add(Theme.DARK);
-	}
-
 	function toggle() {
 		update((state) => {
-			state = state === Theme.DARK ? Theme.LIGHT : Theme.DARK;
+			state = state === 'dark' ? 'light' : 'dark';
 			return state;
 		});
-		document.querySelector('html')?.classList.toggle(Theme.DARK);
+		document.querySelector('html')?.classList.toggle('dark');
 	}
 
 	return {
 		subscribe,
 		set,
-		applyDark,
 		toggle
 	};
 }

apps/web/src/lib/utils/types.ts

@@ -10,11 +10,6 @@ export enum Status {
 
 export type Variant = 'default' | 'info' | 'success' | 'warning' | 'danger';
 
-export enum Theme {
-	LIGHT = 'light',
-	DARK = 'dark'
-}
-
 export enum AudioFormat {
 	MP3 = 'mp3',
 	AAC = 'aac',

apps/web/src/routes/+layout.svelte

@@ -6,17 +6,12 @@
 	import Loading from '$lib/components/Loading.svelte';
 	import { session } from '$lib/stores/session';
 	import { downloads } from '$lib/stores/downloads';
-	import { theme } from '$lib/stores/theme';
-	import { Theme } from '$lib/utils/types';
 
 	$: if ($session) {
 		downloads.setupStatusListener();
 	}
 
 	onMount(async () => {
-		if ($theme === Theme.DARK) {
-			theme.applyDark();
-		}
 		await session.setup();
 	});
 </script>