/* * Dark theme for the Poole/Lanyon theme. Applied when carries * data-theme="dark". An inline script in resolves the user's choice * (System / Light / Dark, persisted in localStorage) to a concrete * data-theme before first paint, so: * - "System" follows prefers-color-scheme (and live-updates on OS change), * - "Light"/"Dark" force the theme regardless of the OS setting. * Keying off the attribute (not @media) is what lets the sidebar toggle * override the system preference without changing the system UI. */ html[data-theme="dark"], html[data-theme="dark"] body { background-color: #14161a; color: #c6cbd1; } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .post-title, html[data-theme="dark"] .post-title a, html[data-theme="dark"] .page-title, html[data-theme="dark"] .masthead-title a { color: #e8eaed; } html[data-theme="dark"] .masthead-title small, html[data-theme="dark"] .post-date, html[data-theme="dark"] small { color: #8a9199; } html[data-theme="dark"] a, html[data-theme="dark"] .related-posts li a:hover small { color: #58a6ff; } html[data-theme="dark"] .related-posts li small { color: #8a9199; } html[data-theme="dark"] strong { color: #e8eaed; } html[data-theme="dark"] hr { border-top-color: #2d333b; border-bottom-color: #14161a; } html[data-theme="dark"] code, html[data-theme="dark"] pre { background-color: #1d2127; color: #c6cbd1; } html[data-theme="dark"] .highlight, html[data-theme="dark"] .highlight pre { background-color: #1d2127; } html[data-theme="dark"] .message { background-color: #1d2127; color: #aeb6bf; } html[data-theme="dark"] blockquote { border-left-color: #2d333b; color: #8a9199; } html[data-theme="dark"] table { border-color: #2d333b; } html[data-theme="dark"] td, html[data-theme="dark"] th { border-color: #2d333b; } html[data-theme="dark"] tbody tr:nth-child(odd) td, html[data-theme="dark"] tbody tr:nth-child(odd) th { background-color: #181b20; } /* related-posts separator + pagination (lanyon.css hardcodes light #eee) */ html[data-theme="dark"] .related { border-top-color: #2d333b; } html[data-theme="dark"] .pagination { color: #8a9199; } html[data-theme="dark"] .pagination-item { border-color: #2d333b; } html[data-theme="dark"] a.pagination-item:hover { background-color: #1d2127; } /* word-level audio-sync highlight: brighter green for dark-bg contrast (light mode uses plain `green` in lanyon.css) */ html[data-theme="dark"] .nowplaying { color: #3fb950; text-decoration: underline; } /* lanyon sidebar/toggle: sidebar is already dark; fix the toggle button */ html[data-theme="dark"] .sidebar-toggle { background-color: #14161a; color: #c6cbd1; } /* Reuse the same SVG hamburger as light mode, just recolored light so it reads on the dark button. (The old linear-gradient icon rendered as fat full-width bars that looked oversized next to the crisp light-mode icon.) */ html[data-theme="dark"] .sidebar-toggle::before { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='%23c6cbd1' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M2.5 11.5A.5.5 0 013 11h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 7h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5zm0-4A.5.5 0 013 3h10a.5.5 0 010 1H3a.5.5 0 01-.5-.5z' clip-rule='evenodd'/%3E%3C/svg%3E") no-repeat; } html[data-theme="dark"] #sidebar-checkbox:checked ~ .sidebar-toggle, html[data-theme="dark"] .sidebar-toggle:active { background-color: #2d333b; color: #fff; } /* pagefind search UI (custom props inherit from the html root) */ html[data-theme="dark"] { --pagefind-ui-primary: #58a6ff; --pagefind-ui-text: #c6cbd1; --pagefind-ui-background: #1d2127; --pagefind-ui-border: #2d333b; --pagefind-ui-tag: #2d333b; } /* ASR disagreement marking + popover (see lanyon.css for the light theme). A muted amber under-tint keeps the text readable on the dark page. */ html[data-theme="dark"] .asr-disagreement { background-color: rgba(210,160,40,.22); border-bottom-color: #d2a028; } html[data-theme="dark"] .asr-popover { color: #c6cbd1; background: #1d2127; border-color: #2d333b; box-shadow: 0 4px 16px rgba(0,0,0,.5); } html[data-theme="dark"] .asr-row .asr-eng { color: #9aa0ab; } html[data-theme="dark"] .asr-row.asr-win .asr-said { color: #3fb950; } html[data-theme="dark"] .asr-row.asr-heard .asr-eng { color: #d2a028; } html[data-theme="dark"] .asr-row .asr-hint { color: #8a9199; } html[data-theme="dark"] .asr-verdict { border-top-color: #2d333b; color: #9aa0ab; }