fix: save user theme to settingsStore (#107)

Closes #78
fmaclen · Jul 25, 2024 · 2f8b4cb · 2f8b4cb
1 parent dbea36b
commit 2f8b4cb
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 14 deletions.
diff --git a/src/app.html b/src/app.html
@@ -1,14 +1,24 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<link rel="stylesheet" href="/fonts/inter/inter.css">
-		<link rel="stylesheet" href="/fonts/jetbrains-mono/jetbrains-mono.css">
+		<link rel="stylesheet" href="/fonts/inter/inter.css" />
+		<link rel="stylesheet" href="/fonts/jetbrains-mono/jetbrains-mono.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 		<title>Hollama</title>
 		%sveltekit.head%
 	</head>
+	<script>
+		// We check and apply the color theme preference on initial load
+		// to prevent a flash of unstyled content
+		let theme = JSON.parse(localStorage.getItem('hollama-settings'))?.userTheme;
+		if (theme) document.documentElement.setAttribute('data-color-theme', theme);
+		else {
+			theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+			document.documentElement.setAttribute('data-color-theme', theme);
+		}
+	</script>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>

diff --git a/src/lib/store.ts b/src/lib/store.ts
@@ -44,6 +44,7 @@ export interface Settings {
 	ollamaServer: string | null;
 	ollamaModel: string | null;
 	ollamaModels: OllamaModel[];
+	userTheme?: 'light' | 'dark';
 }
 
 export enum StorageKey {

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
 	import { page } from '$app/stores';
 	import { Brain, MessageSquareText, Settings2, Sun, Moon } from 'lucide-svelte';
 
 	import '../app.pcss';
+	import { settingsStore } from '$lib/store';
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
 
 	$: pathname = $page.url.pathname;
 	const SITEMAP = [
@@ -13,19 +15,20 @@
 		['/settings', 'Settings']
 	];
 
-	let theme = 'light';
+	$: theme = $settingsStore?.userTheme;
+
+	onMount(() => {
+		if (!$settingsStore || !browser || theme) return;
+		$settingsStore.userTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+			? 'dark'
+			: 'light';
+	});
 
 	function toggleTheme() {
 		theme = theme === 'light' ? 'dark' : 'light';
 		document.documentElement.setAttribute('data-color-theme', theme);
+		if ($settingsStore) $settingsStore.userTheme = theme;
 	}
-
-	onMount(() => {
-		// Set initial theme based on user's browser preference
-		const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		theme = prefersDark ? 'dark' : 'light';
-		document.documentElement.setAttribute('data-color-theme', theme);
-	});
 </script>
 
 <svelte:head>

diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
@@ -22,11 +22,12 @@
 	let ollamaModel = $settingsStore?.ollamaModel || '';
 	let ollamaTagResponse: OllamaTagResponse | null = null;
 
-	$: settingsStore.set({
+	$: settingsStore.update((settings) => ({
+		...settings,
 		ollamaServer,
 		ollamaModels: ollamaTagResponse?.models || [],
 		ollamaModel
-	});
+	}));
 
 	async function getModelsList(): Promise<void> {
 		try {