@layer legacy { /* ============================================================ DARK MODE Applied when: - [data-theme="dark"] on (JS time-based), OR - browser prefers dark AND no explicit [data-theme="light"] ============================================================ */ /* Shared dark variable definitions via :where() so specificity stays low */ :where([data-theme="dark"]), :where(:root:not([data-theme="light"])):has(+ * + *) { /* fallback placeholder */ } /* ---- Browser preference ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; /* !important: variables.css's plain :root rule declares these same custom properties with equal specificity and loads later in the cascade, so without !important it silently wins and dark mode never actually changes the variable values. */ --background-color: #0f172a !important; --background-color-variant-2: #0f172a !important; --text-color: #f1f5f9 !important; --color-grey-light: #334155 !important; --form-bg: #1e293b !important; --form-border: #334155 !important; --form-text: #f1f5f9 !important; --form-placeholder: #64748b !important; --form-label: #94a3b8 !important; --form-help: #64748b !important; --form-disabled: #273548 !important; --secondary-text-color: #888 !important; --primary-text-color: #f1f5f9 !important; --primary-text-color-inverse: #0f172a !important; } :root:not([data-theme="light"]) body { background-color: #0f172a; color: #f1f5f9; } :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3 { color: #f1f5f9; } :root:not([data-theme="light"]) .label { color: #94a3b8; } :root:not([data-theme="light"]) .session, :root:not([data-theme="light"]) .review, :root:not([data-theme="light"]) .review-form, :root:not([data-theme="light"]) .spot--card { background-color: #1e293b; border-color: #334155; color: #f1f5f9; } :root:not([data-theme="light"]) .input, :root:not([data-theme="light"]) .textarea, :root:not([data-theme="light"]) .select, :root:not([data-theme="light"]) .input--textarea { background-color: #273548; border-color: #334155; color: #f1f5f9; } /* :root:not([data-theme="light"]) .rating-bar__segment { background: #273548; color: #94a3b8; } */ :root:not([data-theme="light"]) fieldset { background: #1e293b; border-color: #334155; } :root:not([data-theme="light"]) fieldset legend { color: #94a3b8; } :root:not([data-theme="light"]) .session-list__day-title { color: #f1f5f9; } :root:not([data-theme="light"]) .button--icon, :root:not([data-theme="light"]) .button--delete { --button-background-color-hover: rgba(255, 255, 255, 0.1); &:active { --button-background-color-hover: rgba(255, 255, 255, 0.18); } } :root:not([data-theme="light"]) .button--color-grey, :root:not([data-theme="light"]) .button--grey { --button-background-color: #334155; --button-background-color-hover: color-mix(in oklab, #334155, white 12%); --button-text-color: #cbd5e1; } :root:not([data-theme="light"]) .spot-show-hero__panel { background: #1e293b; border-color: #334155; } :root:not([data-theme="light"]) .sub-header--app-bar { border-color: #334155; } /* No-data forecast cells (wind--no-color / wave--no-color) have a transparent background, so their forced-black text (element-colors.css) is invisible against the dark page background. */ :root:not([data-theme="light"]) .wind--no-color, :root:not([data-theme="light"]) .wave--no-color { color: #f1f5f9 !important; } } /* ---- JS-forced dark (time-based) ---- */ [data-theme="dark"] { color-scheme: dark; /* !important: variables.css's plain :root rule declares these same custom properties with equal specificity and loads later in the cascade, so without !important it silently wins and dark mode never actually changes the variable values. */ --background-color: #0f172a !important; --background-color-variant-2: #0f172a !important; --text-color: #f1f5f9 !important; --color-grey-light: #334155 !important; --form-bg: #1e293b !important; --form-border: #334155 !important; --form-text: #f1f5f9 !important; --form-placeholder: #64748b !important; --form-label: #94a3b8 !important; --form-help: #64748b !important; --form-disabled: #273548 !important; --primary-text-color: #f1f5f9 !important; --primary-text-color-inverse:#0f172a !important; /* --secondary-text-color: #94a3b8; */ --secondary-text-color: #888 !important; } [data-theme="dark"] body { background-color: #0f172a; color: #f1f5f9; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: #f1f5f9; } [data-theme="dark"] .label { color: #94a3b8; } [data-theme="dark"] .session, [data-theme="dark"] .review, [data-theme="dark"] .review-form, [data-theme="dark"] .spot--card { background-color: #1e293b; border-color: #334155; color: #f1f5f9; } [data-theme="dark"] .input, [data-theme="dark"] .textarea, [data-theme="dark"] .select, [data-theme="dark"] .input--textarea { background-color: #273548; border-color: #334155; color: #f1f5f9; } [data-theme="dark"] .rating-bar__segment { background: #273548; color: #94a3b8; } [data-theme="dark"] fieldset { background: #1e293b; border-color: #334155; } [data-theme="dark"] fieldset legend { color: #94a3b8; } [data-theme="dark"] .session-list__day-title { color: #f1f5f9; } [data-theme="dark"] .button--icon, [data-theme="dark"] .button--delete { --button-background-color-hover: rgba(255, 255, 255, 0.1); &:active { --button-background-color-hover: rgba(255, 255, 255, 0.18); } } [data-theme="dark"] .button--color-grey, [data-theme="dark"] .button--grey { --button-background-color: #334155; --button-background-color-hover: color-mix(in oklab, #334155, white 12%); --button-text-color: #cbd5e1; } [data-theme="dark"] .spot-show-hero__panel { background: #1e293b; border-color: #334155; } [data-theme="dark"] .sub-header--app-bar { border-color: #334155; } /* No-data forecast cells (wind--no-color / wave--no-color) have a transparent background, so their forced-black text (element-colors.css) is invisible against the dark page background. */ [data-theme="dark"] .wind--no-color, [data-theme="dark"] .wave--no-color { color: #f1f5f9 !important; } }