fix(html): theme fouc

author: Fuwn <[email protected]> 2023-12-05 13:30:38 -0800
committer: Fuwn <[email protected]> 2023-12-05 13:30:38 -0800
commit: b417e36c995186ead22b0c22971791565e42f68c (patch)
tree: 47634100097912c0361f1a2bb9434fced6a55ce4
parent: feat(clean): include not yet released (diff)
download: due.moe-b417e36c995186ead22b0c22971791565e42f68c.tar.xz
due.moe-b417e36c995186ead22b0c22971791565e42f68c.zip
2 files changed, 85 insertions, 91 deletions
diff --git a/src/app.html b/src/app.html
index 3aa5d8c5..d7aa26b4 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,98 +1,90 @@
 <!DOCTYPE html>
 <html lang="en">
-	<head>
-		<!-- HTML -->
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="theme-color" content="#060506" />
-		<meta
-			name="description"
-			content="Instantly view which anime & manga on your lists have new episodes/chapters!"
-		/>
-
-		<!-- Facebook -->
-		<meta property="og:url" content="https://due.moe" />
-		<meta property="og:type" content="website" />
-		<meta property="og:title" content="期限" />
-		<meta property="og:site_name" content="due.moe" />
-		<meta
-			property="og:description"
-			content="Instantly view which anime & manga on your lists have new episodes/chapters!"
-		/>
-		<meta property="og:image" content="https://due.moe/favicon-192x192.png" />
-
-		<!-- Windows 8 -->
-		<!-- <meta name="msapplication-TileColor" content="#FFFFFF" /> -->
-		<meta name="msapplication-TileImage" content="https://due.moe/favicon-144x144.png" />
-
-		<!-- Twitter -->
-		<meta name="twitter:card" content="summary_large_image" />
-		<meta property="twitter:domain" content="due.moe" />
-		<meta property="twitter:url" content="https://due.moe" />
-		<meta name="twitter:title" content="期限" />
-		<meta
-			name="twitter:description"
-			content="Instantly view which anime & manga on your lists have new episodes/chapters!"
-		/>
-		<meta name="twitter:image" content="https://due.moe/favicon-192x192.png" />
-
-		<title>期限</title>
-
-		<!-- Web Application Manifest -->
-		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
-
-		<!-- 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/risotto.css" />
-		<!-- <link rel="stylesheet" type="text/css" href="https://skybox.sh/css/custom.css"> -->
-
-		<!-- Icons -->
-		<link
-			rel="icon"
-			type="image/x-icon"
-			href="%sveltekit.assets%/favicon-16x16.ico"
-			sizes="16x16"
-		/>
-		<link
-			rel="icon"
-			type="image/x-icon"
-			href="%sveltekit.assets%/favicon-32x32.ico"
-			sizes="32x32"
-		/>
-		<link
-			rel="icon"
-			type="image/png"
-			href="%sveltekit.assets%/favicon-192x192.png"
-			sizes="192x192"
-		/>
-		<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" sizes="180x180" />
-		<link
-			rel="apple-touch-icon-precomposed"
-			href="%sveltekit.assets%/apple-touch-icon-precomposed.png"
-			sizes="180x180"
-		/>
-
-		%sveltekit.head%
-	</head>
-
-	<body data-sveltekit-preload-data="hover" style="max-width: 90% !important">
-		<style>
+
+<head>
+	<!-- HTML -->
+	<meta charset="utf-8" />
+	<meta name="viewport" content="width=device-width" />
+	<meta name="theme-color" content="#060506" />
+	<meta name="description" content="Instantly view which anime & manga on your lists have new episodes/chapters!" />
+
+	<!-- Facebook -->
+	<meta property="og:url" content="https://due.moe" />
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content="期限" />
+	<meta property="og:site_name" content="due.moe" />
+	<meta property="og:description"
+		content="Instantly view which anime & manga on your lists have new episodes/chapters!" />
+	<meta property="og:image" content="https://due.moe/favicon-192x192.png" />
+
+	<!-- Windows 8 -->
+	<!-- <meta name="msapplication-TileColor" content="#FFFFFF" /> -->
+	<meta name="msapplication-TileImage" content="https://due.moe/favicon-144x144.png" />
+
+	<!-- Twitter -->
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta property="twitter:domain" content="due.moe" />
+	<meta property="twitter:url" content="https://due.moe" />
+	<meta name="twitter:title" content="期限" />
+	<meta name="twitter:description"
+		content="Instantly view which anime & manga on your lists have new episodes/chapters!" />
+	<meta name="twitter:image" content="https://due.moe/favicon-192x192.png" />
+
+	<title>期限</title>
+
+	<!-- Web Application Manifest -->
+	<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
+
+	<!-- 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/risotto.css" />
+	<!-- <link rel="stylesheet" type="text/css" href="https://skybox.sh/css/custom.css"> -->
+
+	<!-- Icons -->
+	<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon-16x16.ico" sizes="16x16" />
+	<link rel="icon" type="image/x-icon" href="%sveltekit.assets%/favicon-32x32.ico" sizes="32x32" />
+	<link rel="icon" type="image/png" href="%sveltekit.assets%/favicon-192x192.png" sizes="192x192" />
+	<link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" sizes="180x180" />
+	<link rel="apple-touch-icon-precomposed" href="%sveltekit.assets%/apple-touch-icon-precomposed.png" sizes="180x180" />
+
+	<script>
+		if (JSON.parse(localStorage.getItem("settings")).forceLightTheme === true) {
+			document.documentElement.classList.add('light-theme')
+		} else {
+			document.documentElement.classList.add('dark-theme')
+		}
+	</script>
+
+	<style>
+		html {
+			transition: 300ms;
+		}
+
+		html.dark-theme {
+			filter: invert(1) hue-rotate(180deg) !important;
+		}
+
+		html.dark-theme img {
+			filter: invert(1) hue-rotate(180deg) !important;
+		}
+
+		@media (prefers-color-scheme: dark) {
 			html {
-				transition: 300ms;
+				filter: invert(1) hue-rotate(180deg);
 			}
 
-			@media (prefers-color-scheme: dark) {
-				html {
-					filter: invert(1) hue-rotate(180deg);
-				}
-
-				html img {
-					filter: invert(1) hue-rotate(180deg);
-				}
+			html img {
+				filter: invert(1) hue-rotate(180deg);
 			}
-		</style>
+		}
+	</style>
+
+	%sveltekit.head%
+</head>
+
+<body data-sveltekit-preload-data="hover" style="max-width: 90% !important">
+	<div style="display: contents">%sveltekit.body%</div>
+</body>
 
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
+</html>
+\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 9aa8031a..95c7c678 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -13,8 +13,10 @@
 		settings.subscribe((value) => {
 			if (value.forceLightTheme === true) {
 				document.documentElement.classList.add('light-theme');
+				document.documentElement.classList.remove('dark-theme');
 			} else {
 				document.documentElement.classList.remove('light-theme');
+				document.documentElement.classList.add('dark-theme');
 			}
 		});
author	Fuwn <[email protected]>	2023-12-05 13:30:38 -0800
committer	Fuwn <[email protected]>	2023-12-05 13:30:38 -0800
commit	b417e36c995186ead22b0c22971791565e42f68c (patch)
tree	47634100097912c0361f1a2bb9434fced6a55ce4
parent	feat(clean): include not yet released (diff)
download	due.moe-b417e36c995186ead22b0c22971791565e42f68c.tar.xz due.moe-b417e36c995186ead22b0c22971791565e42f68c.zip