/* ===================================================================== Dark theme — scoped override. Applies when . A tiny inline script in sets that attribute from the saved preference, or from the OS setting when the preference is "auto", before first paint. Only surfaces that actually appear on the page are overridden; Bootstrap itself is left untouched. ===================================================================== */ :root[data-theme="dark"] { --d-bg: #14141a; --d-surface: #1c1c24; --d-surface-2: #23232d; --d-ink: #e8e8f0; --d-ink-2: #c2c2d0; --d-muted: #9494a4; --d-line: #2e2e3a; --d-accent: #9e92ff; } :root[data-theme="dark"] body, :root[data-theme="dark"] #wrapper, :root[data-theme="dark"] #main { background: var(--d-bg); color: var(--d-ink-2); } :root[data-theme="dark"] .page, :root[data-theme="dark"] .pagecontents, :root[data-theme="dark"] .pageheader, :root[data-theme="dark"] .headercontent { background: var(--d-bg); color: var(--d-ink-2); } :root[data-theme="dark"] .section, :root[data-theme="dark"] .section.color-1 { background: var(--d-bg); } :root[data-theme="dark"] .section.color-2 { background: var(--d-surface); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4, :root[data-theme="dark"] h5, :root[data-theme="dark"] .title, :root[data-theme="dark"] .pubtitle, :root[data-theme="dark"] strong, :root[data-theme="dark"] b { color: var(--d-ink); } :root[data-theme="dark"] p, :root[data-theme="dark"] li, :root[data-theme="dark"] td, :root[data-theme="dark"] span, :root[data-theme="dark"] .pubauthor, :root[data-theme="dark"] .pubcite { color: var(--d-ink-2); } :root[data-theme="dark"] a { color: var(--d-accent); } :root[data-theme="dark"] a:hover, :root[data-theme="dark"] a:focus { color: #c3bbff; } /* Sidebar */ :root[data-theme="dark"] #sidebar, :root[data-theme="dark"] #sidebar-wrapper, :root[data-theme="dark"] #sidebar-inner { background: #101015; } :root[data-theme="dark"] #navigation a { color: var(--d-ink-2); } :root[data-theme="dark"] #navigation .currentmenu a, :root[data-theme="dark"] #navigation a:hover { color: #fff; background: #23232d; } :root[data-theme="dark"] #profile h2 { color: var(--d-ink); } :root[data-theme="dark"] #profile h3 { color: var(--d-muted); } /* Cards, rules, panels */ :root[data-theme="dark"] .item, :root[data-theme="dark"] .pubmain, :root[data-theme="dark"] .pubdetails { background: var(--d-surface); border-color: var(--d-line); } :root[data-theme="dark"] hr, :root[data-theme="dark"] .ul-dates li, :root[data-theme="dark"] .timeline li { border-color: var(--d-line); } :root[data-theme="dark"] .ul-boxed li { background: var(--d-surface-2); color: var(--d-ink-2); } /* Components added during the revamp */ :root[data-theme="dark"] .pillars li { background: var(--d-surface-2); border-color: var(--d-line); border-left-color: var(--d-accent); box-shadow: none; } :root[data-theme="dark"] .pillars li strong { color: var(--d-ink); } :root[data-theme="dark"] .pillars li span { color: var(--d-muted); } :root[data-theme="dark"] .pubimplication { border-left-color: #3a3a4a; color: #a8a8ba; } :root[data-theme="dark"] .pubimplication .implabel { color: #7c7c8e; } :root[data-theme="dark"] .profilelinks { color: var(--d-muted); } :root[data-theme="dark"] .profilelinks a { border-color: var(--d-line); color: var(--d-ink-2); } :root[data-theme="dark"] .profilelinks a:hover { border-color: var(--d-accent); color: #fff; } /* Forms, tables, code */ :root[data-theme="dark"] select, :root[data-theme="dark"] input, :root[data-theme="dark"] textarea { background: var(--d-surface-2); color: var(--d-ink); border-color: var(--d-line); } :root[data-theme="dark"] .table > tbody > tr > td, :root[data-theme="dark"] .table > thead > tr > th { border-color: var(--d-line); color: var(--d-ink-2); } /* Images that assume a light ground */ :root[data-theme="dark"] .biothumb img, :root[data-theme="dark"] #profile img { filter: brightness(.92); } /* Theme switch control */ .themeswitch { display: flex; gap: 2px; padding: 10px 16px 4px; } .themeswitch button { flex: 1; padding: 5px 0; font-size: 11px; letter-spacing: .04em; background: transparent; color: #9a9aa8; border: 1px solid rgba(150,150,170,.35); cursor: pointer; min-height: 30px; } .themeswitch button:first-child { border-radius: 3px 0 0 3px; } .themeswitch button:last-child { border-radius: 0 3px 3px 0; } .themeswitch button + button { border-left: 0; } .themeswitch button[aria-pressed="true"] { background: #6c5ce0; border-color: #6c5ce0; color: #fff; } .themeswitch button:focus-visible { outline: 2px solid #9e92ff; outline-offset: 2px; } /* --- Surfaces missed in the first pass -------------------------------- */ :root[data-theme="dark"] #main { background: var(--d-bg); } :root[data-theme="dark"] .page, :root[data-theme="dark"] .home, :root[data-theme="dark"] .color-2 { background: var(--d-surface); } /* Education cards */ :root[data-theme="dark"] ul.ul-card li { background: var(--d-surface-2); border-color: var(--d-line); } /* Honors timeline, expanded state */ :root[data-theme="dark"] ul.timeline li.open .data, :root[data-theme="dark"] .ul-withdetails li .details, :root[data-theme="dark"] #lab-details { background: var(--d-surface-2); border-color: var(--d-line); } /* "Filter by topic" custom dropdown */ :root[data-theme="dark"] .cd-dropdown > span, :root[data-theme="dark"] .cd-dropdown ul li span, :root[data-theme="dark"] select.cd-select { background: var(--d-surface-2); color: var(--d-ink); border-color: var(--d-line); } :root[data-theme="dark"] .cd-dropdown ul li span:hover { background: #2e2e3c; color: #fff; } /* Publication card internals */ :root[data-theme="dark"] .pitems .pubmain { background: var(--d-surface); } :root[data-theme="dark"] .pitems .pubmain .pubassets { background: var(--d-surface-2); } :root[data-theme="dark"] .pitems .pubdetails { background: var(--d-surface-2); } /* Contact panels carry light background images */ :root[data-theme="dark"] .contact-office, :root[data-theme="dark"] .contact-lab { background-color: var(--d-surface-2); } /* Switch sits at the foot of the nav */ .themeswitch { padding: 16px 16px 20px; margin-top: 8px; border-top: 1px solid rgba(150,150,170,.18); } /* Current-work agenda list */ :root[data-theme="dark"] .agenda li { border-bottom-color: var(--d-line); } :root[data-theme="dark"] .agenda li strong { color: var(--d-ink); } :root[data-theme="dark"] .agenda li:before { color: var(--d-accent); } :root[data-theme="dark"] .subtitle h3 { color: var(--d-ink); } /* Topic filter pills */ :root[data-theme="dark"] .topicpill { background: var(--d-surface-2); border-color: var(--d-line); color: var(--d-ink-2); } :root[data-theme="dark"] .topicpill:hover { color: #fff; border-color: var(--pc); } :root[data-theme="dark"] .topicpill.active { background: var(--pc); border-color: var(--pc); color: #fff; }