feat: move initialize theme function to ui package

Signed-off-by: Jordan Shatford <[email protected]>
jordanshatford · Mar 15, 2024 · 22f2617 · 22f2617
1 parent 715dc85
commit 22f2617
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 30 deletions.
diff --git a/.changeset/quiet-masks-live.md b/.changeset/quiet-masks-live.md
@@ -0,0 +1,6 @@
+---
+"@yd/extension": minor
+"@yd/ui": minor
+---
+
+feat: move initialize theme function to ui package
diff --git a/apps/extension/src/lib/components/PageLayout.svelte b/apps/extension/src/lib/components/PageLayout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { IconButton, ExternalLinkIcon, Toasts, Footer } from '@yd/ui';
-	import { initializeTheme } from '~/lib/theme';
+	import { IconButton, ExternalLinkIcon, Toasts, Footer, initializeTheme } from '@yd/ui';
 	import { openWebsite } from '~/lib/website';
 	import config from '~/lib/config';
 

diff --git a/apps/extension/src/lib/components/PopupLayout.svelte b/apps/extension/src/lib/components/PopupLayout.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-	import { IconButton, ExternalLinkIcon, GearIcon } from '@yd/ui';
-	import { initializeTheme } from '~/lib/theme';
+	import { IconButton, ExternalLinkIcon, GearIcon, initializeTheme } from '@yd/ui';
 	import { openWebsite } from '~/lib/website';
 	import { getContextService } from '~/lib/context-service';
 	import PopupError from '~/lib/components/PopupError.svelte';

diff --git a/apps/extension/src/lib/theme.ts b/apps/extension/src/lib/theme.ts
diff --git a/packages/ui/src/lib/components/theme/index.ts b/packages/ui/src/lib/components/theme/index.ts
@@ -1,2 +1,2 @@
-export { theme } from './store';
+export { theme, initializeTheme } from './store';
 export { default as ThemeToggle } from './ThemeToggle.svelte';
diff --git a/packages/ui/src/lib/components/theme/store.ts b/packages/ui/src/lib/components/theme/store.ts
@@ -24,18 +24,24 @@ function getInferredDefaultTheme(): Theme {
 	}
 }
 
+// Initialize document with a given theme. Tailwind will handle styling dark or light.
+export function initializeTheme(override?: Theme): Theme {
+	const theme = override ? override : getInferredDefaultTheme();
+	if (theme === 'dark') {
+		document.querySelector('html')?.classList.add('dark');
+	} else {
+		document.querySelector('html')?.classList.remove('dark');
+	}
+	return theme;
+}
+
 function createThemeStore() {
 	const { subscribe, set, update } = writable<Theme>(getInferredDefaultTheme());
 
 	if (browser()) {
-		let data = localStorage?.getItem(THEME_LOCALSTORAGE_KEY) as Theme;
-		if (!data) {
-			data = getInferredDefaultTheme();
-		}
-		set(data);
-		if (data === 'dark') {
-			document.querySelector('html')?.classList.add('dark');
-		}
+		const data = localStorage?.getItem(THEME_LOCALSTORAGE_KEY) as Theme;
+		const theme = initializeTheme(data);
+		set(theme);
 	}
 
 	subscribe((value) => {

diff --git a/packages/ui/src/lib/index.ts b/packages/ui/src/lib/index.ts
@@ -1,8 +1,8 @@
 // Component exports
 export { NavBar } from './components/nav';
-export { ThemeToggle, theme } from './components/theme';
-export { Toast, Toasts, toast } from './components/toast';
-export { Title } from './components/typography';
+export * from './components/theme';
+export * from './components/toast';
+export * from './components/typography';
 export { default as ActionIcon } from './components/ActionIcon.svelte';
 export { default as Alert, type AlertVariants } from './components/Alert.svelte';
 export { default as Badge, type BadgeVariants } from './components/Badge.svelte';