/* Light/dark colours. style.css and Bootstrap keep 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; --bg: #fff; --text: #333; --link: #337ab7; --link-hover: #23527c; --footer-bg: #eee; --footer-border: #ccc; --rule: gray; --error: red; --valid: green; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #16181b; --text: #e3e5e8; --link: #7db8ff; --link-hover: #a8cfff; --footer-bg: #1f2226; --footer-border: #3d4249; --rule: #3d4249; --error: #ff7b72; --valid: #5fd068; --field-text: FieldText; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #16181b; --text: #e3e5e8; --link: #7db8ff; --link-hover: #a8cfff; --footer-bg: #1f2226; --footer-border: #3d4249; --rule: #3d4249; --error: #ff7b72; --valid: #5fd068; --field-text: FieldText; } :root[data-theme="light"] { color-scheme: light; } html, body { background: var(--bg); } body { color: var(--text); } a { color: var(--link); } a:hover, a:focus { color: var(--link-hover); } footer { background: var(--footer-bg); border-top-color: var(--footer-border); } .article { border-bottom-color: var(--rule); } .error { color: var(--error); } .valid { color: var(--valid); } /* Form fields follow color-scheme; Bootstrap makes their text inherit the page colour */ input, select { color: var(--field-text, inherit); } /* Theme switcher, on the navy bar: after the links on wide screens, left of the menu button on phones */ .navbar-default .container-fluid { position: relative; } #theme-toggle { position: absolute; top: 28px; right: 15px; width: 36px; height: 36px; padding: 7px; border: 1px solid #4543b7; border-radius: 50%; background: transparent; color: #fff; line-height: 0; z-index: 2; } #theme-toggle:hover, #theme-toggle:focus-visible { background-color: #4543b7; outline: none; } #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; } @media (min-width: 768px) { .navbar-default .navbar-nav.navbar-right { margin-right: 36px; } } @media (max-width: 767px) { #theme-toggle { right: 70px; } } /* 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; }