https://diek.us/js/theme.js

1const HTML = document.documentElement;
2const OVERRIDE_KEY = 'diekus-theme-override';
3
4const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
5
6function systemTheme() {
7  return systemDark.matches ? 'dark' : 'light';
8}
9
10function isFlipped() {
11  return sessionStorage.getItem(OVERRIDE_KEY) === 'flipped';
12}
13
14function opposite(theme) {
15  return theme === 'dark' ? 'light' : 'dark';
16}
17
18function render() {
19  if (isFlipped()) {
20    HTML.setAttribute('data-theme', opposite(systemTheme()));
21  } else {
22    HTML.removeAttribute('data-theme');
23  }
24}
25
26function toggle() {
27  if (isFlipped()) {
28    sessionStorage.removeItem(OVERRIDE_KEY);
29  } else {
30    sessionStorage.setItem(OVERRIDE_KEY, 'flipped');
31  }
32  render();
33}
34
35// Apply session override immediately (before first paint of JS-enhanced state)
36render();
37
38const btn = document.getElementById('theme-toggle');
39if (btn) btn.addEventListener('click', toggle);
40
41// Re-derive the effective theme whenever the system preference changes
42systemDark.addEventListener('change', render);