Added theme store with reactive context

Author: rohitpotato

src/components/Counter.svelte

@@ -2,6 +2,8 @@
 	export let counter: number = 0;
 </script>
 
-<div class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl">
+<div
+	class="mt-8 py-16 shadow-md flex items-center justify-center text-6xl dark:bg-dark-mode-gray dark:text-light-gray"
+>
 	{counter}
 </div>

src/components/Hero.svelte

@@ -8,11 +8,11 @@
 </script>
 
 <main class="pt-20 grid grid-cols-2 gap-12 pb-20">
-	<div class="">
-		<h1 class="text-5xl text-gray-600 font-light leading-tight">
+	<div>
+		<h1 class="text-5xl text-gray-600 dark:text-light-gray font-light leading-tight">
 			Increase your productivity exponentially.
 		</h1>
-		<h3 class="text-2xl mt-6 text-gray-600">
+		<h3 class="text-2xl mt-6 text-gray-600 dark:text-light-gray">
 			Use <KeyboardShortcut
 				on:onShortcutClick={openCommandPalette}
 				shortcuts={['⌘', 'K']}
@@ -21,9 +21,11 @@
 		</h3>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Keyboard Shorcuts</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Keyboard Shorcuts
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				Press or hold <KeyboardShortcut
 					shortcuts={['C', 'C']}
 					theme="secondary"
@@ -34,20 +36,24 @@
 		</div>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Conditional Actions</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Conditional Actions
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				This will only run when the counter is greater than 2.
 			</h3>
 		</div>
-		<div class="mt-4 flex items-center flex-col justify-center bg-slate-50 shadow text-xl p-20">
+		<div
+			class="mt-4 flex items-center flex-col justify-center bg-slate-50 dark:bg-gray-700 shadow text-xl p-20"
+		>
 			{#if counter < 3}
 				<div class:text-red-500={counter < 3}>
 					Just need {3 - counter} more
 				</div>
 			{/if}
 			{#if counter > 2}
-				<div class="mt-4">
+				<div class="mt-4 dark:text-light-gray">
 					Press <KeyboardShortcut
 						on:onShortcutClick={runConditionalAction}
 						shortcuts={['F', 'B', 'I']}
@@ -58,26 +64,30 @@
 		</div>
 	</div>
 	<div>
-		<h1 class="text-4xl text-gray-600 font-light leading-tight">Advanced Conditional Actions</h1>
+		<h1 class="text-4xl text-gray-600 dark:text-light-gray font-light leading-tight">
+			Advanced Conditional Actions
+		</h1>
 		<div class="mt-4">
-			<h3 class="text-lg mt-6 text-gray-600">
+			<h3 class="text-lg mt-6 text-gray-600 dark:text-light-gray">
 				You can run an action based on the current state of your command palette. Press <KeyboardShortcut
 					shortcuts={['C', 'I', 'A']}
 					theme="secondary"
 				/> to run this action
 			</h3>
 		</div>
 		<div class="mt-8">
-			<div class="text-lg">
+			<div class="text-lg dark:text-light-gray">
 				You must run <KeyboardShortcut
 					on:onShortcutClick={runConditionalAction}
 					shortcuts={['F', 'B', 'I']}
 					theme="secondary"
 				/> atleast once to enable this action
 			</div>
-			<div class="text-base mt-4">
+			<div class="text-base mt-4 dark:text-light-gray ">
 				Note: You can update your
-				<div class="inline text-xl font-bold p-1 rounded font-mono">paletteStore</div>
+				<div class="inline text-xl font-bold p-1 dark:text-light-gray rounded font-mono">
+					paletteStore
+				</div>
 				from anywhere!
 			</div>
 		</div>

src/components/KeyboardShortcut.svelte

@@ -13,7 +13,10 @@
 		});
 	};
 
-	$: bgColor = theme === 'primary' ? 'bg-gray-800 text-white' : 'bg-gray-100 shadow text-black';
+	$: bgColor =
+		theme === 'primary'
+			? 'bg-gray-800 dark:bg-dark-mode-gray text-white dark:text-light-gray'
+			: 'bg-gray-100 shadow text-black  dark:text-light-gray dark:bg-dark-mode-gray';
 </script>
 
 <button

src/components/Navbar.svelte

@@ -1,6 +1,23 @@
-<nav class="flex items-center justify-between shadow-sm  py-6 px-8">
+<script lang="ts">
+	import themeStore from '../store/themeStore';
+	const LIGHT = 'light';
+	const DARK = 'dark';
+
+	const handleThemeSwitch = () => {
+		const theme = localStorage.getItem('theme') || 'light';
+		const root = window.document.documentElement;
+		const isDark = theme === DARK;
+		root.classList.remove(theme);
+		root.classList.add(isDark ? LIGHT : DARK);
+		localStorage.setItem('theme', isDark ? LIGHT : DARK);
+		themeStore.set(isDark ? LIGHT : DARK);
+	};
+</script>
+
+<nav class="flex items-center justify-between shadow-sm  py-6 px-8 dark:bg-dark-mode-gray">
 	<a href="/" class="text-svelte-brand text-xl font-bold">Svelte Command Palette</a>
-	<div class="flex gap-12">
+	<div class="flex gap-12 dark:text-svelte-brand">
+		<button on:click={() => handleThemeSwitch()} type="button">Switch Theme</button>
 		<a href="/docs">Docs</a>
 		<a target="_blank" rel="noreferrer" href="https://github.com/rohitpotato/svelte-command-palette"
 			>Github</a

src/lib/components/CommandPalette.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy, onMount, afterUpdate } from 'svelte';
 	import { setContext as setThemeContext } from 'svelte';
+	import { writable } from 'svelte/store';
 	import { paletteStore } from '../store/PaletteStore';
 	import Portal from './Portal.svelte';
 	import ResultPanel from './ResultPanel.svelte';
@@ -58,29 +59,9 @@
 
 	// set themes to context to pass down to deeply nested components
 
-	setThemeContext(THEME_CONTEXT, {
-		inputClass,
-		overlayClass,
-		paletteWrapperInnerClass,
-		resultsContainerClass,
-		resultContainerClass,
-		optionSelectedClass,
-		titleClass,
-		subtitleClass,
-		descriptionClass,
-		keyboardButtonClass,
-		unstyled,
-		inputStyle: toCssString(inputStyle),
-		overlayStyle: toCssString(overlayStyle),
-		paletteWrapperInnerStyle: toCssString(paletteWrapperInnerStyle),
-		resultsContainerStyle: toCssString(resultsContainerStyle),
-		resultContainerStyle: toCssString(resultContainerStyle),
-		optionSelectedStyle: toCssString(optionSelectedStyle),
-		titleStyle: toCssString(titleStyle),
-		subtitleStyle: toCssString(subtitleStyle),
-		descriptionStyle: toCssString(descriptionStyle),
-		keyboardButtonStyle: toCssString(keyboardButtonStyle)
-	});
+	const themeStore = writable({});
+
+	setThemeContext(THEME_CONTEXT, themeStore);
 
 	const storeMethods = createStoreMethods();
 	const actionMap = createActionMap(commands);
@@ -216,6 +197,30 @@
 		if (!isPaletteVisible) {
 			isWrapperClickHandlerSet = false;
 		}
+
+		themeStore.set({
+			inputClass,
+			overlayClass,
+			paletteWrapperInnerClass,
+			resultsContainerClass,
+			resultContainerClass,
+			optionSelectedClass,
+			titleClass,
+			subtitleClass,
+			descriptionClass,
+			keyboardButtonClass,
+			unstyled,
+			inputStyle: toCssString(inputStyle),
+			overlayStyle: toCssString(overlayStyle),
+			paletteWrapperInnerStyle: toCssString(paletteWrapperInnerStyle),
+			resultsContainerStyle: toCssString(resultsContainerStyle),
+			resultContainerStyle: toCssString(resultContainerStyle),
+			optionSelectedStyle: toCssString(optionSelectedStyle),
+			titleStyle: toCssString(titleStyle),
+			subtitleStyle: toCssString(subtitleStyle),
+			descriptionStyle: toCssString(descriptionStyle),
+			keyboardButtonStyle: toCssString(keyboardButtonStyle)
+		});
 	});
 
 	onDestroy(() => {

src/lib/components/KeyboardButton.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Writable } from 'svelte/store';
 	import { THEME_CONTEXT } from '$lib/constants';
 	import type { themeContext } from '$lib/types';
 	import { createEventDispatcher, getContext } from 'svelte';
@@ -10,8 +11,8 @@
 		});
 	};
 
-	const themeContext: themeContext = getContext(THEME_CONTEXT);
-	const { unstyled, keyboardButtonClass, keyboardButtonStyle } = themeContext;
+	const themeContext: Writable<themeContext> = getContext(THEME_CONTEXT);
+	const { unstyled, keyboardButtonClass, keyboardButtonStyle } = $themeContext;
 </script>
 
 <button

src/lib/components/Result.svelte

@@ -5,13 +5,14 @@
 	import KeyboardButton from './KeyboardButton.svelte';
 	import { THEME_CONTEXT } from '../constants';
 	import type { action, themeContext } from '$lib/types';
+	import type { Writable } from 'svelte/store';
 
 	export let action: action;
 	let elRef: HTMLElement;
 	let isActive: boolean;
 	let formattedShortcut: Array<string[] | string> = [];
 
-	const themeContext: themeContext = getContext(THEME_CONTEXT);
+	const themeContext: Writable<themeContext> = getContext(THEME_CONTEXT);
 	const {
 		resultContainerClass,
 		unstyled,
@@ -24,7 +25,7 @@
 		subtitleStyle,
 		descriptionStyle,
 		optionSelectedStyle
-	} = themeContext;
+	} = $themeContext;
 
 	afterUpdate(() => {
 		if (action.actionId === $paletteStore.activeCommandId && elRef) {

src/lib/components/ResultPanel.svelte

@@ -5,14 +5,15 @@
 	import { getNonEmptyArray } from '../utils';
 	import { THEME_CONTEXT } from '../constants';
 	import type { commands, storeParams, themeContext } from '$lib/types';
+	import type { Writable } from 'svelte/store';
 
 	let actions: commands = [];
 	const unsubscribe = paletteStore.subscribe((value: storeParams) => {
 		actions = getNonEmptyArray(value.results);
 	});
 
-	const themeContext: themeContext = getContext(THEME_CONTEXT);
-	const { resultsContainerClass, unstyled, resultsContainerStyle } = themeContext;
+	const themeContext = getContext(THEME_CONTEXT) as Writable<themeContext>;
+	const { resultsContainerClass, unstyled, resultsContainerStyle } = $themeContext;
 
 	onDestroy(unsubscribe);
 </script>

src/routes/__layout.svelte

@@ -3,5 +3,21 @@
 	import '../app.css';
 </script>
 
+<svelte:head>
+	<script>
+		const getThemeFromLocalStorage = () => {
+			const theme = localStorage.getItem('theme') || 'light';
+			return theme;
+		};
+
+		const applyTheme = () => {
+			const theme = getThemeFromLocalStorage();
+			const root = window.document.documentElement;
+			root.classList.add(theme);
+		};
+		applyTheme();
+	</script>
+</svelte:head>
+
 <Navbar />
 <slot />