/* ============================================================ DASH YIELD - DARK MODE Loaded after style.css. Activate with: ============================================================ */ html[data-theme="dark"] { color-scheme: dark; --page-bg: #11171b; --card: rgba(27, 34, 39, .97); --card-soft: rgba(27, 34, 39, .84); --border: #354149; --text: #e2e8eb; --muted: #a5afb5; --dash-dark: #8ec9ff; --shadow: 0 5px 22px rgba(0, 0, 0, .28); } html[data-theme="dark"] body { background: linear-gradient(135deg, #0d1215 0%, var(--page-bg) 100%); } html[data-theme="dark"] .dash-logo { content: url("images/dash-d-250-light.png"); } html[data-theme="dark"] .meta-panel { background: rgba(28, 35, 40, .72); border-left-color: rgba(0, 141, 228, .48); } html[data-theme="dark"] .box { background: var(--card); border-color: var(--border); box-shadow: var(--shadow); } html[data-theme="dark"] .box:hover { border-color: #52616a; box-shadow: 0 8px 28px rgba(0, 0, 0, .38); } html[data-theme="dark"] .share-box { color: #dbe9ef; background: rgba(27, 34, 39, .88); border-color: var(--border); } html[data-theme="dark"] .share-box:hover { background: #303b42; } html[data-theme="dark"] select.menu, html[data-theme="dark"] option.menu { color: var(--text); background: #20292f; border-color: #4a5962; } html[data-theme="dark"] input.partial { color: var(--text); background: rgba(32, 41, 47, .96); border-color: #4a5962; } html[data-theme="dark"] .separator { color: #718089; } html[data-theme="dark"] .bubble { color: #f3f6f7; background: #56636a; } html[data-theme="dark"] .bubble:hover { background-color: #74838b; } html[data-theme="dark"] hr { border-top-color: #43535c; } html[data-theme="dark"] .node-card { background: rgba(35, 44, 50, .96); border-color: #46545c; } html[data-theme="dark"] .history-node { background: rgba(32, 40, 46, .96); border-color: #46545c; } html[data-theme="dark"] .node-setting, html[data-theme="dark"] .result-note, html[data-theme="dark"] .about, html[data-theme="dark"] .peryear { color: #aeb9bf; } html[data-theme="dark"] .arrow { color: #8ec9ff; } html[data-theme="dark"] .history-node h3 { color: #b9dcff; } html[data-theme="dark"] div.new { color: #f4f7e8; background-color: #4f5720; border-left: 3px solid #cbd46b; } html[data-theme="dark"] .tippy-content, html[data-theme="dark"] .tippy-box { /* color: #f4f7f8; */ color: #294d59; /* background: #182126; */ } html[data-theme="dark"] .tippy-box .tippy-arrow { /* color: #182126; */ } /* Keep the blue Dash identity colours, but make the surrounding text readable against the dark background. */ html[data-theme="dark"] .blue { color: #42aef0; } html[data-theme="dark"] a, html[data-theme="dark"] a:visited { color: #54b9f4; } html[data-theme="dark"] .hint { color: #a9d8f7; } /* Existing bright-yellow update effect remains deliberately visible. */ html[data-theme="dark"] .pricealert { color: #fff; background: #c92f2f; } /* The animation overlay is intentionally white in both modes. */ html[data-theme="dark"] .visit-animation { background: rgba(255, 255, 255, .8); } @media (prefers-reduced-motion: reduce) { html[data-theme="dark"] .visit-animation { animation-duration: .01ms; } }