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

added theme selection

Browse Source
This commit is contained in:
Nils Pukropp
2026-03-26 02:10:40 +01:00
parent 57c36ab652
commit 85549d41f8
3 changed files with 54 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
frontend/src/layouts/Layout.astro
View File

@@ -30,7 +30,7 @@ try {
---
<!doctype html>
<html lang="en" class={siteConfig.theme}>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
@@ -38,8 +38,12 @@ try {
<meta name="generator" content={Astro.generator} />
<title>{title} | {siteConfig.title}</title>
{siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
document.documentElement.className = savedTheme;
</script>
</head>
<body class={`bg-base text-text selection:bg-surface2 selection:text-text ${siteConfig.theme}`}>
<body class="bg-base text-text selection:bg-surface2 selection:text-text">
<!-- Dynamic Mesh Gradient Background -->
<div class="fixed inset-0 z-[-1] overflow-hidden bg-base">
<div class="absolute top-[-10%] left-[-10%] w-[60%] h-[50%] rounded-full bg-mauve/15 blur-[120px] opacity-70 animate-pulse" style="animation-duration: 10s;"></div>
@@ -48,16 +52,23 @@ try {
</div>
<nav class="max-w-6xl mx-auto px-4 md:px-6 py-4 md:py-8">
<header class="glass px-4 py-3 md:px-6 md:py-4 flex items-center justify-between">
<div>
<header class="glass px-4 py-3 md:px-6 md:py-4 flex flex-col md:flex-row items-center justify-between gap-4">
<div class="w-full md:w-auto text-center md:text-left">
<a href="/" class="text-xl md:text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-mauve to-blue block">
{siteConfig.title}
</a>
<p class="text-[8px] md:text-[10px] text-subtext0 uppercase tracking-widest">{siteConfig.subtitle}</p>
</div>
<div class="flex gap-3 md:gap-4 items-center text-sm md:text-base">
<div class="flex gap-3 md:gap-4 items-center text-sm md:text-base w-full md:w-auto justify-center md:justify-end">
<a href="/" class="text-subtext0 hover:text-text transition-colors">Home</a>
<a href="/admin" class="text-subtext0 hover:text-mauve transition-colors">Admin</a>
<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>
</header>
</nav>
@@ -72,5 +83,21 @@ try {
&copy; {new Date().getFullYear()} {siteConfig.title}
</div>
</footer>
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
document.addEventListener('DOMContentLoaded', () => {
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;
});
}
});
</script>
</body>
</html>