:root { --navbar-height: 140px; --primary-color: #1343F0; --text-color: #111827; --muted-color: #6b7280; --surface: #ffffff; --background: rgba(246, 249, 255, 0.5); } /* Dark theme overrides (toggle by setting attribute on ) */ :root[data-theme='dark'], html[data-theme='dark'] { --primary-color: #4983F2; --text-color: #e6eef8; --muted-color: #9ca3af; --surface: #000; --background: rgba(0, 0, 0, 0.8); } * { box-sizing: border-box; transition: color 0.2s; } body { margin: 0; padding: 0; font-family: Helvetica, 'Segoe UI'; color: var(--text-color); background-color: var(--surface); background-image: url('/images/background/paper.png'); background-repeat: repeat; position: relative; } html, body, #app { height: 100%; position: relative; z-index: 1; } /* Background overlay layer that follows theme color */ body::before { content: ""; position: fixed; inset: 0; background-color: var(--background); pointer-events: none; z-index: 0; } /* Reusable theme asset helpers: add theme-light-only / theme-dark-only to any paired element (images, icons, labels). */ .theme-light-only { display: inline-block; } .theme-dark-only { display: none; } html[data-theme='dark'] .theme-light-only { display: none; } html[data-theme='dark'] .theme-dark-only { display: inline-block; } .theme-difference { filter: invert(var(--icon-invert)); transition: filter 0.3s ease; } :root { --icon-invert: 0; } html[data-theme='dark'] { --icon-invert: 1; } h1 { font-family: 'IBM Plex Mono', monospace; } h2 { font-family: 'IBM Plex Mono', monospace; } p, a { font-family: Helvetica, 'Segoe UI', sans-serif; }