joshua/joshua.seigler.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add manual light/dark toggle

Browse source
This commit is contained in:
Joshua Seigler 2025-05-08 21:59:50 -04:00
parent 5634b290cd
commit e5f29ff84b
3 changed files with 80 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

56
site/_includes/-header.njk
View file

@ -8,22 +8,52 @@
<a href="{{ "/music" | url }}">/music</a>
<a href="{{ "/books" | url }}">/books</a>
</div>
<div class="nav-languages">
<label class="nav-language-button" data-font="english">English<input type="radio" name="language" value="english"/></label>
<label class="nav-language-button" data-font="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
<div class="nav-toggles">
<label class="nav-toggle-button">☀️<input type="radio" name="theme" value="light"/></label>
<label class="nav-toggle-button">🌒<input type="radio" name="theme" value="dark"/></label>
/
<label class="nav-toggle-button" data-language="english">English<input type="radio" name="language" value="english"/></label>
<label class="nav-toggle-button" data-language="aurebesh">Aurebesh<input type="radio" name="language" value="aurebesh"/></label>
<script type="text/javascript">
const initialLanguage = localStorage.getItem("language") ?? 'english'
document.body.setAttribute('data-font', initialLanguage);
document.querySelectorAll("input[name=language]").forEach(input => {
if (input.value === initialLanguage) {
input.checked = true;
}
input.addEventListener('change', function () {
const newValue = this.value;
localStorage.setItem("language", newValue);
document.body.setAttribute('data-font', newValue);
const darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
const defaultPrefs = {
language: 'english',
theme: darkModeMediaQuery.matches
? 'dark'
: 'light'
};
Object.entries(defaultPrefs).forEach(([key, defaultPref]) => {
const currentPref = localStorage.getItem(key) ?? defaultPref;
applyPreference(key, currentPref, false)
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
input.addEventListener('change', (e) => {
applyPreference(key, e.currentTarget.value, true);
})
})
});
darkModeMediaQuery.addEventListener('change', e => {
if (localStorage.getItem('theme') != null) {
return;
}
applyPreference(
'theme',
e.matches
? 'dark'
: 'light',
false
);
})
function applyPreference(key, value, shouldSave) {
document.body.setAttribute(`data-${key}`, value);
document.querySelectorAll(`input[name=${key}]`).forEach(input => {
if (input.value === value) {
input.checked = true;
}
})
if (shouldSave) {
localStorage.setItem(key, value);
}
}
</script>
</div>
</nav>

4
site/_includes/base.njk
View file

@ -8,8 +8,8 @@ title: Joshua's Homepage
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ "/site.css" | url }}?modified={{buildTime}}"/>
<link rel="preload" media="light" href="{{ "./cloud.png" | url }}" as="image" />
<link rel="preload" media="dark" href="{{ "./cloud-night.png" | url }}" as="image" />
<link rel="preload" media="(prefers-color-scheme: light)" href="{{ "./cloud.png" | url }}" as="image" />
<link rel="preload" media="(prefers-color-scheme: dark)" href="{{ "./cloud-night.png" | url }}" as="image" />
<title>{{ computedTitle }} - {{ site.title }}</title>
<meta name="description" content="{{ description }}" />
<meta property="og:title" content="{{ computedTitle }}" />