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>

src/lib/components/chat/Settings/General.svelte

@@ -140,6 +140,7 @@
 						<option value="dark">🌑 {$i18n.t('Dark')}</option>
 						<option value="oled-dark">🌃 {$i18n.t('OLED Dark')}</option>
 						<option value="light">☀️ {$i18n.t('Light')}</option>
+						<option value="her">🌷 Her</option>
 						<!-- <option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>
 						<option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option> -->
 					</select>

src/routes/+layout.svelte

@@ -1,5 +1,8 @@
 <script>
 	import { io } from 'socket.io-client';
+	import { spring } from 'svelte/motion';
+
+	let loadingProgress = spring(0);
 
 	import { onMount, tick, setContext } from 'svelte';
 	import {
@@ -116,8 +119,31 @@
 
 		await tick();
 
-		document.getElementById('splash-screen')?.remove();
-		loaded = true;
+		if (
+			document.documentElement.classList.contains('her') &&
+			document.getElementById('progress-bar')
+		) {
+			loadingProgress.subscribe((value) => {
+				document.getElementById('progress-bar').style.width = `${value * 0.24}rem`;
+			});
+
+			await loadingProgress.set(100);
+
+			document.getElementById('splash-screen')?.remove();
+
+			const audio = new Audio(`/audio/greeting.mp3`);
+			const playAudio = () => {
+				audio.play();
+				document.removeEventListener('click', playAudio);
+			};
+
+			document.addEventListener('click', playAudio);
+
+			loaded = true;
+		} else {
+			document.getElementById('splash-screen')?.remove();
+			loaded = true;
+		}
 
 		return () => {
 			window.removeEventListener('resize', onResize);