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

theme switcher

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-09 07:48:39 -04:00
parent 0070ed1c19
commit 173b5ba9f4
6 changed files with 124 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/layouts/BaseLayout.astro
View File

@@ -2,6 +2,7 @@
import '@styles/main.css';
import '@fontsource-variable/baskervville';
import '@fontsource-variable/baskervville-sc';
import ThemeSwitcher from '@components/ThemeSwitcher.astro';
---
<html lang="en">
@@ -11,9 +12,12 @@ import '@fontsource-variable/baskervville-sc';
<!-- avoid FOUC by setting the color schme here in the header -->
<script>
const pref = localStorage.getItem('theme-preference');
if (pref) {
document.documentElement.dataset.theme = pref;
const explicitPref = localStorage.getItem('theme-preference');
if (explicitPref) {
document.documentElement.dataset.theme = explicitPref;
} else {
const isLight = window.matchMedia('(prefers-color-scheme: light)').matches;
document.documentElement.dataset.theme = isLight ? 'light' : 'dark';
}
</script>
@@ -55,12 +59,19 @@ import '@fontsource-variable/baskervville-sc';
}
}
}
.switcher-container {
align-self: center;
}
</style>
</head>
<body>
<header>
<nav>
<a href="/" class="home" data-astro-prefetch>Joe's Blog</a>
<div class="switcher-container">
<ThemeSwitcher />
</div>
<a href="/posts" data-astro-prefetch>Posts</a>
<a href="/about" data-astro-prefetch>About</a>
</nav>