From 22f2617dd69fb1514d2ceb64251261a2d7b4365b Mon Sep 17 00:00:00 2001
From: Jordan Shatford <jordanshatford@live.com>
Date: Fri, 15 Mar 2024 14:13:45 +1100
Subject: [PATCH] feat: move initialize theme function to ui package

Signed-off-by: Jordan Shatford <jordanshatford@live.com>
---
 .changeset/quiet-masks-live.md                |  6 +++++
 .../src/lib/components/PageLayout.svelte      |  3 +--
 .../src/lib/components/PopupLayout.svelte     |  3 +--
 apps/extension/src/lib/theme.ts               | 14 ------------
 packages/ui/src/lib/components/theme/index.ts |  2 +-
 packages/ui/src/lib/components/theme/store.ts | 22 ++++++++++++-------
 packages/ui/src/lib/index.ts                  |  6 ++---
 7 files changed, 26 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/quiet-masks-live.md
 delete mode 100644 apps/extension/src/lib/theme.ts

diff --git a/.changeset/quiet-masks-live.md b/.changeset/quiet-masks-live.md
new file mode 100644
index 00000000..82789e79
--- /dev/null
+++ 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
index 525f4d6e..d1624abf 100644
--- 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
index fa6808f9..0de751a9 100644
--- 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
deleted file mode 100644
index c0b179c8..00000000
--- a/apps/extension/src/lib/theme.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function initializeTheme(override?: 'dark' | 'light'): void {
-	// Get preferred color scheme based on user.
-	let isDark = window?.matchMedia?.('(prefers-color-scheme: dark)')?.matches;
-	// Use override if provided to function.
-	if (override) {
-		isDark = override === 'dark';
-	}
-	// Add class to document so TailwindCSS knows the theme.
-	if (isDark) {
-		document.querySelector('html')?.classList.add('dark');
-	} else {
-		document.querySelector('html')?.classList.remove('dark');
-	}
-}
diff --git a/packages/ui/src/lib/components/theme/index.ts b/packages/ui/src/lib/components/theme/index.ts
index 26ef9731..a8dc6f1d 100644
--- 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
index 366398b9..1dcf3050 100644
--- 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
index fd987076..0a33c59f 100644
--- 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';