/* ========================================================================== Light theme. Dark is the default (tokens in dashboard.css). Setting data-theme="light" on re-maps the tokens and patches the surfaces that use hard-coded white overlays. The choice persists in localStorage ('vicada-theme'). ========================================================================== */ html[data-theme="light"] { --bg-page: #eef3f7; --bg-shell: #ffffff; --panel: #ffffff; --panel-soft: #f4f8fa; --panel-line: rgba(15, 42, 64, 0.14); --text-main: #000000; --text-soft: #000000; --text-muted: #000000; /* Accents darkened so text on white keeps its contrast. */ --teal: #0b9483; --cyan: #0b7fad; --blue: #2456c7; --green: #118a5e; --red: #cf2337; --amber: #9c6b04; --shadow-card: 0 10px 24px rgba(30, 60, 90, 0.10); } /* ------------------------------------------------ white-overlay patches -- */ /* Dark mode brightens surfaces with translucent white; on white panels the same overlays vanish, so light mode darkens instead. */ html[data-theme="light"] .tb__search-input, html[data-theme="light"] .tb__range, html[data-theme="light"] .tb__clock, html[data-theme="light"] .tb__bell, html[data-theme="light"] .form__input, html[data-theme="light"] .form__select, html[data-theme="light"] .form__textarea, html[data-theme="light"] .btn-sm, html[data-theme="light"] .btn--ghost, html[data-theme="light"] .toggle, html[data-theme="light"] .picker__summary, html[data-theme="light"] .check-pill { background: rgba(15, 42, 64, 0.04); } /* The picker's panel floats over the page, so it takes the card's white. */ html[data-theme="light"] .picker__panel { background: #ffffff; } html[data-theme="light"] .picker__option:hover { background: rgba(15, 42, 64, 0.06); } html[data-theme="light"] .btn-sm--ghost:hover, html[data-theme="light"] .btn--ghost:hover, html[data-theme="light"] .sb__link:hover, html[data-theme="light"] .sb__user:hover, html[data-theme="light"] .card__more:hover { background: rgba(15, 42, 64, 0.07); } html[data-theme="light"] .form__file { background: rgba(15, 42, 64, 0.03); } html[data-theme="light"] .form__file::file-selector-button { background: rgba(15, 42, 64, 0.06); color: var(--text-main); } html[data-theme="light"] .tag--muted, html[data-theme="light"] .badge--inactive, html[data-theme="light"] .pill-status--muted { background: rgba(15, 42, 64, 0.05); } html[data-theme="light"] .table tbody tr:hover td { background: rgba(15, 42, 64, 0.03); } html[data-theme="light"] .tb { background: rgba(255, 255, 255, 0.92); } html[data-theme="light"] .tb__bell-dot { border-color: #ffffff; } html[data-theme="light"] .form__select, html[data-theme="light"] input, html[data-theme="light"] textarea { color-scheme: light; } html[data-theme="light"] .form__input::placeholder, html[data-theme="light"] .form__textarea::placeholder, html[data-theme="light"] .tb__search-input::placeholder { color: #444444; } /* Fixed foreground colors that assumed a dark backdrop. */ html[data-theme="light"] .activity__avatar--blue { color: #2456c7; } html[data-theme="light"] .activity__avatar--violet { color: #6a3fd8; } html[data-theme="light"] .pill-status--blue { color: #2456c7; } html[data-theme="light"] .row a { color: #0b7fad; } /* Amber badge: white text reads better on the darkened amber. */ html[data-theme="light"] .sb__badge { color: #ffffff; } html[data-theme="light"] .sb__copy { color: #000000; } /* Focus tints keep the teal identity, just against white. */ html[data-theme="light"] .form__input:focus, html[data-theme="light"] .form__select:focus, html[data-theme="light"] .form__textarea:focus, html[data-theme="light"] .tb__search-input:focus { background: rgba(11, 148, 131, 0.06); } /* Primary buttons: the light accents are darker, so the label goes white. */ html[data-theme="light"] .btn--primary { color: #ffffff; box-shadow: 0 10px 20px rgba(11, 127, 173, 0.25); } /* ---------------------------------------------------------- login page --- */ /* The photo background stays; only the sign-in box switches. */ html[data-theme="light"] .login-box { background: rgba(255, 255, 255, 0.93); border-color: rgba(20, 40, 60, 0.16); } html[data-theme="light"] .login-box h2 { color: #000000; } html[data-theme="light"] .login-box .welcome { color: #000000; } html[data-theme="light"] .login-box .field label { color: #000000; } html[data-theme="light"] .login-box input[type="email"], html[data-theme="light"] .login-box input[type="password"] { background: rgba(15, 42, 64, 0.05); border-color: rgba(20, 40, 60, 0.18); color: #000000; } html[data-theme="light"] .login-box input::placeholder { color: #444444; } html[data-theme="light"] .login-box .mini-icon { color: #000000; } html[data-theme="light"] .login-box .checkbox { color: #000000; } html[data-theme="light"] .login-box .alert--error { color: #b41f31; background: rgba(207, 35, 55, 0.08); border-color: rgba(207, 35, 55, 0.30); } /* ------------------------------------------------------- toggle button --- */ .theme-toggle { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; border: 1px solid var(--panel-line, rgba(126, 165, 194, 0.12)); background: rgba(255, 255, 255, 0.04); color: var(--text-soft, rgba(214, 231, 243, 0.78)); font-size: 0.85rem; line-height: 1; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { background: rgba(23, 214, 189, 0.10); border-color: rgba(23, 214, 189, 0.32); } html[data-theme="light"] .theme-toggle { background: rgba(15, 42, 64, 0.04); } html[data-theme="light"] .theme-toggle:hover { background: rgba(11, 148, 131, 0.10); } /* Sun shows in dark mode ("switch to light"); moon shows in light mode. */ html[data-theme="light"] .theme-toggle__sun { display: none; } html:not([data-theme="light"]) .theme-toggle__moon { display: none; } /* Floating variant for the login page (no top bar there). */ .theme-toggle--floating { position: fixed; top: 16px; right: 16px; z-index: 50; width: 38px; height: 38px; border-radius: 50%; background: rgba(10, 25, 35, 0.55); border-color: rgba(144, 175, 197, 0.25); color: #edf5ff; font-size: 1rem; backdrop-filter: blur(6px); } html[data-theme="light"] .theme-toggle--floating { background: rgba(255, 255, 255, 0.75); color: #000000; }