/* ============================================================ 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; --background-color: #0f172a; --text-color: #f1f5f9; --color-grey-light: #334155; --form-bg: #1e293b; --form-border: #334155; --form-text: #f1f5f9; --form-placeholder: #64748b; --form-label: #94a3b8; --form-help: #64748b; --form-disabled: #273548; --secondary-text-color: #888; --primary-text-color: #f1f5f9; --primary-text-color-inverse: #0f172a; } :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"]) .two-factor-setup__secret { background: #273548; color: #f1f5f9; } :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-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; } } /* ---- JS-forced dark (time-based) ---- */ [data-theme="dark"] { color-scheme: dark; --background-color: #0f172a; --text-color: #f1f5f9; --color-grey-light: #334155; --form-bg: #1e293b; --form-border: #334155; --form-text: #f1f5f9; --form-placeholder: #64748b; --form-label: #94a3b8; --form-help: #64748b; --form-disabled: #273548; --primary-text-color: #f1f5f9; --primary-text-color-inverse:#0f172a; /* --secondary-text-color: #94a3b8; */ --secondary-text-color: #888; } [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"] .two-factor-setup__secret { background: #273548; color: #f1f5f9; } [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-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; }