/* Light / dark mode colours for OptiLink. js/theme.js sets data-theme="light" or "dark" on ; every page's own colours are variables, so dark mode only has to change the variables below. */ :root { color-scheme: light; --glass: rgba(255, 255, 255, 0.92); /* see-through bars (top bar, bottom menu) */ --toast-bg: #1B1730; /* small pop-up messages */ --toast-ink: #FFFFFF; --info-bg: #E0F2FE; --info: #0284C7; --warning-ink: #8A5A00; /* text on the pale warning background */ --tile-bg: linear-gradient(135deg, #EAF1FF, #F2E9FF); /* soft tile behind icons */ } :root[data-theme="dark"] { color-scheme: dark; /* dark scrollbars, drop-downs and date pickers */ --blue: #6F9CFF; --violet: #A983FF; --ink: #EDEBF7; --ink-soft: #C4C0DC; --muted: #948FB3; --bg: #100E1A; --surface: #1A1726; --surface-alt: #252136; --border: #332E49; --success-bg: #13301F; --warning-bg: #38290A; --danger-bg: #3A171A; --gradient: linear-gradient(120deg, #3E7BFA, #8B3FF0); /* buttons keep the brand colours so white text stays readable */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5); --glass: rgba(26, 23, 38, 0.92); --toast-bg: #EDEBF7; --toast-ink: #1B1730; --info-bg: #1D2A45; --info: #7CC4F5; --warning-ink: #F2C66D; --tile-bg: linear-gradient(135deg, #222B47, #2C2347); } /* Light / dark switch button: shows a moon in light mode and a sun in dark mode. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; } .theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* A switch fixed in the top-right corner, for pages without a top bar (landing and login pages). */ .theme-corner { position: fixed; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 40; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); box-shadow: var(--shadow-sm); cursor: pointer; } .theme-corner:active { transform: scale(0.94); }