/* Light/dark colours for every page. Pages keep their own layout CSS; 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: #fdfbd6; --card-bg: #FFF; --text: #4F5155; --link: #003399; --muted: #A0A0A0; --field-bg: #FFF; --field-text: #000; --field-border: #767676; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --page-bg: #14161a; --card-bg: #1e2126; --text: #d6d8dc; --link: #8ab4ff; --muted: #8d939b; --field-bg: #26292f; --field-text: #eceef1; --field-border: #555b63; } } :root[data-theme="dark"] { color-scheme: dark; --page-bg: #14161a; --card-bg: #1e2126; --text: #d6d8dc; --link: #8ab4ff; --muted: #8d939b; --field-bg: #26292f; --field-text: #eceef1; --field-border: #555b63; } :root[data-theme="light"] { color-scheme: light; } body { background-color: var(--page-bg); color: var(--text); } a { color: var(--link); } #content { background-color: var(--card-bg); } #footer { color: var(--muted); } /* Theme switcher (top right): shows a moon in light mode and a sun in dark mode */ #theme-toggle { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; padding: 6px; border: 1px solid var(--field-border); border-radius: 50%; background: var(--card-bg); color: var(--text); cursor: pointer; line-height: 0; } #theme-toggle:hover, #theme-toggle:focus-visible { color: var(--link); border-color: var(--link); } #theme-toggle[hidden] { display: none; } #theme-toggle svg { width: 20px; height: 20px; } #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; } /* On narrow screens the card starts near the top of the page; leave room above it for the switcher */ @media (max-width: 1080px) { html { padding-top: 56px; } }