feat(wrapped): REAL LIVE PREVIEW

2 files changed, 43 insertions, 39 deletions

diff --git a/src/app.html b/src/app.html
index 1daa2548..4808664a 100644
--- a/src/app.html
+++ b/src/app.html
@@ -33,7 +33,7 @@
 
 	<!-- Stylesheets -->
 	<link rel="stylesheet" type="text/css" href="https://latex.now.sh/style.css" />
-	<link rel="stylesheet" type="text/css" href="https://skybox.sh/css/palettes/base16-light.css" />
+	<link rel="stylesheet" type="text/css" href="https://skybox.sh/css/palettes/base16-dark.css" />
 	<link rel="stylesheet" type="text/css" href="https://skybox.sh/css/risotto.css" />
 	<!-- <link rel="stylesheet" type="text/css" href="https://skybox.sh/css/custom.css"> -->
 
@@ -95,25 +95,43 @@
 			transition: 300ms;
 		}
 
-		html.dark-theme {
-			filter: invert(1) hue-rotate(180deg) !important;
-		}
-
-		html.dark-theme img {
-			filter: invert(1) hue-rotate(180deg) !important;
-		}
-
-		.dark-theme .invert img {
-			filter: invert(0) !important;
+		:root {
+			--base00: #f8f8f8;
+			--base01: #e8e8e8;
+			--base02: #d8d8d8;
+			--base03: #b8b8b8;
+			--base04: #585858;
+			--base05: #383838;
+			--base06: #282828;
+			--base07: #181818;
+			--base08: #ab4642;
+			--base09: #dc9656;
+			--base0A: #f7ca88;
+			--base0B: #a1b56c;
+			--base0C: #86c1b9;
+			--base0D: #7cafc2;
+			--base0E: #ba8baf;
+			--base0F: #a16946;
 		}
 
 		@media (prefers-color-scheme: dark) {
-			html {
-				filter: invert(1) hue-rotate(180deg);
-			}
-
-			html img {
-				filter: invert(1) hue-rotate(180deg);
+			:root {
+				--base00: #080808;
+				--base01: #181818;
+				--base02: #282828;
+				--base03: #484848;
+				--base04: #a8a8a8;
+				--base05: #c8c8c8;
+				--base06: #d8d8d8;
+				--base07: #f8f8f8;
+				--base08: #9a4541;
+				--base09: #cb9555;
+				--base0A: #f6c987;
+				--base0B: #a0b45b;
+				--base0C: #85c0b8;
+				--base0D: #7baeb1;
+				--base0E: #b98aae;
+				--base0F: #a06845;
 			}
 		}
 
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&nbsp;...
 	{: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 {