diff --git a/assets/css/global.css b/assets/css/global.css index 1be4564ecf4..ba29b4dc6d1 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -9,6 +9,18 @@ display: none !important; } } +/* Theme toggle icon visibility — driven by data-theme-preference on , + set synchronously by theme.js before first paint. x-show handles updates + after Alpine initialises; these rules cover the pre-Alpine window. */ +:root[data-theme-preference="light"] .theme-icon-moon, +:root[data-theme-preference="light"] .theme-icon-auto, +:root[data-theme-preference="dark"] .theme-icon-sun, +:root[data-theme-preference="dark"] .theme-icon-auto, +:root[data-theme-preference="auto"] .theme-icon-sun, +:root[data-theme-preference="auto"] .theme-icon-moon { + display: none; +} + :root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -93,6 +105,6 @@ input[type="search"]::-ms-clear { } } -code{ - font-size:0.9em; +code { + font-size: 0.9em; } diff --git a/assets/js/theme.js b/assets/js/theme.js index 95faa9a8f3a..27852bd5c02 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -1,20 +1,10 @@ -// return 'light' or 'dark' depending on localStorage (pref) or system setting -function getThemePreference() { - const theme = localStorage.getItem("theme-preference"); - if (theme) return theme; - else - return window.matchMedia("(prefers-color-scheme: dark)").matches +// update root class based on os setting or localstorage +const storedTheme = localStorage.getItem("theme-preference"); +const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches; +document.firstElementChild.className = + storedTheme === "dark" || storedTheme === "light" + ? storedTheme + : prefersDark ? "dark" : "light"; -} - -// update root class based on os setting or localstorage -const preference = getThemePreference(); -document.firstElementChild.className = preference === "dark" ? "dark" : "light"; -localStorage.setItem("theme-preference", preference); - -// set innertext for the theme switch button -// window.addEventListener("DOMContentLoaded", () => { -// const themeSwitchButton = document.querySelector("#theme-switch"); -// themeSwitchButton.textContent = `${preference}_mode`; -// }); +document.firstElementChild.dataset.themePreference = storedTheme || "auto"; diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html index 5339fed9ec8..eda24c11e92 100644 --- a/layouts/_partials/header.html +++ b/layouts/_partials/header.html @@ -1,9 +1,5 @@ -
-
+
+
{{- if not .IsHome }}
-
+
- {{ partialCached "search-bar.html" "-" }} + {{ partialCached "search-bar.html" "-" }}