enh: her

src/app.html

@@ -32,6 +32,9 @@
 				} else if (localStorage.theme && localStorage.theme === 'system') {
 					systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 					document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
+				} else if (localStorage.theme && localStorage.theme === 'her') {
+					document.documentElement.classList.add('dark');
+					document.documentElement.classList.add('her');
 				} else {
 					document.documentElement.classList.add('dark');
 				}
@@ -68,17 +71,66 @@
 			</style>
 
 			<img
+				id="logo"
 				style="
 					position: absolute;
 					width: 6rem;
 					height: 6rem;
-					top: 46%;
+					top: 41%;
 					left: 50%;
-					margin: -40px 0 0 -40px;
+					margin-left: -3rem;
 				"
 				src="/logo.svg"
 			/>
 
+			<img
+				id="logo-her"
+				style="
+					position: absolute;
+					width: 12rem;
+					height: 12rem;
+					top: 32%;
+					left: 50%;
+					margin-left: -6rem;
+				"
+				src="/logo.svg"
+			/>
+
+			<div
+				id="progress-background"
+				style="
+					position: absolute;
+					top: 56%;
+					left: 50%;
+
+					margin-left: -12rem;
+
+					width: 24rem;
+					height: 0.75rem;
+					border-radius: 9999px;
+					background-color: #fafafa9a;
+				"
+				class="bg-white"
+			></div>
+
+			<div
+				id="progress-bar"
+				style="
+					position: absolute;
+					top: 56%;
+					left: 50%;
+
+					margin-left: -12rem;
+
+					height: 0.75rem;
+					border-radius: 9999px;
+					background-color: #fff;
+
+					width: 0rem;
+				"
+				class="bg-white"
+			></div>
+
 			<!-- <span style="position: absolute; bottom: 32px; left: 50%; margin: -36px 0 0 -36px">
 				Footer content
 			</span> -->
@@ -101,4 +153,37 @@
 	html.dark #splash-screen img {
 		filter: invert(1);
 	}
+
+	html.her #splash-screen {
+		background: #983724;
+	}
+
+	#logo-her {
+		display: none;
+	}
+
+	#progress-background {
+		display: none;
+	}
+
+	#progress-bar {
+		display: none;
+	}
+
+	html.her #logo {
+		display: none;
+	}
+
+	html.her #logo-her {
+		display: block;
+		filter: invert(1);
+	}
+
+	html.her #progress-background {
+		display: block;
+	}
+
+	html.her #progress-bar {
+		display: block;
+	}
 </style>