added the themes to the theme selector so you can preview it

This commit is contained in:
2025-12-10 18:35:34 -06:00
parent 85a51a1fda
commit 9cd2a59039

View File

@@ -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%;