mirror of
https://github.com/docker/docs.git
synced 2026-04-03 17:59:01 +07:00
docs: add auto/system theme option to theme toggle (#24519)
> 🤖 Generated with [Claude Code](https://claude.com/claude-code) ## Summary `theme.js` unconditionally wrote the resolved preference to `localStorage` on every page load, permanently locking in a concrete `"light"` or `"dark"` value even for first-time visitors — making it impossible to track OS preference changes after any site visit. Removed the unconditional `localStorage.setItem` from `theme.js` so the early script only reads (never writes); the Alpine.js toggle in `header.html` now cycles through three states (light → dark → auto), with "auto" removing the `theme-preference` key and resolving from `prefers-color-scheme` with a live `matchMedia` change listener so the theme updates immediately when the OS preference changes. A contrast icon indicates auto mode; all three icon spans are driven by Alpine `x-show` directives rather than pure CSS dark-mode classes. **Verified:** logic matches the standard three-state pattern; `prefers-color-scheme` media query and `matchMedia` change listener are the canonical browser APIs for system-preference tracking. **Checked:** no other files reference `theme-preference` or the theme toggle; no CSS changes required. Closes #23177 --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
David Karlsson
@@ -9,6 +9,18 @@
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
/* Theme toggle icon visibility — driven by data-theme-preference on <html>,
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -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";
|
||||
|
||||
@@ -1,9 +1,5 @@
|
||||
<header
|
||||
class="sticky top-0 z-20 h-16 w-full bg-blue-600 text-white"
|
||||
>
|
||||
<div
|
||||
class="flex h-full justify-between gap-2 mx-auto px-4"
|
||||
>
|
||||
<header class="sticky top-0 z-20 h-16 w-full bg-blue-600 text-white">
|
||||
<div class="mx-auto flex h-full justify-between gap-2 px-4">
|
||||
<div class="flex h-full items-center gap-2 lg:gap-8">
|
||||
{{- if not .IsHome }}
|
||||
<button
|
||||
@@ -45,7 +41,10 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div id="buttons" class="flex min-w-0 items-center justify-end flex-shrink-0">
|
||||
<div
|
||||
id="buttons"
|
||||
class="flex min-w-0 flex-shrink-0 items-center justify-end"
|
||||
>
|
||||
<div class="flex items-center gap-2">
|
||||
<div data-tooltip-wrapper class="relative">
|
||||
<button
|
||||
@@ -53,7 +52,7 @@
|
||||
@click="$store.gordon.toggle()"
|
||||
aria-label="Ask Gordon, AI assistant"
|
||||
aria-describedby="gordon-tooltip"
|
||||
class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 shimmer open-kapa-widget"
|
||||
class="shimmer open-kapa-widget flex cursor-pointer items-center gap-2 rounded-lg border border-blue-500 bg-blue-700 p-2 text-white transition-colors focus:ring focus:ring-blue-400 focus:outline-none"
|
||||
>
|
||||
<span class="icon-svg">
|
||||
{{ partial "utils/svg.html" "/icons/sparkle.svg" }}
|
||||
@@ -63,35 +62,54 @@
|
||||
<div
|
||||
id="gordon-tooltip"
|
||||
data-tooltip-body
|
||||
class="absolute top-0 left-0 hidden whitespace-nowrap rounded-sm bg-gray-900 p-2 text-sm text-white"
|
||||
class="absolute top-0 left-0 hidden rounded-sm bg-gray-900 p-2 text-sm whitespace-nowrap text-white"
|
||||
role="tooltip"
|
||||
>
|
||||
Ask Gordon — AI assistant for Docker docs
|
||||
<div data-tooltip-arrow class="absolute h-2 w-2 rotate-45 bg-gray-900"></div>
|
||||
<div
|
||||
data-tooltip-arrow
|
||||
class="absolute h-2 w-2 rotate-45 bg-gray-900"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="search-bar-container">
|
||||
{{ partialCached "search-bar.html" "-" }}
|
||||
{{ partialCached "search-bar.html" "-" }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
aria-label="Theme switch"
|
||||
id="theme-switch"
|
||||
class="cursor-pointer p-2 rounded-lg bg-blue-700 border border-blue-500 hover:bg-blue-800 hover:border-blue-400 transition-colors focus:outline-none focus:ring focus:ring-blue-400"
|
||||
x-data="{ theme: localStorage.getItem('theme-preference') }"
|
||||
x-init="$watch('theme', value => {
|
||||
localStorage.setItem('theme-preference', value);
|
||||
document.firstElementChild.className = value;
|
||||
})"
|
||||
@click="theme = (theme === 'dark' ? 'light' : 'dark')"
|
||||
class="cursor-pointer rounded-lg border border-blue-500 bg-blue-700 p-2 transition-colors hover:border-blue-400 hover:bg-blue-800 focus:ring focus:ring-blue-400 focus:outline-none"
|
||||
x-data="{ theme: localStorage.getItem('theme-preference') || 'auto' }"
|
||||
x-init="
|
||||
let mql = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
function applyTheme(val) {
|
||||
if (val === 'auto') {
|
||||
localStorage.removeItem('theme-preference');
|
||||
document.firstElementChild.className = mql.matches ? 'dark' : 'light';
|
||||
} else {
|
||||
localStorage.setItem('theme-preference', val);
|
||||
document.firstElementChild.className = val;
|
||||
}
|
||||
document.firstElementChild.dataset.themePreference = val;
|
||||
}
|
||||
let handler = e => { if (theme === 'auto') document.firstElementChild.className = e.matches ? 'dark' : 'light'; };
|
||||
mql.addEventListener('change', handler);
|
||||
$watch('theme', val => applyTheme(val));
|
||||
return () => mql.removeEventListener('change', handler);
|
||||
"
|
||||
@click="theme = (theme === 'light' ? 'dark' : theme === 'dark' ? 'auto' : 'light')"
|
||||
>
|
||||
<span class="icon-svg dark:hidden"
|
||||
<span class="theme-icon-sun icon-svg" x-show="theme === 'light'"
|
||||
>{{ partialCached "icon" "icons/sun.svg" "sun" }}
|
||||
</span>
|
||||
<span class="icon-svg hidden dark:block">
|
||||
<span class="theme-icon-moon icon-svg" x-show="theme === 'dark'">
|
||||
{{ partialCached "icon" "icons/moon.svg" "moon" }}
|
||||
</span>
|
||||
<span class="theme-icon-auto icon-svg" x-show="theme === 'auto'">
|
||||
{{ partialCached "icon" "contrast" "contrast" }}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user