feat(wrapped): anilist style !!!

1 files changed, 47 insertions, 13 deletions

diff --git a/src/lib/Tools/Wrapped.svelte b/src/lib/Tools/Wrapped.svelte
index 479e4f7f..9d377588 100644
--- a/src/lib/Tools/Wrapped.svelte
+++ b/src/lib/Tools/Wrapped.svelte
@@ -23,6 +23,7 @@
 	let abbreviateTitles = true;
 	let maxAbbreviateLength = 40;
 	let transparency = false;
+	let darkTheme = true;
 
 	onMount(async () => {
 		if (user !== undefined) {
@@ -105,13 +106,14 @@
 		element.classList.add('invert');
 
 		if (dark) {
-			element.classList.add('light-theme');
+			// element.classList.add('light-theme');
+			darkTheme = false;
 		}
 
 		if (element !== null) {
 			domtoimage
 				.toBlob(element, {
-					bgcolor: transparency ? undefined : dark ? '#060506' : '#f8f8f8'
+					bgcolor: transparency ? undefined : dark ? '#0b1622' : '#edf1f5'
 				})
 				.then((blob) => {
 					const link = document.createElement('a');
@@ -125,7 +127,8 @@
 			await new Promise((resolve) => setTimeout(resolve, 1000));
 
 			element.classList.remove('invert');
-			element.classList.remove('light-theme');
+			darkTheme = true;
+			// element.classList.remove('light-theme');
 		}
 	};
 
@@ -151,8 +154,8 @@
 		{@const anime = year(wrapped.statistics.anime)}
 		{@const manga = year(wrapped.statistics.manga)}
 
-		<div class="categories-grid">
-			<div class="grid-item image-grid">
+		<div class:light-theme={darkTheme} class="categories-grid">
+			<div class="grid-item image-grid avatar-grid">
 				<a href={`https://anilist.co/user/${currentUserIdentity.name}`} target="_blank">
 					<img src={wrapped.avatar.large} alt="User Avatar" />
 				</a>
@@ -183,7 +186,7 @@
 					</div>
 				</div>
 			</div>
-			<div class="category-grid">
+			<div class="category-grid pure-category">
 				<div class="grid-item">
 					<b>Anime</b>
 				</div>
@@ -195,7 +198,7 @@
 				</div>
 				<div class="grid-item">Episodes: {episodes}</div>
 			</div>
-			<div class="category-grid">
+			<div class="category-grid pure-category">
 				<div class="grid-item">
 					<b>Manga</b>
 				</div>
@@ -209,7 +212,7 @@
 					Chapters: {manga.chaptersRead || 0}
 				</div>
 			</div>
-			<div class="category-grid">
+			<div class="category-grid pure-category">
 				<div class="grid-item image-grid">
 					{#if animeList !== undefined}
 						<a href={`https://anilist.co/anime/${animeList[0].id}`} target="_blank">
@@ -240,7 +243,7 @@
 					{/if}
 				</div>
 			</div>
-			<div class="category-grid">
+			<div class="category-grid pure-category">
 				<div class="grid-item image-grid">
 					{#if mangaList !== undefined}
 						<a href={`https://anilist.co/manga/${mangaList[0].id}`} target="_blank">
@@ -273,7 +276,12 @@
 			</div>
 		</div>
 
-		<p />
+		<br />
+
+		<p>
+			Don't be alarmed, the background will appear as its inverse in the preview, but will be
+			correct in the final image.
+		</p>
 
 		<ul>
 			<li>
@@ -307,8 +315,24 @@
 		flex-wrap: wrap;
 		row-gap: 1.5em;
 		column-gap: 1.5em;
-		padding: 1%;
+		padding: 2%;
 		justify-content: center;
+		/* filter: invert(0) !important; */
+		background-color: #0b1622;
+		font-family: Roboto, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell,
+			Fira Sans, Droid Sans, Helvetica Neue, sans-serif !important;
+	}
+
+	.category-grid,
+	.image-grid {
+		background-color: #151f2e;
+		border-radius: 4px;
+		color: rgb(159, 173, 189) !important;
+	}
+
+	.pure-category,
+	.avatar-grid {
+		padding: 1.5%;
 	}
 
 	.category-grid {
@@ -334,8 +358,18 @@
 		color: unset;
 	}
 
-	:global(.light-theme *) {
-		color: #c7c5c7 !important;
+	.light-theme .categories-grid {
+		background-color: #edf1f5 !important;
+	}
+
+	.light-theme .category-grid {
+		background-color: #fafafa !important;
+		color: rgb(92, 114, 138) !important;
+	}
+
+	.light-theme .image-grid {
+		background-color: #fafafa !important;
+		color: rgb(92, 114, 138) !important;
 	}
 
 	:global(.invert *) {