/** * Halcyon — colour schemes. * * The default scheme is stamped on as data-halcyon-scheme * (light | dark | auto) by functions.php. These rules re-map the * theme.json colour presets per scheme, so every block — core or * custom — follows along with no further changes. * * Selectors use html[data-…] (specificity 0,1,1) so they win over the * :root preset declarations WordPress generates from theme.json, * whichever order the stylesheets load in. */ /* ---- Light (mirrors theme.json) -------------------------------------- */ html[data-halcyon-scheme="light"] { color-scheme: light; --wp--preset--color--base: #f4f6f8; --wp--preset--color--base-2: #ffffff; --wp--preset--color--contrast: #16263d; --wp--preset--color--contrast-2: #5a6b7d; --wp--preset--color--primary: #4a6fa5; --wp--preset--color--secondary: #cdd9ec; --wp--preset--color--tertiary: #e3eaf4; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #e3eaf4 0%, #cdd9ec 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #16263d 0%, #2b3e5c 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(22, 38, 61, 0.06), 0 1px 2px rgba(22, 38, 61, 0.04); --wp--preset--shadow--card: 0 10px 34px rgba(22, 38, 61, 0.08); } /* ---- Dark (mirrors styles/dark.json) ---------------------------------- */ html[data-halcyon-scheme="dark"] { color-scheme: dark; --wp--preset--color--base: #0f1722; --wp--preset--color--base-2: #16263d; --wp--preset--color--contrast: #e8eef6; --wp--preset--color--contrast-2: #9fb0c4; --wp--preset--color--primary: #8fb0e0; --wp--preset--color--secondary: #2b3e5c; --wp--preset--color--tertiary: #1b2a3f; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #1b2a3f 0%, #2b3e5c 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #0f1722 0%, #16263d 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --wp--preset--shadow--card: 0 10px 34px rgba(0, 0, 0, 0.45); } /* Social icons carry an inline colour value from the editor — re-map it in dark mode so they stay visible on dark surfaces. */ html[data-halcyon-scheme="dark"] .wp-block-social-links.has-icon-color .wp-block-social-link a { color: var(--wp--preset--color--contrast) !important; } /* ---- Auto: no-JS fallback (JS resolves "auto" to a concrete scheme) --- */ @media (prefers-color-scheme: dark) { html[data-halcyon-scheme="auto"] { color-scheme: dark; --wp--preset--color--base: #0f1722; --wp--preset--color--base-2: #16263d; --wp--preset--color--contrast: #e8eef6; --wp--preset--color--contrast-2: #9fb0c4; --wp--preset--color--primary: #8fb0e0; --wp--preset--color--secondary: #2b3e5c; --wp--preset--color--tertiary: #1b2a3f; --wp--preset--gradient--soft-blue: linear-gradient(135deg, #1b2a3f 0%, #2b3e5c 100%); --wp--preset--gradient--deep-navy: linear-gradient(135deg, #0f1722 0%, #16263d 100%); --wp--preset--shadow--soft: 0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.25); --wp--preset--shadow--card: 0 10px 34px rgba(0, 0, 0, 0.45); } html[data-halcyon-scheme="auto"] .wp-block-social-links.has-icon-color .wp-block-social-link a { color: var(--wp--preset--color--contrast) !important; } } /* ---- Gentle cross-fade when the scheme flips -------------------------- */ @media (prefers-reduced-motion: no-preference) { html[data-halcyon-scheme] body { transition: background-color 0.25s ease, color 0.25s ease; } } /* ---- Visitor toggle --------------------------------------------------- * Stays [hidden] until assets/js/color-scheme.js reveals it, so it never * appears as a dead control when JS is off or the admin disables it. */ .halcyon-scheme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -6px 0; padding: 0; border: 1px solid var(--wp--preset--color--secondary); border-radius: 999px; background-color: var(--wp--preset--color--base-2); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .halcyon-scheme-toggle[hidden] { display: none; } .halcyon-scheme-toggle:hover, .halcyon-scheme-toggle:focus-visible { border-color: var(--wp--preset--color--primary); } /* Icon: a crescent moon in light mode (→ switch to dark)… */ .halcyon-scheme-toggle__icon { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 5px -4px 0 0 var(--wp--preset--color--contrast); transform: rotate(15deg); transition: box-shadow 0.2s ease, transform 0.2s ease; } /* …and a sun-like ring in dark mode (→ switch to light). */ html[data-halcyon-scheme="dark"] .halcyon-scheme-toggle__icon { box-shadow: inset 0 0 0 2.5px var(--wp--preset--color--contrast); transform: rotate(0deg); }