From 9cd2a5903937ba537ac8b19377e1f04fa3487bd4 Mon Sep 17 00:00:00 2001
From: Will Stensvold <will@sludge.link>
Date: Wed, 10 Dec 2025 18:35:34 -0600
Subject: [PATCH] added the themes to the theme selector so you can preview it

---
 src/lib/components/themeSelector.svelte | 86 ++++++++++++++++++++++++-
 1 file changed, 85 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index cce6d79..9dda69e 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -5,7 +5,11 @@
 
 <div class="button-row">
 	{#each themeNames as theme}
-		<button on:click={() => (currentTheme = theme)} class:active={currentTheme === theme}>
+		<button
+			class="theme-{theme}"
+			on:click={() => (currentTheme = theme)}
+			class:active={currentTheme === theme}
+		>
 			{themeDisplayNames[theme]}
 		</button>
 	{/each}
@@ -21,6 +25,86 @@
 			width: 45%;
 		}
 	}
+	.theme-cyberpunk {
+		background: transparent;
+		border: 2px solid #ff00ff;
+		color: #ff00ff;
+		font-family: 'Courier New', monospace;
+		text-transform: uppercase;
+		padding: 10px 25px;
+		&:hover {
+			background: #ff00ff;
+			color: #000;
+		}
+	}
+
+	.theme-nightmare {
+		background: #3a0000;
+		border: 2px solid #8b0000;
+		color: #ff0000;
+		font-family: 'Georgia', serif;
+		text-transform: uppercase;
+		padding: 10px 25px;
+		&:hover {
+			background: #8b0000;
+		}
+	}
+
+	.theme-nintendo {
+		background: #e60012;
+		border: none;
+		border-radius: 25px;
+		color: #fff;
+		text-transform: uppercase;
+		padding: 12px 30px;
+		box-shadow: 0 4px 0 #a00009;
+
+		&:hover {
+			background: #ff0018;
+		}
+
+		&:active {
+			box-shadow: 0 2px 0 #a00009;
+			transform: translateY(2px);
+		}
+	}
+	.theme-sludge {
+		background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
+		border: 3px solid #8b8555;
+		border-bottom-width: 5px;
+		color: #c4b896;
+		text-transform: uppercase;
+		padding: 12px 30px;
+		box-shadow:
+			0 2px 0 rgba(0, 0, 0, 0.3),
+			inset 0 1px 0 rgba(255, 255, 255, 0.15);
+		&:hover {
+			background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
+			border-color: #9a9565;
+		}
+		&:active {
+			border-bottom-width: 3px;
+			transform: translateY(2px);
+		}
+	}
+
+	.theme-typewriter {
+		background: #2c2416;
+		border: 2px solid #2c2416;
+		color: #f4e8d0;
+		font-family: 'Courier', monospace;
+	}
+
+	.theme-win95 {
+		background: #c0c0c0;
+		border: 2px solid;
+		border-color: #ffffff #000000 #000000 #ffffff;
+		font-family: 'MS Sans Serif', Arial, sans-serif;
+		&:active {
+			border-color: #000000 #ffffff #ffffff #000000;
+		}
+	}
+
 	@media screen and (min-width: 450px) {
 		button {
 			width: 25%;