Skip to content

Commit 66dd1e3

Browse files
nginx-jacknginx-jack
committed
Theme: Toggle icon on theme swap
1 parent d34b313 commit 66dd1e3

File tree

4 files changed

+64
-65
lines changed

4 files changed

+64
-65
lines changed

‎assets/css/v2/style.css‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -143,12 +143,16 @@ textarea:not([rows]) {
143143
--card-shadow: 3px 3px 0px oklch(var(--color-shadow));
144144
--blockquote-border: 1px solid oklch(var(--color-codeblock-border));
145145
--blockquote-shadow: 3px 3px 0px oklch(var(--color-shadow));
146+
--icon-light: block;
147+
--icon-dark: none;
146148
}
147149
:root[data-theme="dark"] {
148150
--card-border: 1px dashed oklch(var(--color-codeblock-border));
149151
--card-shadow: 0;
150152
--blockquote-border: 1px dashed oklch(var(--color-codeblock-border));
151153
--blockquote-shadow: 0;
154+
--icon-dark: block;
155+
--icon-light: none;
152156
}
153157

154158
:root {
@@ -196,7 +200,7 @@ textarea:not([rows]) {
196200
--color-brand-200: 0.91 0.0406 157.72;
197201
--color-brand-100: 0.98 0.0107 158.85;
198202
--color-background: light-dark(oklch(1 0 0), oklch(0.2 0 0));
199-
--color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0));
203+
--color-foreground: light-dark(oklch(0 0 0), oklch(1 0 0 / 0.9));
200204
--color-shadow: 0.86 0 0;
201205
--code-color: light-dark(oklch(0 0 0), oklch(1 0 0));
202206

@@ -592,7 +596,17 @@ ol li:last-child {
592596
}
593597

594598
.header__control--theme {
599+
background: none;
600+
border: none;
595601
cursor: pointer;
602+
603+
.header__control--theme--light {
604+
display: var(--icon-light);
605+
}
606+
607+
.header__control--theme--dark {
608+
display: var(--icon-dark);
609+
}
596610
}
597611
}
598612
}

‎biome.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
{
22
"$schema": "https://biomejs.dev/schemas/2.2.2/schema.json",
3-
"root": false,
43
"vcs": {
54
"enabled": true,
65
"clientKind": "git",

‎layouts/_default/baseof.html‎

Lines changed: 41 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -36,71 +36,53 @@
3636
})(window,document,'script','dataLayer','GTM-K5HG9JT');</script>
3737

3838
<script>
39-
40-
let storedTheme = null;
41-
try {
42-
storedTheme = localStorage.getItem("theme");
43-
} catch (e) {
44-
// Some environments block storage (privacy mode, etc.)
45-
}
46-
47-
const mql = window.matchMedia
48-
? window.matchMedia("(prefers-color-scheme: dark)")
49-
: null;
50-
const initialTheme = storedTheme || (mql && mql.matches ? "dark" : "light");
51-
document.documentElement.setAttribute("data-theme", initialTheme);
52-
53-
document.addEventListener("DOMContentLoaded", () => {
54-
const toggle = document.getElementById("theme-toggle");
55-
if (!toggle) return;
56-
57-
toggle.checked =
58-
document.documentElement.getAttribute("data-theme") === "dark";
59-
60-
toggle.addEventListener("change", () => {
61-
const theme = toggle.checked ? "dark" : "light";
62-
document.documentElement.setAttribute("data-theme", theme);
63-
try {
64-
localStorage.setItem("theme", theme);
65-
} catch (e) {}
66-
});
67-
68-
// Follow system preference only until the user picks a theme
69-
let hasUserChoice = false;
39+
let storedTheme = null;
40+
try {
41+
storedTheme = localStorage.getItem('theme');
42+
} catch (e) {
43+
console.warn('Unable to read theme from localStorage:', e);
44+
}
45+
46+
const mql = window.matchMedia?.('(prefers-color-scheme: dark)');
47+
const initialTheme = storedTheme || (mql?.matches ? 'dark' : 'light');
48+
document.documentElement.setAttribute('data-theme', initialTheme);
49+
50+
document.addEventListener('DOMContentLoaded', () => {
51+
const toggle = document.getElementById('theme-toggle');
52+
if (!toggle) return;
53+
54+
toggle.addEventListener('click', () => {
55+
const currentTheme = document.documentElement.getAttribute('data-theme');
56+
const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
57+
document.documentElement.setAttribute('data-theme', newTheme);
7058
try {
71-
hasUserChoice = localStorage.getItem("theme") !== null;
59+
localStorage.setItem('theme', newTheme);
7260
} catch (e) {
73-
hasUserChoice = false;
61+
console.warn('Failed to write theme to localStorage:', e);
7462
}
63+
});
64+
65+
const hasUserChoice = storedTheme !== null;
7566

76-
if (!hasUserChoice && mql) {
77-
const onSystemChange = (e) => {
78-
try {
79-
if (localStorage.getItem("theme") !== null) return;
80-
} catch (err) {
81-
// continue following system if storage is blocked
82-
}
83-
const theme = e.matches ? "dark" : "light";
84-
document.documentElement.setAttribute("data-theme", theme);
85-
toggle.checked = theme === "dark";
86-
};
87-
88-
if (typeof mql.addEventListener === "function") {
89-
mql.addEventListener("change", onSystemChange);
90-
} else if (typeof mql.addListener === "function") {
91-
mql.addListener(onSystemChange);
67+
if (!hasUserChoice && mql) {
68+
const onSystemChange = (e) => {
69+
try {
70+
if (localStorage.getItem('theme') !== null) return;
71+
} catch (err) {
72+
console.warn('Unable to read theme from localStorage:', err);
9273
}
93-
}
94-
});
74+
const theme = e.matches ? 'dark' : 'light';
75+
document.documentElement.setAttribute('data-theme', theme);
76+
};
77+
mql.addEventListener('change', onSystemChange);
78+
}
79+
});
9580

96-
// Keep multiple tabs in sync so a change in one reflects in others
97-
window.addEventListener("storage", (e) => {
98-
if (e.key !== "theme") return;
99-
const theme = e.newValue || (mql && mql.matches ? "dark" : "light");
100-
document.documentElement.setAttribute("data-theme", theme);
101-
const toggle = document.getElementById("theme-toggle");
102-
if (toggle) toggle.checked = theme === "dark";
103-
});
81+
window.addEventListener('storage', (e) => {
82+
if (e.key !== 'theme') return;
83+
const theme = e.newValue || (mql?.matches ? 'dark' : 'light');
84+
document.documentElement.setAttribute('data-theme', theme);
85+
});
10486

10587
</script>
10688
</head>

‎layouts/partials/header.html‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,14 @@
88
<label class="header__control--sidebar--open" for="sidebar-panel">
99
{{ partial "lucide" (dict "context" . "icon" "panel-left-open") }}
1010
</label>
11-
<input type="checkbox" id="theme-toggle" hidden/>
12-
<label class="header__control--theme" for="theme-toggle">
13-
{{ partial "lucide" (dict "context" . "icon" "sun") }}
14-
</label>
11+
<button id="theme-toggle" class="header__control--theme" role="button" aria-label="Toggle theme">
12+
<span class="header__control--theme--light">
13+
{{ partial "lucide" (dict "context" . "icon" "sun") }}
14+
</span>
15+
<span class="header__control--theme--dark">
16+
{{ partial "lucide" (dict "context" . "icon" "moon") }}
17+
</span>
18+
</button>
1519
</div>
1620
{{ if ( not ( in .Site.Params.buildtype "package" ) ) }}
1721
<div class="header__search">

0 commit comments

Comments
 (0)