/* * Dark theme for the restored Chronicles site. * * Added during restoration — not part of the original tpSunrise theme. Styles * apply only when is set, which dark-mode.js does on * load from the stored preference, or from the system setting when the visitor * has not chosen one. * * Values below override the theme's own palette: #fff/#000 body, #D7D4D4 and * #e6e6fa wrapper gradient, #180509 masthead, #F2BE76/#F5DEB3 menus. */ :root[data-theme="dark"] { --bg: #16181c; --bg-raised: #1e2126; --bg-inset: #23272e; --text: #e3e6ea; --text-dim: #aab1ba; --heading: #c3cad3; --link: #8fb5e8; --link-alt: #7fa8dc; --border: #3a4048; --accent: #d9b166; } /* ---------- base ---------- */ :root[data-theme="dark"] body { background: var(--bg); color: var(--text); } :root[data-theme="dark"] h1, :root[data-theme="dark"] h2, :root[data-theme="dark"] h3, :root[data-theme="dark"] h4 { color: var(--heading); } :root[data-theme="dark"] a, :root[data-theme="dark"] .gallery-image-link a, :root[data-theme="dark"] #left_col ul li a, :root[data-theme="dark"] #left_col ul li a:hover { color: var(--link); } :root[data-theme="dark"] #right_col ul li a, :root[data-theme="dark"] #right_col ul li a:hover, :root[data-theme="dark"] .sf-menu a, :root[data-theme="dark"] .sf-menu a:visited { color: var(--link-alt); } :root[data-theme="dark"] hr { color: var(--border); background: var(--border); border-color: var(--border); } /* ---------- layout shell ---------- */ /* The theme paints a light vertical gradient here; replace every variant. */ :root[data-theme="dark"] #wrapper2 { background: linear-gradient( to right, #101215 0%, #101215 16%, var(--bg) 17%, var(--bg) 83%, #101215 84%, #101215 100% ); } :root[data-theme="dark"] #footer { background: var(--bg-raised); color: var(--text-dim); } :root[data-theme="dark"] #footer a { color: var(--link-alt); } /* The masthead is already near-black (#180509); just soften its banner image. */ :root[data-theme="dark"] #masthead { background-color: #0e0a0b; } :root[data-theme="dark"] #masthead::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); pointer-events: none; } /* ---------- content blocks ---------- */ :root[data-theme="dark"] .contenttitle, :root[data-theme="dark"] .contentdate h4 { color: var(--text); } :root[data-theme="dark"] blockquote { background: #2b2718; color: var(--text); border-top-color: var(--border); border-bottom-color: var(--border); } :root[data-theme="dark"] .hilite { background: #3d4426; color: var(--text); } :root[data-theme="dark"] ins { background: #2f2a17; color: var(--text); } :root[data-theme="dark"] .sticky, :root[data-theme="dark"] .sf-menu li, :root[data-theme="dark"] .sf-menu li li, :root[data-theme="dark"] .sf-menu li li li { background: var(--bg-inset); } :root[data-theme="dark"] .sf-menu a { border-left-color: var(--border); border-top-color: var(--border); } :root[data-theme="dark"] .commentlist .odd { background-color: #24262c; } :root[data-theme="dark"] .commentlist .even { background-color: #2a2d34; } :root[data-theme="dark"] .wp-caption, :root[data-theme="dark"] .gallery img, :root[data-theme="dark"] .gallery img:hover { background-color: var(--bg-inset); border-color: var(--border); } :root[data-theme="dark"] .gallery .gallery-caption { color: var(--text-dim); } :root[data-theme="dark"] .text_box, :root[data-theme="dark"] #recent_posts, :root[data-theme="dark"] .recent_posts_item { border-color: var(--border); } /* ---------- tables ---------- */ :root[data-theme="dark"] table, :root[data-theme="dark"] table td { border-color: var(--border); } :root[data-theme="dark"] table th { background: var(--bg-inset); color: var(--text); border-color: var(--border); } /* Scanned documents and diagrams are mostly white; take the glare off without distorting photographs. */ :root[data-theme="dark"] img { filter: brightness(0.88); } /* ---------- the switch ---------- */ #theme-toggle { position: fixed; top: 10px; right: 12px; z-index: 9999; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(24, 5, 9, 0.65); color: #fffff4; line-height: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } #theme-toggle:hover { background: rgba(24, 5, 9, 0.85); transform: scale(1.06); } #theme-toggle:focus-visible { outline: 2px solid var(--link, #8fb5e8); outline-offset: 2px; } #theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-theme="dark"] #theme-toggle { background: rgba(35, 39, 46, 0.8); border-color: rgba(255, 255, 255, 0.22); color: #e3e6ea; } /* The icon never animates for visitors who would rather it did not. */ @media (prefers-reduced-motion: reduce) { #theme-toggle, #theme-toggle:hover { transition: none; transform: none; } } @media print { #theme-toggle { display: none; } }