/* ========================================================================== Dark mode token layer The only file in the theme that carries literal color values besides theme.json. Mirrors design/tokens.json color.brands..dark.* — keep the two in sync in the same commit. Scoped to html[data-brand="…"] on purpose: WordPress emits its presets under a bare :root, and on a classic theme those styles are hoisted out of wp_footer into the head by wp_hoist_late_printed_styles(). Source order is therefore not ours to rely on; specificity is. There is no theme switcher. [data-theme="light"] exists only as a server-side opt-out for pages that must stay light — see the sauna_force_light_theme() filter in functions.php. ========================================================================== */ @media (prefers-color-scheme: dark) { html[data-brand="sthlmsauna"]:not([data-theme="light"]) { --wp--preset--color--primary: #6FA8A8; --wp--preset--color--primary-hover: #8CBDBD; --wp--preset--color--primary-light: #16211F; --wp--preset--color--primary-disabled: #33403F; --wp--preset--color--dark: #ECEEF0; --wp--preset--color--surface: #121619; --wp--preset--color--surface-warm: #191F21; --wp--preset--color--surface-strong: #242B30; --wp--preset--color--muted: #1C2226; --wp--preset--color--body-text: #ECEEF0; --wp--preset--color--ink: #ECEEF0; --wp--preset--color--muted-text: #9BA1A8; --wp--preset--color--muted-soft: #848B95; --wp--preset--color--hairline: #2C3236; --wp--preset--color--hairline-soft: #242A2F; --wp--preset--color--border-strong: #465055; --wp--preset--color--error: #EF6D57; /* Decorative accents. Four already carry on a dark surface; deep-sea and ocean-bay are too dark and are lifted, hue and saturation held. */ --wp--preset--color--deep-sea: #4A85B5; --wp--preset--color--ocean-bay: #628786; --wp--custom--color--on-primary: #121619; --wp--custom--color--on-inverse: #ECEEF0; --wp--custom--color--on-header: #ECEEF0; --wp--custom--color--header-band: #16211F; --wp--custom--color--surface-card: #1C2226; --wp--custom--color--surface-tinted: #232A2E; --wp--custom--color--surface-inverse: #171C20; --wp--custom--color--surface-inverse-strong: #101417; --wp--custom--color--error-hover: #FF8F7C; --wp--custom--color--error-strong: #FF8F7C; --wp--custom--color--error-surface: #3A1D18; --wp--custom--color--success: #66BB6A; --wp--custom--color--success-surface: #16301A; --wp--custom--color--warning: #F9CF58; --wp--custom--color--warning-strong: #F9CF58; --wp--custom--color--warning-hover: #FFE9A8; --wp--custom--color--warning-surface: #332A14; /* WordPress emits its own default palette regardless of defaultPalette:false, and editor-set has-white-* classes reference it. Point the two that appear in our content at real dark surfaces. */ --wp--preset--color--white: #1C2226; --wp--preset--color--black: #ECEEF0; /* Rule 3: surfaces separate by lightness, not by shadow. A shadow carries almost no information against a dark surface. */ --wp--custom--shadow--card: none; --wp--custom--scrim: rgba(0, 0, 0, 0.6); } html[data-brand="badstugan"]:not([data-theme="light"]) { --wp--preset--color--primary: #869EC1; --wp--preset--color--primary-hover: #9FB4D2; --wp--preset--color--primary-light: #1B2029; --wp--preset--color--primary-disabled: #39404D; --wp--preset--color--dark: #F2EDE1; --wp--preset--color--surface: #15130E; --wp--preset--color--surface-warm: #1C1913; --wp--preset--color--surface-strong: #2A2519; --wp--preset--color--muted: #232017; --wp--preset--color--body-text: #F2EDE1; --wp--preset--color--ink: #F2EDE1; --wp--preset--color--muted-text: #ADA695; --wp--preset--color--muted-soft: #968F7E; --wp--preset--color--hairline: #39331F; --wp--preset--color--hairline-soft: #2B2718; --wp--preset--color--border-strong: #554C33; --wp--preset--color--error: #EF6D57; --wp--custom--color--on-primary: #171F2C; --wp--custom--color--on-inverse: #F2EDE1; --wp--custom--color--on-header: #F2EDE1; --wp--custom--color--header-band: #211C12; --wp--custom--color--surface-card: #232017; --wp--custom--color--surface-tinted: #2C271C; --wp--custom--color--surface-inverse: #1D1A12; --wp--custom--color--surface-inverse-strong: #12100B; --wp--custom--color--error-hover: #FF8F7C; --wp--custom--color--error-strong: #FF8F7C; --wp--custom--color--error-surface: #3A1D18; --wp--custom--color--success: #66BB6A; --wp--custom--color--success-surface: #16301A; --wp--custom--color--warning: #F9CF58; --wp--custom--color--warning-strong: #F9CF58; --wp--custom--color--warning-hover: #FFE9A8; --wp--custom--color--warning-surface: #332A14; /* WordPress emits its own default palette regardless of defaultPalette:false, and editor-set has-white-* classes reference it. Point the two that appear in our content at real dark surfaces. */ --wp--preset--color--white: #232017; --wp--preset--color--black: #F2EDE1; --wp--custom--shadow--card: none; --wp--custom--scrim: rgba(0, 0, 0, 0.6); } /* A photograph looks the same in both schemes, so nothing on top of one may change either. Pin every color role back to its light value inside a hero. Started narrower (surface/ink/white/on-inverse only) but that broke the editorial variant two different ways: surface-warm is its scrim background, and stayed dark while ink was pinned dark too (dark-on-dark, invisible); muted-text (the lede/eyebrow copy) and the lifted primary (the italic accent word) both stayed at their dark-mode values, which don't have enough contrast against a pinned light scrim either. Pinning the whole set this block redefines — rather than only the roles today's markup happens to use — is what actually delivers "unchanged", including editor-set preset classes and future content. theme.css's --sauna-* aliases (e.g. --sauna-muted: var(--wp--preset --color--muted-text)) are declared once at :root. A custom property's computed value is resolved where it's declared, then inherited as an already-resolved value — redefining the preset it points to further down the tree does not make the alias re-resolve. Any alias actually used inside hero CSS has to be redeclared here too, or it keeps whatever the :root-level dark override baked in. */ html[data-brand="sthlmsauna"]:not([data-theme="light"]) .sauna-hero, html[data-brand="sthlmsauna"]:not([data-theme="light"]) .wp-block-cover { --wp--preset--color--primary: #3E6666; --wp--preset--color--primary-hover: #2E4F4F; --wp--preset--color--primary-light: #E5F1EF; --wp--preset--color--primary-disabled: #cfdcdb; --wp--preset--color--dark: #3B4850; --wp--preset--color--surface: #f8f8f8; --wp--preset--color--surface-warm: #faf6ef; --wp--preset--color--surface-strong: #efeae1; --wp--preset--color--muted: #f8f8f8; --wp--preset--color--body-text: #3B4850; --wp--preset--color--ink: #1f2a30; --wp--preset--color--muted-text: #6a7178; --wp--preset--color--muted-soft: #9aa0a5; --wp--preset--color--hairline: #e2dfd6; --wp--preset--color--hairline-soft: #efece4; --wp--preset--color--border-strong: #b8b3a4; --wp--preset--color--error: #a8351a; --wp--preset--color--deep-sea: #244158; --wp--preset--color--ocean-bay: #587978; --wp--preset--color--white: #ffffff; --wp--preset--color--black: #000000; --wp--custom--color--on-primary: #FFFFFF; --wp--custom--color--on-inverse: #F8F8F8; --wp--custom--color--on-header: #1F2A30; --wp--custom--color--header-band: #E5F1EF; --wp--custom--color--surface-card: #FFFFFF; --wp--custom--color--surface-tinted: #FBF9F4; --wp--custom--color--surface-inverse: #3B4850; --wp--custom--color--surface-inverse-strong: #272E33; --wp--custom--color--error-hover: #8d2a13; --wp--custom--color--error-strong: #6F1714; --wp--custom--color--error-surface: #FDE7E7; --wp--custom--color--success: #2E7D32; --wp--custom--color--success-surface: #F0FAF5; --wp--custom--color--warning: #A37000; --wp--custom--color--warning-strong: #5C4400; --wp--custom--color--warning-hover: #3A2A00; --wp--custom--color--warning-surface: #FFF8E1; /* theme.json's light values — the :root-level dark override in this file flattens the card shadow to none and darkens the scrim, but a photograph doesn't change between schemes, so pin these back too. */ --wp--custom--shadow--card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04); --wp--custom--scrim: rgba(20, 16, 10, 0.5); /* Aliases used by hero CSS — redeclared so they re-resolve against the pins above instead of the :root-level dark value. */ --sauna-ink: var(--wp--preset--color--ink); --sauna-muted: var(--wp--preset--color--muted-text); --sauna-hairline: var(--wp--preset--color--hairline); --sauna-elevation-card: var(--wp--custom--shadow--card); --sauna-scrim: var(--wp--custom--scrim); } html[data-brand="badstugan"]:not([data-theme="light"]) .sauna-hero, html[data-brand="badstugan"]:not([data-theme="light"]) .wp-block-cover { --wp--preset--color--primary: #263243; --wp--preset--color--primary-hover: #1a2430; --wp--preset--color--primary-light: #e8ecf0; --wp--preset--color--primary-disabled: #cdd2d8; --wp--preset--color--dark: #263243; --wp--preset--color--surface: #fefcf3; --wp--preset--color--surface-warm: #f9f0d8; --wp--preset--color--surface-strong: #eedfb8; --wp--preset--color--muted: #f5f8f8; --wp--preset--color--body-text: #263243; --wp--preset--color--ink: #171f2c; --wp--preset--color--muted-text: #5b6573; --wp--preset--color--muted-soft: #8d96a3; --wp--preset--color--hairline: #d8d4c4; --wp--preset--color--hairline-soft: #e8e3d2; --wp--preset--color--border-strong: #aea892; --wp--preset--color--error: #a8351a; --wp--preset--color--white: #ffffff; --wp--preset--color--black: #000000; --wp--custom--color--on-primary: #FFFFFF; --wp--custom--color--on-inverse: #FEFCF3; --wp--custom--color--on-header: #FEFCF3; --wp--custom--color--header-band: #263243; --wp--custom--color--surface-card: #FFFFFF; --wp--custom--color--surface-tinted: #FBF4E3; --wp--custom--color--surface-inverse: #263243; --wp--custom--color--surface-inverse-strong: #1a2430; --wp--custom--color--error-hover: #8d2a13; --wp--custom--color--error-strong: #6F1714; --wp--custom--color--error-surface: #FDE7E7; --wp--custom--color--success: #2E7D32; --wp--custom--color--success-surface: #F0FAF5; --wp--custom--color--warning: #A37000; --wp--custom--color--warning-strong: #5C4400; --wp--custom--color--warning-hover: #3A2A00; --wp--custom--color--warning-surface: #FFF8E1; /* theme.json's light values — the :root-level dark override in this file flattens the card shadow to none and darkens the scrim, but a photograph doesn't change between schemes, so pin these back too. */ --wp--custom--shadow--card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04); --wp--custom--scrim: rgba(20, 16, 10, 0.5); /* Aliases used by hero CSS — redeclared so they re-resolve against the pins above instead of the :root-level dark value. */ --sauna-ink: var(--wp--preset--color--ink); --sauna-muted: var(--wp--preset--color--muted-text); --sauna-hairline: var(--wp--preset--color--hairline); --sauna-elevation-card: var(--wp--custom--shadow--card); --sauna-scrim: var(--wp--custom--scrim); } /* wp-login.php's own chrome (body.login) never goes dark — WP-core's login.css doesn't consume our tokens, so the page around it stays its normal light gray regardless of scheme. The "eller" divider in assets/bankid/login.css sits directly on that untouched page (unlike the rest of the BankID UI there, which lives inside our own themed, scheme-aware modal/card surfaces), so it needs to keep reading like light mode even when the OS is set to dark. */ html[data-brand="sthlmsauna"]:not([data-theme="light"]) body.login .bankid-login-or { color: #6a7178; } html[data-brand="badstugan"]:not([data-theme="light"]) body.login .bankid-login-or { color: #5b6573; } /* Tell the UA to render form controls, scrollbars and the canvas dark. Without this, native selects and date pickers stay light. */ html:not([data-theme="light"]) { color-scheme: dark; } } html[data-theme="light"] { color-scheme: light; }