mirror of
https://github.com/docker/docs.git
synced 2026-10-23 18:09:02 +03:00
db740fe266
> 🤖 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>
111 lines
2.3 KiB
CSS
111 lines
2.3 KiB
CSS
/* global styles */
|
|
|
|
[x-cloak=""] {
|
|
display: none !important;
|
|
}
|
|
/* alpine cloak for small screens only */
|
|
[x-cloak="sm"] {
|
|
@media (width <= 768px) {
|
|
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;
|
|
|
|
scrollbar-color: var(--color-gray-400) rgba(0, 0, 0, 0.05);
|
|
&.dark {
|
|
scrollbar-color: var(--color-gray-700) rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
mark {
|
|
@apply bg-transparent font-bold text-blue-500 dark:text-blue-400;
|
|
}
|
|
|
|
/* Hide the clear (X) button for search inputs */
|
|
/* Chrome, Safari, Edge, and Opera */
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
/* Firefox */
|
|
input[type="search"]::-moz-search-cancel-button {
|
|
display: none;
|
|
}
|
|
|
|
/* Internet Explorer and Edge (legacy) */
|
|
input[type="search"]::-ms-clear {
|
|
display: none;
|
|
}
|
|
.prose {
|
|
hr {
|
|
@apply mt-8 mb-4;
|
|
}
|
|
:where(h1):not(:where([class~="not-prose"], [class~="not-prose"] *)) {
|
|
font-weight: 500 !important;
|
|
font-size: 180% !important;
|
|
margin-bottom: 0.4em !important;
|
|
}
|
|
> h2 {
|
|
@apply mt-7! mb-3!;
|
|
font-size: 160% !important;
|
|
a {
|
|
@apply hover:no-underline!;
|
|
}
|
|
}
|
|
> h3 {
|
|
font-size: 130% !important;
|
|
a {
|
|
@apply hover:no-underline!;
|
|
}
|
|
}
|
|
> h4 {
|
|
a {
|
|
@apply hover:no-underline!;
|
|
}
|
|
}
|
|
> h5 {
|
|
a {
|
|
@apply hover:no-underline!;
|
|
}
|
|
}
|
|
ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
ol ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
ol ol ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
}
|
|
.navbar-group:first-of-type {
|
|
margin-top: 0.2rem !important;
|
|
}
|
|
|
|
#search-page-results {
|
|
mark:where(.dark, .dark *) {
|
|
color: var(--color-blue-400);
|
|
}
|
|
}
|
|
|
|
code {
|
|
font-size: 0.9em;
|
|
}
|