/** * Color Mode Switching * * Remaps semantic WP color custom properties when data-color-mode="light" * is set on . The dark palette is the default (set in theme.json). * * All color values are chosen to meet WCAG 2.1 AA contrast requirements * (4.5:1 for normal text, 3:1 for large text and UI components). */ /* ─── Dark mode: brighten primary for legibility ─── */ /* The default primary (#16A149) is too muted on dark backgrounds. Brighten for text, borders, links, AND button backgrounds. */ [data-color-mode="dark"] .has-primary-color, :not([data-color-mode="light"]) .has-primary-color { color: #22C55E !important; } [data-color-mode="dark"] .has-primary-border-color, :not([data-color-mode="light"]) .has-primary-border-color { border-color: #22C55E !important; } [data-color-mode="dark"] a:not(.wp-block-button__link), :not([data-color-mode="light"]) a:not(.wp-block-button__link):not([class*="has-"]) { color: #22C55E; } /* Dark mode: brighten primary button backgrounds */ [data-color-mode="dark"] .has-primary-background-color, :not([data-color-mode="light"]) .has-primary-background-color { background-color: #22C55E !important; } [data-color-mode="dark"] .wp-block-button__link.has-primary-background-color:hover, :not([data-color-mode="light"]) .wp-block-button__link.has-primary-background-color:hover { background-color: #16A149 !important; } /* Dark mode: outline button text and border must be light on dark backgrounds */ [data-color-mode="dark"] .is-style-outline .wp-block-button__link, :not([data-color-mode="light"]) .is-style-outline .wp-block-button__link { color: #F9F9F9 !important; border-color: #A1A1A9 !important; } [data-color-mode="dark"] .is-style-outline .wp-block-button__link:hover, :not([data-color-mode="light"]) .is-style-outline .wp-block-button__link:hover { color: #FFFFFF !important; border-color: #F9F9F9 !important; } /* ─── Light mode: custom property overrides ─── */ [data-color-mode="light"] { /* Backgrounds */ --wp--preset--color--background: #FFFFFF; --wp--preset--color--card: #F7F7F8; --wp--preset--color--card-hover: #EDEDF0; --wp--preset--color--muted: #F7F7F8; --wp--preset--color--dark-surface-100: #F2F2F4; --wp--preset--color--dark-surface-200: #EAEAED; /* Text */ --wp--preset--color--foreground: #08080A; --wp--preset--color--muted-foreground: #5C5C66; --wp--preset--color--border: #DCDCE2; /* Primary — darkened for AA contrast on white (5.03:1) */ --wp--preset--color--primary: #128039; --wp--preset--color--primary-hover: #0E6B2F; } /* ─── Light mode: WP utility class overrides ─── */ /* Background colors */ [data-color-mode="light"] .has-background-background-color { background-color: var(--wp--preset--color--background) !important; } [data-color-mode="light"] .has-card-background-color { background-color: var(--wp--preset--color--card) !important; } [data-color-mode="light"] .has-dark-surface-100-background-color { background-color: var(--wp--preset--color--dark-surface-100) !important; } [data-color-mode="light"] .has-dark-surface-200-background-color { background-color: var(--wp--preset--color--dark-surface-200) !important; } /* Text colors */ [data-color-mode="light"] .has-foreground-color { color: var(--wp--preset--color--foreground) !important; } [data-color-mode="light"] .has-muted-foreground-color { color: var(--wp--preset--color--muted-foreground) !important; } [data-color-mode="light"] .has-primary-color { color: var(--wp--preset--color--primary) !important; } /* Border colors */ [data-color-mode="light"] .has-border-color { border-color: var(--wp--preset--color--border) !important; } [data-color-mode="light"] .has-border-background-color { background-color: var(--wp--preset--color--border) !important; } [data-color-mode="light"] .has-primary-border-color { border-color: var(--wp--preset--color--primary) !important; } [data-color-mode="light"] .wp-block-separator { border-color: var(--wp--preset--color--border) !important; } /* Button overrides — primary buttons keep white text on green */ [data-color-mode="light"] .has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; } [data-color-mode="light"] .wp-block-button__link.has-primary-background-color:hover { background-color: var(--wp--preset--color--primary-hover) !important; } /* Outline button text stays primary green */ [data-color-mode="light"] .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--primary) !important; border-color: var(--wp--preset--color--primary) !important; } [data-color-mode="light"] .is-style-outline .wp-block-button__link:hover { color: var(--wp--preset--color--primary-hover) !important; border-color: var(--wp--preset--color--primary-hover) !important; } /* Links in body text */ [data-color-mode="light"] a:not(.wp-block-button__link) { color: var(--wp--preset--color--primary); } [data-color-mode="light"] a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--primary-hover); } /* Sticky header */ [data-color-mode="light"] header.wp-block-group { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px); } /* Footer background */ [data-color-mode="light"] footer.wp-block-group { background-color: var(--wp--preset--color--background) !important; border-top-color: var(--wp--preset--color--border) !important; } /* Navigation text */ [data-color-mode="light"] .wp-block-navigation a { color: var(--wp--preset--color--foreground) !important; } [data-color-mode="light"] .wp-block-navigation a:hover { color: var(--wp--preset--color--primary) !important; } /* ─── Cover blocks respond to light mode ─── */ /* Cover blocks (hero sections) follow the site color mode. In light mode, the overlay picks up the light background via the custom property overrides above. */ [data-color-mode="light"] .wp-block-cover .wp-block-cover__background, [data-color-mode="light"] .wp-block-cover .has-background-background-color { background-color: var(--wp--preset--color--background) !important; } [data-color-mode="light"] .wp-block-cover { color: var(--wp--preset--color--foreground); } [data-color-mode="light"] .wp-block-cover .has-foreground-color { color: var(--wp--preset--color--foreground) !important; } [data-color-mode="light"] .wp-block-cover .has-muted-foreground-color { color: var(--wp--preset--color--muted-foreground) !important; } [data-color-mode="light"] .wp-block-cover .has-primary-color { color: var(--wp--preset--color--primary) !important; } /* Buttons inside cover in light mode */ [data-color-mode="light"] .wp-block-cover .wp-block-button__link.has-primary-background-color { background-color: var(--wp--preset--color--primary) !important; } [data-color-mode="light"] .wp-block-cover .wp-block-button__link.has-surface-color { color: #FFFFFF !important; } [data-color-mode="light"] .wp-block-cover .is-style-outline .wp-block-button__link { color: var(--wp--preset--color--foreground) !important; border-color: var(--wp--preset--color--muted-foreground) !important; } /* ─── Form inputs in light mode ─── */ [data-color-mode="light"] .psl-form-input { background: var(--wp--preset--color--background); color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--border); } [data-color-mode="light"] .psl-form-input:focus { border-color: var(--wp--preset--color--primary); box-shadow: 0 0 0 3px rgba(18, 128, 57, 0.15); } /* ─── Color mode toggle button ─── */ .psl-color-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--wp--preset--color--border); border-radius: 8px; background: transparent; color: var(--wp--preset--color--muted-foreground); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; font-size: 1.125rem; line-height: 1; } .psl-color-toggle:hover { color: var(--wp--preset--color--foreground); border-color: var(--wp--preset--color--foreground); } /* ─── Smooth transition between modes ─── */ html.psl-color-transitioning, html.psl-color-transitioning *, html.psl-color-transitioning *::before, html.psl-color-transitioning *::after { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important; }