/* Light/dark colours. style.css keeps the layout; this sheet only sets colours, and in light mode they are the site's original ones. The theme follows the visitor's system setting unless they picked one with the switcher (data-theme="light" or "dark" on ). */ :root { color-scheme: light dark; --page-bg: #F0F0D8; --box-bg: #fff; --box-border: #D8D8C0; --text: #000; --link: LinkText; --link-visited: VisitedText; --logo: #025D8C; --odd-row: #f1f6ff; --page-number: #00F; --active: #000; --row-border: #ccc; --cell-border: #eee; --state-border: #aaa; --state-text: #212121; --icon-filter: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page-bg: #0f1113; --box-bg: #1a1d21; --box-border: #33383e; --text: #e3e5e8; --link: #7db8ff; --link-visited: #c9a8ff; --logo: #6cb8e6; --odd-row: #1f2a36; --page-number: #7db8ff; --active: #fff; --row-border: #3d4249; --cell-border: #2a2e33; --state-border: #4a5058; --state-text: #e3e5e8; --icon-filter: invert(1); } } :root[data-theme="dark"] { color-scheme: dark; --page-bg: #0f1113; --box-bg: #1a1d21; --box-border: #33383e; --text: #e3e5e8; --link: #7db8ff; --link-visited: #c9a8ff; --logo: #6cb8e6; --odd-row: #1f2a36; --page-number: #7db8ff; --active: #fff; --row-border: #3d4249; --cell-border: #2a2e33; --state-border: #4a5058; --state-text: #e3e5e8; --icon-filter: invert(1); } :root[data-theme="light"] { color-scheme: light; } html, body { background: var(--page-bg); } body { color: var(--text); } .container { background-color: var(--box-bg); border-color: var(--box-border); } a:link { color: var(--link); } a:visited { color: var(--link-visited); } .logo, .subtitle, a.logo:link, a.logo:visited { color: var(--logo); } tr.odd { background-color: var(--odd-row); } .page-number { color: var(--page-number); } .active { color: var(--active); } .ui-state-active, .ui-widget-content .ui-state-active { border-color: var(--state-border); color: var(--state-text); } /* jQuery UI's sort icons are dark grey: light in dark mode */ .ui-icon { filter: var(--icon-filter); } @media (max-width: 980px) { td { border-bottom-color: var(--cell-border); } tr { border-color: var(--row-border); } } /* Theme switcher: top right of the header box */ #header { position: relative; } #theme-toggle { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; padding: 6px; border: 1px solid var(--box-border); border-radius: 50%; background: var(--box-bg); color: var(--logo); line-height: 0; cursor: pointer; z-index: 2; } #theme-toggle:hover, #theme-toggle:focus-visible { border-color: var(--logo); } #theme-toggle[hidden] { display: none; } #theme-toggle svg { width: 18px; height: 18px; } #theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #theme-toggle .icon-sun { display: inline; } :root:not([data-theme="light"]) #theme-toggle .icon-moon { display: none; } } :root[data-theme="dark"] #theme-toggle .icon-sun { display: inline; } :root[data-theme="dark"] #theme-toggle .icon-moon { display: none; } /* Ads are light-scheme pages in frames. In dark mode the browser would paint a white backdrop behind them (visible beside ads narrower than their slot); matching schemes keeps it transparent. */ .adsbygoogle, .adsbygoogle iframe { color-scheme: light; }