/** * Site-wide dark mode. * * One global toggle (the sun/moon button in the header, wired by * assets/js/site-theme.js) drives everything below via a single * `data-theme="dark"` attribute set on — never per-page, never * per-component. Because nearly every color in base.css/components.css * already reads its value from a `var(--wp--preset--color--*, )` * custom property (WordPress emits these on `:root` from theme.json's * palette), redefining those same custom properties here cascades to * the whole site with no per-component changes needed. The two things * that DON'T come from theme.json tokens — CodeMirror's own syntax- * highlighting classes, and this toggle button's own icon-swap — get * their own rules below, same pattern the old per-editor toggle used * before it was consolidated into this one global switch. * * `html[data-theme="dark"]` (element + attribute, specificity 0,1,1) * reliably beats WordPress core's own generated `:root{...}` block * (specificity 0,1,0) regardless of stylesheet load order, so no * `!important` is needed anywhere in this file. */ html[data-theme="dark"] { --wp--preset--color--base: #14161c; --wp--preset--color--contrast: #e4e6eb; --wp--preset--color--surface: #1c1f27; --wp--preset--color--border: #2a2e37; --wp--preset--color--primary: #5b9dff; --wp--preset--color--primary-dark: #8ec1ff; --wp--preset--color--success: #4ade80; --wp--preset--color--success-bg: #123320; --wp--preset--color--danger: #f87171; --wp--preset--color--danger-bg: #3a1414; --wp--preset--color--warning: #fbbf24; --wp--preset--color--warning-bg: #3a2c0d; --wp--preset--color--warning-accent: #fcd34d; --wp--preset--shadow--sm: 0 1px 2px rgba(0, 0, 0, .4); --wp--preset--shadow--md: 0 4px 16px rgba(0, 0, 0, .45); --wp--preset--shadow--lg: 0 12px 32px rgba(0, 0, 0, .55); /* Only these 6 of the 15 category-accent hues get a dark-mode swap — the other 9 already clear 3:1 against the new dark background (verified: computed WCAG contrast of every accent-* token against #14161c). These 6 were picked as "dark, sophisticated" tones for a WHITE background (a brown, a slate, a deep indigo/purple/red/pink) and become dark-on-dark once the background itself goes dark — e.g. accent-government #334155 measured 1.75:1 (illegible) as a badge's own text color. Lightened, same hue family, 5.4–8.3:1. */ --wp--preset--color--accent-dev: #8b7cf6; --wp--preset--color--accent-image: #f472b6; --wp--preset--color--accent-finance: #e0a458; --wp--preset--color--accent-security: #f87171; --wp--preset--color--accent-government: #94a3b8; --wp--preset--color--accent-salary: #c084fc; } /* --- Global theme toggle button (header) --------------------------- */ .vp-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--wp--preset--color--border, #e2e5ea); border-radius: var(--wp--custom--radius--small, 4px); background: transparent; color: var(--wp--preset--color--contrast, #14181f); cursor: pointer; flex-shrink: 0; } .vp-theme-toggle:hover { border-color: var(--wp--preset--color--primary, #1d4ed8); color: var(--wp--preset--color--primary, #1d4ed8); } .vp-theme-toggle__icon--moon { display: none; } .vp-theme-toggle[aria-pressed="true"] .vp-theme-toggle__icon--sun { display: none; } .vp-theme-toggle[aria-pressed="true"] .vp-theme-toggle__icon--moon { display: block; } /* --- CodeMirror editors --------------------------------------------- * Hand-picked dark palette (not a vendored CodeMirror theme file) — * targets the token classes CodeMirror 5's own highlighter emits. * `.vp-code-editor--readonly` gets an explicit combined selector so it * isn't stuck showing the light readonly background (see * components.css's plain `.vp-code-editor--readonly` rule) — matching * specificity tier, but the extra `html[...]` beats it either way. */ html[data-theme="dark"] .CodeMirror.vp-code-editor { background: #1a1d24; color: #e4e6eb; } html[data-theme="dark"] .CodeMirror.vp-code-editor.vp-code-editor--readonly { background: #1a1d24; } html[data-theme="dark"] .CodeMirror.vp-code-editor .CodeMirror-gutters { background: #14161c; border-right-color: #2a2e37; } html[data-theme="dark"] .CodeMirror.vp-code-editor.vp-code-editor--readonly .CodeMirror-gutters { background: #14161c; } html[data-theme="dark"] .CodeMirror.vp-code-editor .CodeMirror-linenumber { color: #5b6270; } html[data-theme="dark"] .CodeMirror.vp-code-editor .CodeMirror-cursor { border-left-color: #ffffff; } html[data-theme="dark"] .CodeMirror.vp-code-editor div.CodeMirror-selected { background: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .CodeMirror.vp-code-editor .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.05); } html[data-theme="dark"] .CodeMirror.vp-code-editor .CodeMirror-matchingbracket { color: #ffffff !important; background: rgba(255, 255, 255, 0.15); } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-keyword { color: #b490f0; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-atom { color: #f78c6c; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-number { color: #f78c6c; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-def { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-variable { color: #e4e6eb; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-variable-2 { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-variable-3 { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-property { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-operator { color: #89ddff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-comment { color: #6b7280; font-style: italic; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-string { color: #7ee787; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-string-2 { color: #7ee787; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-meta { color: #89ddff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-qualifier { color: #f78c6c; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-builtin { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-bracket { color: #9aa1ac; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-tag { color: #ff8fa3; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-attribute { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-hr { color: #6b7280; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-link { color: #82aaff; } html[data-theme="dark"] .CodeMirror.vp-code-editor .cm-error { color: #ff6b6b; } html[data-theme="dark"] .CodeMirror.vp-code-editor .vp-editor-error-line { background: rgba(248, 113, 113, 0.35) !important; } html[data-theme="dark"] .CodeMirror.vp-code-editor .vp-editor-error-line--approximate { background: rgba(251, 191, 36, 0.35) !important; } /* --- Government card placeholder icons ------------------------------- * `.vp-gov-visual--*` (components.css) tints its background with * `color-mix(in srgb, 10%, var(--surface))` and draws the icon * at 55% opacity, in that same accent color — on a light surface this * leaves a clearly visible tint + icon. On the dark surface, raising * just the tint % and icon opacity (a first attempt at this fix) turned * out to make it WORSE, not better: mixing more of the *same hue* into * the background makes background and icon more similar, not more * distinct — measured live, background+icon at the original accent * colors topped out around 2.4-2.9:1 even at 100% opacity and 0% tint, * because several of these accent tokens (accent-files, accent-utility, * accent-ai, accent-web) just aren't light enough themselves to read as * an icon on a near-black surface, independent of tint/opacity. Real * fix: distinct, lightened colors for just this icon-on-dark-surface * case (not the same as this session's other accent-token dark-mode * overrides, which fix *text/border* contrast at full opacity on the * plain page background — a different situation) — verified via a real * contrast calculation at each variant's actual tint(12%)+opacity(90%), * all landing at 4.3:1+. */ html[data-theme="dark"] .vp-gov-visual__icon { opacity: 0.9; } html[data-theme="dark"] .vp-gov-visual--placeholder { background: color-mix(in srgb, #94a3b8 12%, var(--wp--preset--color--surface, #1c1f27)); color: #94a3b8; } html[data-theme="dark"] .vp-gov-visual--scheme { background: color-mix(in srgb, #fb923c 12%, var(--wp--preset--color--surface, #1c1f27)); color: #fb923c; } html[data-theme="dark"] .vp-gov-visual--service { background: color-mix(in srgb, #38bdf8 12%, var(--wp--preset--color--surface, #1c1f27)); color: #38bdf8; } html[data-theme="dark"] .vp-gov-visual--scholarship { background: color-mix(in srgb, #4ade80 12%, var(--wp--preset--color--surface, #1c1f27)); color: #4ade80; } html[data-theme="dark"] .vp-gov-visual--jobs { background: color-mix(in srgb, #a78bfa 12%, var(--wp--preset--color--surface, #1c1f27)); color: #a78bfa; }