/** * Dark Mode for the Openstream child theme. * * Strategy: Twenty Twenty-Five drives almost all colours through two semantic * CSS custom properties, --wp--preset--color--base (surfaces) and * --wp--preset--color--contrast (text). Overriding those two on the dark root * flips the majority of blocks automatically. A handful of accents, borders, * shadows and media get explicit treatment below. * * The theme is toggled by setting data-theme="dark" on . See * assets/js/dark-mode.js and the inline anti-flash init in functions.php. */ html[data-theme="dark"] { /* Core surface/text swap. contrast becomes the light ink, base the dark canvas. Kept slightly off-pure to avoid harsh #000/#fff. */ --wp--preset--color--base: #16181c; --wp--preset--color--contrast: #e8e8ea; /* Neutral scale (Twenty Twenty-Five uses 20…80 greys). Invert so that "light grey" surfaces stay subtle against the dark canvas. */ --wp--preset--color--base-2: #202329; --wp--preset--color--20: #2a2d34; --wp--preset--color--30: #333740; --wp--preset--color--40: #454a54; --wp--preset--color--50: #6b7280; --wp--preset--color--60: #98a0ab; --wp--preset--color--70: #c2c7cf; --wp--preset--color--80: #dfe2e6; /* The yellow brand accent stays; darker accents are lightened so links and footer text remain legible on the dark canvas. */ --wp--preset--color--accent-4: #9aa2ad; color-scheme: dark; } /* Ensure the page canvas itself picks up the dark base even where the theme paints body/html background explicitly. */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: var(--wp--preset--color--base); color: var(--wp--preset--color--contrast); } /* Twenty Twenty-Five "section" block styles paint hard-coded light backgrounds (cream, pink, light grey) that ignore the base/contrast swap, which would leave our light contrast text unreadable on them. Remap each light section to a dark surface that preserves its original character. Selectors use the numbered variants Twenty Twenty-Five emits (is-style-section-1, -1--7, etc.), matched with a prefix selector. Text on all remapped sections uses the light contrast ink. */ html[data-theme="dark"] [class*="is-style-section-1"], html[data-theme="dark"] [class*="is-style-section-2"], html[data-theme="dark"] [class*="is-style-section-5"] { color: var(--wp--preset--color--contrast) !important; } /* Section-1 (cream/beige, e.g. the newsletter band): a warm dark brown keeps the beige character and still sits a step above the neutral body. */ html[data-theme="dark"] [class*="is-style-section-1"] { background-color: #22201b !important; } /* Section-2 (pink accent, e.g. "KI-gestützte Entwicklung" callout): a muted dark mauve preserves the warm/pink hint while keeping white text legible. */ html[data-theme="dark"] [class*="is-style-section-2"] { background-color: #2b2230 !important; } /* Yellow brand section: keep the yellow, force dark ink for contrast. */ html[data-theme="dark"] [class*="is-style-section-3"] { color: #16181c !important; } html[data-theme="dark"] [class*="is-style-section-3"] a { color: #16181c !important; } /* Some pages (WooCommerce, Shopify, Magento) build their coloured boxes with direct palette classes (has-accent-N-background-color) instead of the section block styles. These boxes also pin their text to has-base-color (white in light mode). Both the surface and that pinned text colour need remapping so the boxes stay legible in dark mode: accent-1 = yellow -> keep yellow, dark ink accent-2 = pink -> dark mauve, light ink accent-3 = deep purple -> keep purple, light ink (was flipping to dark) accent-5 = cream -> warm dark, light ink The `.has-base-color` overrides beat WordPress's own colour class, which would otherwise force the text to the (now dark) base colour. */ html[data-theme="dark"] .has-accent-1-background-color, html[data-theme="dark"] .has-accent-1-background-color.has-base-color, html[data-theme="dark"] .has-accent-1-background-color a { color: #16181c !important; } html[data-theme="dark"] .has-accent-2-background-color { background-color: #2b2230 !important; } html[data-theme="dark"] .has-accent-3-background-color { /* Purple already reads as dark; only the pinned dark text needs lifting. */ background-color: var(--wp--preset--color--accent-3, #503aa8) !important; } html[data-theme="dark"] .has-accent-5-background-color { background-color: #22201b !important; } /* Light ink for the three dark-surfaced accent boxes, including their pinned base-colour text and links. */ html[data-theme="dark"] .has-accent-2-background-color, html[data-theme="dark"] .has-accent-2-background-color.has-base-color, html[data-theme="dark"] .has-accent-2-background-color a, html[data-theme="dark"] .has-accent-3-background-color, html[data-theme="dark"] .has-accent-3-background-color.has-base-color, html[data-theme="dark"] .has-accent-3-background-color a, html[data-theme="dark"] .has-accent-5-background-color, html[data-theme="dark"] .has-accent-5-background-color.has-base-color, html[data-theme="dark"] .has-accent-5-background-color a { color: var(--wp--preset--color--contrast) !important; } /* Split phone component (contact page) uses hard-coded #111 (near-black) for the large number and #686868 for the labels, both of which are unreadable on the dark canvas. Lift the resting colours and invert the hover so it stays a filled highlight (light background, dark ink) in dark mode. */ html[data-theme="dark"] .split-phone__bottom, html[data-theme="dark"] .split-phone__label--bottom { color: var(--wp--preset--color--contrast); } html[data-theme="dark"] .split-phone__top, html[data-theme="dark"] .split-phone__label--top { color: var(--wp--preset--color--60, #98a0ab); } html[data-theme="dark"] .split-phone__number a:hover, html[data-theme="dark"] .split-phone__label:hover, html[data-theme="dark"] .split-phone:has(.split-phone__top:hover) .split-phone__label--top, html[data-theme="dark"] .split-phone:has(.split-phone__bottom:hover) .split-phone__label--bottom, html[data-theme="dark"] .split-phone:has(.split-phone__label--top:hover) .split-phone__top, html[data-theme="dark"] .split-phone:has(.split-phone__label--bottom:hover) .split-phone__bottom { background-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); } /* Images and video: take a little edge off pure-white artwork so it does not glare against the dark canvas. Logos/illustrations stay recognisable. */ html[data-theme="dark"] img:not(.wp-image-emoji), html[data-theme="dark"] video { filter: brightness(0.92) contrast(1.02); } /* The PSP comparison table (and stripes generally) needs its odd-row tint redefined, otherwise the light stripe stays near-white. */ html[data-theme="dark"] .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: var(--wp--preset--color--20); } html[data-theme="dark"] .wp-block-table th, html[data-theme="dark"] .wp-block-table td { border-color: var(--wp--preset--color--30); } /* Code and preformatted blocks. */ html[data-theme="dark"] :where(pre, code, kbd) { background-color: var(--wp--preset--color--20); color: var(--wp--preset--color--80); } /* Table of contents (Rank Math). In light mode the first level is a mid-grey (#555) and deeper levels inherit the dark body text, so they read alike. In dark mode the deeper levels would inherit the light contrast ink and turn near-white, standing out from the grey top level. Put every level on one muted light grey so the list reads as a whole. */ html[data-theme="dark"] .wp-block-rank-math-toc-block nav a, html[data-theme="dark"] .wp-block-rank-math-toc-block nav > ul > li > a { color: var(--wp--preset--color--60, #98a0ab); } /* Rank Math FAQ / TOC hairlines. */ html[data-theme="dark"] .wp-block-rank-math-toc-block, html[data-theme="dark"] .rank-math-faq-item { border-color: var(--wp--preset--color--30); } /* Newsletter form inputs use currentColor borders, which already adapt, but the transparent background can trap a light autofill. Keep them readable. */ html[data-theme="dark"] .os-nl-form input[type="text"], html[data-theme="dark"] .os-nl-form input[type="email"] { background-color: var(--wp--preset--color--20); } /* Section-5 (the "GRÜEZI" band) is black in light mode, which sets it apart from the surrounding white sections. Remapping it to base would make it blend into the body. Give it a slightly raised surface so the visual separation from the neighbouring sections survives in dark mode. */ html[data-theme="dark"] [class*="is-style-section-5"] { background-color: var(--wp--preset--color--20) !important; } /* Typing subtitle under the logo. The static and dynamic parts use hard-coded mid-greys (#3a3a3a / #5a5a5a) that are too dark on the dark canvas. Lift both a notch so the animated line stays readable. */ html[data-theme="dark"] .typing-static, html[data-theme="dark"] .typing-dash { color: #9a9a9c; } html[data-theme="dark"] .typing-dynamic-wrapper, html[data-theme="dark"] .typing-dynamic { color: #c2c2c4; } html[data-theme="dark"] .typing-cursor { /* The blinking cursor is a small background bar; lift it to match. */ background-color: #c2c2c4; } /* Keyword pills sit on the yellow brand section. Because they are built from the base/contrast pair, the light/dark swap turns them light-grey with dark text, which is low-contrast on yellow and becomes unreadable on the dark hover. Make them dark pills with light text so they read clearly on the yellow band, in both resting and hover states. */ html[data-theme="dark"] .wp-block-tag-cloud.is-style-pill a { background-color: var(--wp--preset--color--30) !important; color: var(--wp--preset--color--contrast) !important; } html[data-theme="dark"] .wp-block-tag-cloud.is-style-pill a:hover { background-color: var(--wp--preset--color--50) !important; color: var(--wp--preset--color--contrast) !important; } /* ------------------------------------------------------------------------- Toggle control (rendered in the footer by dark-mode.js) ------------------------------------------------------------------------- */ .os-theme-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; border: 1px solid var(--wp--preset--color--40, #ccc); border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: var(--wp--preset--font-size--small, 0.875rem); line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .os-theme-toggle:hover, .os-theme-toggle:focus-visible { border-color: currentColor; } .os-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* Icon swaps with the active theme: show the moon in light mode (click to go dark) and the sun in dark mode (click to go light). */ .os-theme-toggle__icon { width: 1.1em; height: 1.1em; flex: none; } .os-theme-toggle__icon--sun { display: none; } html[data-theme="dark"] .os-theme-toggle__icon--moon { display: none; } html[data-theme="dark"] .os-theme-toggle__icon--sun { display: inline-block; } /* Wrapper keeps the toggle from stretching full-width in the flex footer. */ .os-theme-toggle-wrap { display: flex; justify-content: flex-start; margin-top: var(--wp--preset--spacing--30, 1rem); }