nvrl/narlblog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fixed light theme

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-27 12:58:04 +01:00
parent b550a606f5
commit 8e10cb9d17
3 changed files with 46 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/components/ThemeSwitcher.astro
View File

@@ -2,24 +2,40 @@
const { defaultTheme } = Astro.props;
---
<select id="user-theme-switcher" class="bg-surface0/50 text-text border border-surface1 rounded px-2 py-1 text-xs focus:outline-none focus:border-mauve transition-colors cursor-pointer">
<option value="mocha">Mocha</option>
<option value="macchiato">Macchiato</option>
<option value="frappe">Frappe</option>
<option value="latte">Latte</option>
<option value="scaled-and-icy">Scaled and Icy</option>
</select>
<div class="relative inline-block text-left">
<select
id="user-theme-switcher"
class="appearance-none bg-surface0/50 text-text border border-surface1 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-mauve transition-all cursor-pointer hover:bg-surface0 pr-8 shadow-sm"
>
<option value="mocha">Mocha</option>
<option value="macchiato">Macchiato</option>
<option value="frappe">Frappe</option>
<option value="latte">Latte</option>
<option value="scaled-and-icy">Scaled and Icy</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-subtext0">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-9"/></svg>
</div>
</div>
<script is:inline define:vars={{ defaultTheme }}>
const switcher = document.getElementById('user-theme-switcher');
if (switcher) {
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
switcher.value = savedTheme;
switcher.addEventListener('change', (e) => {
const newTheme = e.target.value;
localStorage.setItem('user-theme', newTheme);
document.documentElement.className = newTheme;
});
}
const initTheme = () => {
const switcher = document.getElementById('user-theme-switcher');
if (switcher) {
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
switcher.value = savedTheme;
document.documentElement.className = savedTheme;
switcher.addEventListener('change', (e) => {
const newTheme = e.target.value;
localStorage.setItem('user-theme', newTheme);
document.documentElement.className = newTheme;
});
}
};
// Initialize immediately
initTheme();
// Re-initialize after Astro view transitions or navigation
document.addEventListener('astro:after-swap', initTheme);
</script>