/* Light/dark colours. main.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; --panel: #FFF; --panel-border: #bdbcbd; --text: #222; --muted: #666; --link: #06c; --menu: #2255AA; --menu-hover: #333; --thumb-border: #666; --thumb-glow: #999; --page-bg: url('/assets/img/bg.png'); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --panel: #1f2226; --panel-border: #3d4249; --text: #e3e5e8; --muted: #a9aeb5; --link: #7db8ff; --menu: #8ab4f8; --menu-hover: #fff; --thumb-border: #5a6068; --thumb-glow: rgba(125, 184, 255, .45); --page-bg: #16181b repeating-linear-gradient(-45deg, #1c1f23 0 1px, transparent 1px 5px); } } :root[data-theme="dark"] { color-scheme: dark; --panel: #1f2226; --panel-border: #3d4249; --text: #e3e5e8; --muted: #a9aeb5; --link: #7db8ff; --menu: #8ab4f8; --menu-hover: #fff; --thumb-border: #5a6068; --thumb-glow: rgba(125, 184, 255, .45); --page-bg: #16181b repeating-linear-gradient(-45deg, #1c1f23 0 1px, transparent 1px 5px); } :root[data-theme="light"] { color-scheme: light; } body { background: var(--page-bg); } #sidebar, #content, #desc { background: var(--panel); border-color: var(--panel-border); } body, button, input, select, textarea { color: var(--text); } a, a:visited { color: var(--link); } #menu li a { color: var(--menu); } #menu li.current_page_item a, #menu li.current_page_item a:visited { color: var(--muted); } #menu li a:hover { color: var(--menu-hover); } .address { color: var(--muted); } .site { border-color: var(--thumb-border); } .site:hover { box-shadow: 0 0 15px var(--thumb-glow); } /* Logo: light laurels and lettering in dark mode (logo-dark.png) */ .logo-dark { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo-light { display: none; } :root:not([data-theme="light"]) .logo-dark { display: inline; } } :root[data-theme="dark"] .logo-light { display: none; } :root[data-theme="dark"] .logo-dark { display: inline; } /* Theme switcher: centred under the menu */ #theme-toggle { display: block; width: 32px; height: 32px; padding: 6px; margin: 6px auto 0; border: 1px solid var(--panel-border); border-radius: 50%; background: var(--panel); color: var(--menu); line-height: 0; cursor: pointer; } #theme-toggle:hover, #theme-toggle:focus-visible { border-color: var(--menu); } #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; }