adrian/adrian-altner.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add theme toggle functionality and improve theme management

Browse source
This commit is contained in:
Adrian Altner 2026-04-21 01:44:47 +02:00
parent f9ab31c247
commit 7bd0905ecf
3 changed files with 151 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/layouts/BaseLayout.astro
View file

@ -33,11 +33,36 @@ const {
<html lang={locale}>
<head>
<BaseHead title={title} description={description} image={image} locale={locale} />
<script is:inline>
(() => {
const root = document.documentElement;
const apply = () => {
const stored = localStorage.getItem('theme');
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = stored === 'dark' || stored === 'light' ? stored : prefersDark ? 'dark' : 'light';
root.dataset.theme = theme;
};
apply();
const enableTransitions = () => {
requestAnimationFrame(() =>
requestAnimationFrame(() => root.setAttribute('data-theme-ready', '')),
);
};
enableTransitions();
document.addEventListener('astro:before-swap', () => {
root.removeAttribute('data-theme-ready');
});
document.addEventListener('astro:after-swap', () => {
apply();
enableTransitions();
});
})();
</script>
<ClientRouter />
<slot name="head" />
</head>
<body class={bodyClass}>
<Header locale={locale} entry={entry} transition:persist />
<Header locale={locale} entry={entry} />
<main transition:animate="fade">
<slot />
</main>