jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

settle on a dark theme and implement with override

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-08 10:55:41 -04:00
parent 0f5dadbf6f
commit 0070ed1c19
3 changed files with 98 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/ThemeSwitcher.astro
View File

@@ -1,65 +0,0 @@
---
---
<div class="theme-switcher">
<label for="theme-select">Theme</label>
<select id="theme-select">
<option value="">Light</option>
<option value="cool">Cool</option>
<option value="midnight-garden">Midnight Garden</option>
<option value="stormfront">Stormfront</option>
<option value="copper-slate">Copper &amp; Slate</option>
<option value="northern-lights">Northern Lights</option>
<option value="obsidian">Obsidian</option>
<option value="mocha">Mocha</option>
<option value="deep-ocean">Deep Ocean</option>
</select>
</div>
<style>
.theme-switcher {
position: fixed;
top: 0.5rem;
right: 0.5rem;
z-index: 1000;
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
background: var(--bg-color);
border: 1px solid var(--content-color-faded);
font-size: 0.75rem;
}
label {
color: var(--content-color-faded);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
select {
background: var(--bg-color);
color: var(--content-color);
border: none;
font-size: 0.75rem;
font-family: inherit;
cursor: pointer;
padding: 0.1rem;
}
</style>
<script>
const select = document.getElementById('theme-select') as HTMLSelectElement;
const saved = localStorage.getItem('theme');
if (saved !== null) {
document.documentElement.setAttribute('data-theme', saved);
select.value = saved;
}
select.addEventListener('change', () => {
const theme = select.value;
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
});
</script>