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; 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"> <div class="relative inline-block text-left">
<option value="mocha">Mocha</option> <select
<option value="macchiato">Macchiato</option> id="user-theme-switcher"
<option value="frappe">Frappe</option> 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="latte">Latte</option> >
<option value="scaled-and-icy">Scaled and Icy</option> <option value="mocha">Mocha</option>
</select> <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 }}> <script is:inline define:vars={{ defaultTheme }}>
const switcher = document.getElementById('user-theme-switcher'); const initTheme = () => {
if (switcher) { const switcher = document.getElementById('user-theme-switcher');
const savedTheme = localStorage.getItem('user-theme') || defaultTheme; if (switcher) {
switcher.value = savedTheme; const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
switcher.value = savedTheme;
switcher.addEventListener('change', (e) => { document.documentElement.className = savedTheme;
const newTheme = e.target.value;
localStorage.setItem('user-theme', newTheme); switcher.addEventListener('change', (e) => {
document.documentElement.className = newTheme; 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> </script>

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

@@ -40,6 +40,8 @@ try {
<title>{title} | {siteConfig.title}</title> <title>{title} | {siteConfig.title}</title>
{siteConfig.custom_css && <style set:html={siteConfig.custom_css} />} {siteConfig.custom_css && <style set:html={siteConfig.custom_css} />}
<script is:inline define:vars={{ defaultTheme: siteConfig.theme }}> <script is:inline define:vars={{ defaultTheme: siteConfig.theme }}>
// Prevention of FOUC (Flash of Unstyled Content)
// Immediately apply theme before rendering
const savedTheme = localStorage.getItem('user-theme') || defaultTheme; const savedTheme = localStorage.getItem('user-theme') || defaultTheme;
document.documentElement.className = savedTheme; document.documentElement.className = savedTheme;
</script> </script>

20
frontend/src/styles/global.css
View File

@@ -70,9 +70,9 @@
--flamingo: #eebebe; --rosewater: #f2d5cf; --flamingo: #eebebe; --rosewater: #f2d5cf;
} }
/* Highly optimized light mode colors */ /* Redesigned light themes for better contrast */
.latte { .latte {
--crust: #e6e9ef; --mantle: #dce0e8; --base: #eff1f5; --crust: #dce0e8; --mantle: #e6e9ef; --base: #eff1f5;
--surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be; --surface0: #ccd0da; --surface1: #bcc0cc; --surface2: #acb0be;
--overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93; --overlay0: #9ca0b0; --overlay1: #8c8fa1; --overlay2: #7c7f93;
--text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77; --text: #1e1e2e; --subtext0: #4c4f69; --subtext1: #5c5f77;
@@ -84,10 +84,10 @@
} }
.scaled-and-icy { .scaled-and-icy {
--crust: #ffffff; --mantle: #f8f9fa; --base: #f0f2f5; --crust: #e2e8f0; --mantle: #f1f5f9; --base: #f8fafc;
--surface0: #e4e7eb; --surface1: #d1d5db; --surface2: #9ca3af; --surface0: #cbd5e1; --surface1: #94a3b8; --surface2: #64748b;
--overlay0: #6b7280; --overlay1: #4b5563; --overlay2: #374151; --overlay0: #475569; --overlay1: #334155; --overlay2: #1e293b;
--text: #111827; --subtext0: #374151; --subtext1: #4b5563; --text: #0f172a; --subtext0: #1e293b; --subtext1: #334155;
--blue: #5cdbdf; --lavender: #8ab4f8; --sapphire: #38bdf8; --blue: #5cdbdf; --lavender: #8ab4f8; --sapphire: #38bdf8;
--sky: #0ea5e9; --teal: #2dd4bf; --green: #34d399; --sky: #0ea5e9; --teal: #2dd4bf; --green: #34d399;
--yellow: #fcd34d; --peach: #fbbf24; --maroon: #f43f5e; --yellow: #fcd34d; --peach: #fbbf24; --maroon: #f43f5e;
@@ -124,10 +124,10 @@ body {
/* Dynamic UI Components */ /* Dynamic UI Components */
.glass { .glass {
background-color: color-mix(in srgb, var(--surface0) 60%, transparent); background-color: color-mix(in srgb, var(--surface0) 80%, transparent);
backdrop-filter: blur(12px); backdrop-filter: blur(16px);
border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
border-radius: 1rem; border-radius: 1rem;
} }