/** * theme.css — light/dark theme toggle for Internal Portal and Web Portal * sections. Dark is the existing default color scheme (already baked * into every section's own :root) — this file only needs to define the * LIGHT override, applied via a [data-theme="light"] attribute on . * * The header intentionally stays black in both themes (a fixed brand * element, not part of this toggle) — only the body/content area * variables are overridden here. */ html[data-theme="light"] { --bg: #f5f5f5; --bg-card: #ffffff; --border: #e0e0e0; --text: #1a1a1a; --text-secondary: #6b6b6b; } /* The subtle grid-line background pattern uses white lines tuned for a dark background — invisible on light, so it needs its own dark-line version rather than just inheriting the dark theme's version. */ html[data-theme="light"] body { background-image: linear-gradient(rgba(0,0,0,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.025) 1px, transparent 1px); } /* ===== Theme toggle switch — lives in the header, always on a black background regardless of theme, so styled for that specifically. ===== */ .theme-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; padding: 4px; font-family: inherit; } .theme-toggle-icon { font-size: 0.8rem; line-height: 1; opacity: 0.85; } .theme-toggle-track { width: 34px; height: 18px; background: rgba(255,255,255,0.2); border-radius: 999px; position: relative; transition: background 0.15s; flex-shrink: 0; } .theme-toggle-thumb { position: absolute; top: 2px; left: 18px; /* default (dark) — thumb sits near the moon icon */ width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left 0.15s; } html[data-theme="light"] .theme-toggle-thumb { left: 2px; /* light — thumb sits near the sun icon */ }