feat(wrapped): REAL LIVE PREVIEW

1 files changed, 8 insertions, 22 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 77e9f52c..8af195bc 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -32,7 +32,7 @@
 	let includeSpecials = false;
 	let includeRepeats = false;
 	let width = 980;
-	let forceDark = false;
+	let lightMode = false;
 	let highestRatedCount = 5;
 	let mounted = false;
 
@@ -45,7 +45,7 @@
 			$page.url.searchParams.set('includeSpecials', includeSpecials.toString());
 			$page.url.searchParams.set('includeRepeats', includeRepeats.toString());
 			$page.url.searchParams.set('width', width.toString());
-			$page.url.searchParams.set('forceDark', forceDark.toString());
+			$page.url.searchParams.set('lightMode', lightMode.toString());
 			$page.url.searchParams.set('highestRatedCount', highestRatedCount.toString());
 
 			history.replaceState(null, '', `?${$page.url.searchParams.toString()}`);
@@ -125,7 +125,7 @@
 			includeSpecials = $page.url.searchParams.get('includeSpecials') === 'true';
 			includeRepeats = $page.url.searchParams.get('includeRepeats') === 'true';
 			width = parseInt($page.url.searchParams.get('width') || '980', 10);
-			forceDark = $page.url.searchParams.get('forceDark') === 'true';
+			lightMode = $page.url.searchParams.get('lightMode') === 'true';
 			highestRatedCount = parseInt($page.url.searchParams.get('highestRatedCount') || '5', 10);
 		}
 
@@ -225,13 +225,6 @@
 	const screenshot = async (dark = false) => {
 		let element = document.querySelector('#wrapped') as HTMLElement;
 
-		element.classList.add('invert');
-
-		if (dark) {
-			// element.classList.add('light-theme');
-			lightTheme = false;
-		}
-
 		if (element !== null) {
 			domToBlob(element, {
 				style: {
@@ -282,10 +275,6 @@
 			});
 
 			await new Promise((resolve) => setTimeout(resolve, 1000));
-
-			element.classList.remove('invert');
-			lightTheme = true;
-			// element.classList.remove('light-theme');
 		}
 	};
 
@@ -310,7 +299,7 @@
 	{#await wrapped(user, currentUserIdentity)}
 		Loading ...
 	{:then wrapped}
-		<div id="wrapped" class:light-theme={lightTheme} style={`width: ${width}px;`}>
+		<div id="wrapped" class:light-theme={lightMode} style={`width: ${width}px;`}>
 			<div class="categories-grid" style="padding-bottom: 0;">
 				<div class="grid-item image-grid avatar-grid category">
 					<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
@@ -435,10 +424,6 @@
 
 		<p />
 
-		<blockquote>
-			This is a minimal, live preview. Generated images will be higher quality and themed properly.
-		</blockquote>
-
 		<p>
 			<button on:click={() => (width -= 25)}>-25px</button>
 			<button on:click={updateWidth}>Auto-calculate width</button>
@@ -446,7 +431,7 @@
 		</p>
 
 		<p>
-			<a href={'#'} on:click={() => screenshot(!forceDark)}>Generate image</a>
+			<a href={'#'} on:click={() => screenshot(lightMode)}>Generate image</a>
 		</p>
 
 		<details>
@@ -454,8 +439,8 @@
 			<div id="options">
 				<input type="checkbox" bind:checked={watermark} /> Enable watermark<br />
 				<input type="checkbox" bind:checked={transparency} /> Enable background transparency<br />
-				<input type="checkbox" bind:checked={forceDark} />
-				Enable light mode (dark by default)<br />
+				<input type="checkbox" bind:checked={lightMode} />
+				Enable light mode<br />
 				<input type="checkbox" bind:checked={includeMusic} /> Include music<br />
 				<input type="checkbox" bind:checked={includeRepeats} /> Include rewatches & rereads<br />
 				<input type="checkbox" bind:checked={includeSpecials} /> Include specials and OVAs<br />
@@ -491,6 +476,7 @@
 		justify-content: center;
 		font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
 			Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+		background-color: #0b1622;
 	}
 
 	.categories-grid b {