drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-08-23 15:26:33 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(theme-toggle): quick flash (light/dark) (#768)

Browse Source 
* fix(theme-toggle): quick flash (light/dark)

* chore: simplify

* chore: simplify

* chore: simplify
This commit is contained in:
Ludovic Fernandez
2025-08-21 01:33:24 +02:00
committed by GitHub
parent 18a9335d4b
commit 201ce3f763
2 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
assets/js/theme.js
View File

@@ -1,49 +1,22 @@
// Light / Dark theme toggle // Light / Dark theme toggle
(function () { (function () {
const defaultTheme = '{{ site.Params.theme.default | default `system`}}' const defaultTheme = '{{ site.Params.theme.default | default `system`}}'
const themes = ["light", "dark"];
const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle"); const themeToggleButtons = document.querySelectorAll(".hextra-theme-toggle");
const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p"); const themeToggleOptions = document.querySelectorAll(".hextra-theme-toggle-options p");
function setSystemTheme() {
const prefersColorScheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
document.documentElement.classList.remove("dark", "light");
document.documentElement.classList.add(prefersColorScheme);
document.documentElement.style.colorScheme = prefersColorScheme;
}
function applyTheme(theme) { function applyTheme(theme) {
theme = themes.includes(theme) ? theme : "system";
themeToggleButtons.forEach((btn) => btn.parentElement.dataset.theme = theme ); themeToggleButtons.forEach((btn) => btn.parentElement.dataset.theme = theme );
localStorage.setItem("color-theme", theme); localStorage.setItem("color-theme", theme);
} }
function switchTheme(theme) { function switchTheme(theme) {
switch (theme) { setTheme(theme);
case "light": applyTheme(theme);
document.documentElement.classList.remove("dark");
document.documentElement.classList.add(theme);
document.documentElement.style.colorScheme = theme;
applyTheme(theme);
break;
case "dark":
document.documentElement.classList.remove("light");
document.documentElement.classList.add(theme);
document.documentElement.style.colorScheme = theme;
applyTheme(theme);
break;
default:
setSystemTheme();
applyTheme("system");
break;
}
} }
const colorTheme = "color-theme" in localStorage ? localStorage.getItem("color-theme") : defaultTheme; const colorTheme = "color-theme" in localStorage ? localStorage.getItem("color-theme") : defaultTheme;
@@ -112,7 +85,7 @@
// Listen for system theme changes // Listen for system theme changes
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => { window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
if (localStorage.getItem("color-theme") === "system") { if (localStorage.getItem("color-theme") === "system") {
setSystemTheme(); setTheme("system");
} }
}); });
})(); })();

18
layouts/_partials/head.html
View File

@@ -59,6 +59,24 @@
{{ partial "google-analytics.html" . -}} {{ partial "google-analytics.html" . -}}
{{- end }} {{- end }}
<script>
// The section must not be in the theme.js file because it can create a quick flash (switch between light and dark).
function setTheme(theme) {
document.documentElement.classList.remove("light", "dark");
if (theme !== "light" && theme !== "dark") {
theme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
document.documentElement.classList.add(theme);
document.documentElement.style.colorScheme = theme;
}
setTheme("color-theme" in localStorage ? localStorage.getItem("color-theme") : '{{ site.Params.theme.default | default `system`}}')
</script>
<!-- Math engine --> <!-- Math engine -->
{{ $noop := .WordCount -}} {{ $noop := .WordCount -}}
{{- $engine := site.Params.math.engine | default "katex" -}} {{- $engine := site.Params.math.engine | default "katex" -}}