/* ========================================================================== Frontend color-mode switcher (Light / Dark / Hoher Kontrast). Markup: patterns/bootstrap-nav.php (icon buttons inside .gam-nav-bar, right after .gam-nav-list-wrap — not a separate row/template part; see that file's docblock for why it moved there from an earlier masthead version). Behavior: assets/js/mode-switcher.js. Independent of the Site Editor's Global Styles style variations (styles/light.json, styles/dark.json, styles/high-contrast.json): those let an admin pick ONE variation as the site's default, baked into the page's inline global-styles stylesheet at render time. A per-visitor runtime toggle can't switch that stylesheet, so this file instead overrides the same 5 palette custom properties WordPress already generates (--wp--preset--color--{sand,terracotta,espresso,cocoa,cloud}), scoped to a `data-theme` attribute on set by mode-switcher.js. Every template/pattern already reads colors exclusively through `var(--wp--preset--color--*)` (see style.css), so overriding these five custom properties re-themes the whole site with no template changes — the same reason the three style variations only need to redeclare the palette. Hex values here are kept in sync with the matching styles/*.json file for each mode. ========================================================================== */ :root[data-theme="dark"] { --wp--preset--color--sand: #C79A6D; --wp--preset--color--terracotta: #7A4E33; --wp--preset--color--espresso: #F3E9E1; --wp--preset--color--cocoa: #D99C72; --wp--preset--color--cloud: #1B1512; } :root[data-theme="high-contrast"] { --wp--preset--color--sand: #F0DCC4; --wp--preset--color--terracotta: #E8C9A8; --wp--preset--color--espresso: #140D0A; --wp--preset--color--cocoa: #5C3524; --wp--preset--color--cloud: #FFFFFF; } /* No-JS / before-toggle-choice fallback: respect the visitor's OS-level preference. mode-switcher.js's inline script (see gamtheme_mode_switcher_inline_script() in functions.php) sets `data-theme` explicitly before first paint whenever JS runs, which always wins here since an attribute-value selector is more specific than one scoped only to a media query — this block only matters while JS hasn't run yet (or is disabled) and no explicit choice exists. */ @media (prefers-contrast: more) { :root:not([data-theme]) { --wp--preset--color--sand: #F0DCC4; --wp--preset--color--terracotta: #E8C9A8; --wp--preset--color--espresso: #140D0A; --wp--preset--color--cocoa: #5C3524; --wp--preset--color--cloud: #FFFFFF; } } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --wp--preset--color--sand: #C79A6D; --wp--preset--color--terracotta: #7A4E33; --wp--preset--color--espresso: #F3E9E1; --wp--preset--color--cocoa: #D99C72; --wp--preset--color--cloud: #1B1512; } } /* Hoher Kontrast: kräftige Ränder + eindeutige Fokus-Stile überall, nicht nur auf Buttons/Links (WCAG 2.4.11/2.4.13-artig) — ergänzt die dünneren Standard-Fokus-Regeln aus style.css, statt sie zu ersetzen. */ :root[data-theme="high-contrast"] .btn, :root[data-theme="high-contrast"] .wp-block-button__link, :root[data-theme="high-contrast"] input, :root[data-theme="high-contrast"] textarea, :root[data-theme="high-contrast"] select { border-width: 2px; border-style: solid; } :root[data-theme="high-contrast"] a:focus-visible, :root[data-theme="high-contrast"] button:focus-visible, :root[data-theme="high-contrast"] .wp-block-button__link:focus-visible, :root[data-theme="high-contrast"] .btn:focus-visible, :root[data-theme="high-contrast"] .nav-link:focus-visible { outline: 3px solid var(--wp--preset--color--espresso); outline-offset: 2px; box-shadow: 0 0 0 5px var(--wp--preset--color--cloud), 0 0 0 6px var(--wp--preset--color--espresso); } /* ---- Mode switcher control itself (patterns/bootstrap-nav.php) -------- */ /* Sits in .gam-nav-bar's flex row as its own compact item — no extra row, no extra vertical space. `margin-left: auto` only actually applies on mobile (where .gam-nav-list-wrap is `position: fixed`, i.e. taken out of the flex flow, leaving brand + toggle + this as the row's remaining items): it pushes the icons to the far right, past the hamburger, instead of sitting immediately after the brand. On desktop .gam-nav-list-wrap participates in the flow as `flex: 1 1 auto` and this rule is a no-op since this is already the last flex child (i.e. already at the far right, next to the last nav item/CTA). */ .gam-mode-switcher { display: inline-flex; gap: 2px; align-items: center; flex: none; margin-left: auto; } .gam-mode-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--wp--preset--color--espresso); cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .gam-mode-icon { width: 18px; height: 18px; } .gam-mode-btn:hover { background-color: rgba(115, 77, 63, 0.12); } .gam-mode-btn[aria-pressed="true"] { background-color: var(--wp--preset--color--cocoa); color: var(--wp--preset--color--cloud); } .gam-mode-btn:focus-visible { outline: 2px solid var(--wp--preset--color--espresso); outline-offset: 2px; } /* Desktop: nudge in from the CTA button and give the group a hairline separator, since here it sits directly among the regular nav items instead of being set apart by the mobile row's natural edge gap. */ @media (min-width: 1024px) { .gam-mode-switcher { padding-left: 12px; margin-left: 12px; border-left: 1px solid rgba(38, 25, 20, 0.15); } } @media (prefers-reduced-motion: reduce) { .gam-mode-btn { transition: none; } }