From c63773aa43b9e871e2af4a0f133dae338f850e74 Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 13 Jan 2025 13:53:10 -0500
Subject: [PATCH 1/2] fix print preview in dark mode

---
 .changeset/selfish-coins-wash.md              |  5 ++++
 .../layout/EvidenceDefaultLayout.svelte       | 29 ++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/selfish-coins-wash.md

diff --git a/.changeset/selfish-coins-wash.md b/.changeset/selfish-coins-wash.md
new file mode 100644
index 0000000000..3e59fefeac
--- /dev/null
+++ b/.changeset/selfish-coins-wash.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+fixes print preview in dark mode
diff --git a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
index b550ea52f5..01580290a5 100644
--- a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
+++ b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
@@ -135,7 +135,8 @@
 		console.debug('[fix-tprotocol-service-worker] Service Worker registered', { registration });
 	});
 
-	const { syncDataThemeAttribute, cycleAppearance } = getThemeStores();
+	const { syncDataThemeAttribute, cycleAppearance, selectedAppearance, setAppearance } =
+		getThemeStores();
 
 	onMount(() => {
 		/** @param {KeyboardEvent} e */
@@ -149,6 +150,32 @@
 	});
 
 	onMount(() => syncDataThemeAttribute(document.querySelector('html')));
+
+	//handles printing in dark mode
+	onMount(() => {
+		let currentTheme;
+
+		//add event listner for print, switch darkmode to light mode
+		window.addEventListener('beforeprint', () => {
+			currentTheme = $selectedAppearance;
+			if ($selectedAppearance === 'dark') {
+				setAppearance('light');
+			}
+		});
+		//when finished printing return to previous mode
+		window.addEventListener('afterprint', () => {
+			if (currentTheme === 'dark') {
+				setAppearance('dark');
+			} else if (currentTheme === 'system') {
+				setAppearance('system');
+			}
+		});
+
+		return () => {
+			window.removeEventListener('beforeprint', () => {});
+			window.removeEventListener('afterprint', () => {});
+		};
+	});
 </script>
 
 <slot />

From ac31dfdc39cb48e1c7548450777f9433c499f9dd Mon Sep 17 00:00:00 2001
From: kwongz <kyle.wong917@gmail.com>
Date: Mon, 13 Jan 2025 16:43:47 -0500
Subject: [PATCH 2/2] added removal of event listeners

---
 .../layout/EvidenceDefaultLayout.svelte       | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
index 01580290a5..16d68da7a5 100644
--- a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
+++ b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte
@@ -135,8 +135,13 @@
 		console.debug('[fix-tprotocol-service-worker] Service Worker registered', { registration });
 	});
 
-	const { syncDataThemeAttribute, cycleAppearance, selectedAppearance, setAppearance } =
-		getThemeStores();
+	const {
+		syncDataThemeAttribute,
+		cycleAppearance,
+		selectedAppearance,
+		setAppearance,
+		activeAppearance
+	} = getThemeStores();
 
 	onMount(() => {
 		/** @param {KeyboardEvent} e */
@@ -155,25 +160,25 @@
 	onMount(() => {
 		let currentTheme;
 
-		//add event listner for print, switch darkmode to light mode
-		window.addEventListener('beforeprint', () => {
-			currentTheme = $selectedAppearance;
+		const beforePrintHandler = () => {
+			currentTheme = $activeAppearance;
 			if ($selectedAppearance === 'dark') {
 				setAppearance('light');
 			}
-		});
-		//when finished printing return to previous mode
-		window.addEventListener('afterprint', () => {
+		};
+
+		const afterPrintHandler = () => {
 			if (currentTheme === 'dark') {
 				setAppearance('dark');
-			} else if (currentTheme === 'system') {
-				setAppearance('system');
 			}
-		});
+		};
+
+		window.addEventListener('beforeprint', beforePrintHandler);
+		window.addEventListener('afterprint', afterPrintHandler);
 
 		return () => {
-			window.removeEventListener('beforeprint', () => {});
-			window.removeEventListener('afterprint', () => {});
+			window.removeEventListener('beforeprint', beforePrintHandler);
+			window.removeEventListener('afterprint', afterPrintHandler);
 		};
 	});
 </script>