/* * Colour theme. * * Switching works by toggling the "dark" class on , which is also what * the DataTables 2 stylesheet keys its own dark theme off -- so the table * follows along by itself and we only need to colour the surrounding page. * The dark values below are DataTables' own, to keep the two in step. * * The "color-scheme" property makes the browser render native widgets (the * number inputs, the reset button, scrollbars) to match, so those need no * explicit colours of their own. * * The preference is applied by the inline script in index.html, early enough * to avoid a flash of the wrong theme on load. */ :root { color-scheme: light; --bg: #ffffff; --fg: #202020; --muted: #595959; --link: #0645ad; --link-visited: #663366; } :root.dark { color-scheme: dark; --bg: rgb(33, 37, 41); /* == DataTables' --dt-html-background */ --fg: #e3e3e3; --muted: #a0a4a8; --link: #7cb0f0; --link-visited: #c2a3d8; } html, body { background-color: var(--bg); color: var(--fg); } a { color: var(--link); } a:visited { color: var(--link-visited); } small { color: var(--muted); } #theme-switch { float: right; margin: 0.5em 0 0.5em 1.5em; font-size: 0.9em; } #filter-options { margin: 0 20px; } #filter-options li { padding: 5px; } #filter-options td { text-align: right; white-space: nowrap; } #filter-options td + td { text-align: left; } #filter-options input[type=number] { text-align: center; width: 7em; } #group-data td { text-align: right; }