/** * 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). * * The toggle button styles are at the bottom. */ /* ─── Light mode overrides ─── */ [data-color-mode="light"] { --wp--preset--color--background: #FFFFFF; --wp--preset--color--foreground: #08080A; --wp--preset--color--card: #F4F4F5; --wp--preset--color--card-hover: #E8E8EA; --wp--preset--color--muted: #F4F4F5; --wp--preset--color--muted-foreground: #71717A; --wp--preset--color--border: #E3E3E7; --wp--preset--color--dark-surface-100: #F4F4F5; --wp--preset--color--dark-surface-200: #EAEAEC; } /* Ensure WP block editor background colors follow the mode */ [data-color-mode="light"] .has-background-background-color { background-color: #FFFFFF !important; } [data-color-mode="light"] .has-foreground-color { color: #08080A !important; } [data-color-mode="light"] .has-card-background-color { background-color: #F4F4F5 !important; } [data-color-mode="light"] .has-muted-foreground-color { color: #71717A !important; } [data-color-mode="light"] .has-dark-surface-100-background-color { background-color: #F4F4F5 !important; } [data-color-mode="light"] .has-dark-surface-200-background-color { background-color: #EAEAEC !important; } /* Border colors in light mode */ [data-color-mode="light"] .has-border-color { color: #E3E3E7 !important; } [data-color-mode="light"] .has-border-background-color { background-color: #E3E3E7 !important; } [data-color-mode="light"] .wp-block-separator { border-color: #E3E3E7 !important; } /* Sticky header background in light mode */ [data-color-mode="light"] header.wp-block-group { background-color: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px); } /* Cover block stays dark regardless of mode (hero sections) */ [data-color-mode="light"] .wp-block-cover { color: #F9F9F9; } [data-color-mode="light"] .wp-block-cover .has-foreground-color { color: #F9F9F9 !important; } [data-color-mode="light"] .wp-block-cover .has-muted-foreground-color { color: #A1A1A9 !important; } /* ─── 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; }