/* ========================================================================== DS-G4RGO Environment Inspection — Theme Overrides Dark theme is the DEFAULT (defined in global.css :root variables). This file provides a .theme-light class to override to light mode. Apply .theme-light on or to activate. ========================================================================== */ /* -------------------------------------------------------------------------- Light theme overrides -------------------------------------------------------------------------- */ .theme-light { /* Backgrounds */ --bg: #f5f7fa; --panel: #ffffff; --panel-hover: #edf1f7; /* Borders */ --border: #e2e8f0; /* Text */ --text: #1a202c; --muted: #718096; /* Accent (keep readable on white) */ --accent: #2b7de9; --accent-hover: #1f69cc; /* Semantic (slightly deeper for contrast on light bg) */ --success: #22a877; --warning: #d49b06; --error: #dc4444; /* Shadows (softer for light theme) */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); } /* -------------------------------------------------------------------------- Scrollbar overrides for light theme -------------------------------------------------------------------------- */ .theme-light ::-webkit-scrollbar-track { background: var(--bg); } .theme-light ::-webkit-scrollbar-thumb { background: var(--border); } .theme-light ::-webkit-scrollbar-thumb:hover { background: var(--muted); } .theme-light * { scrollbar-color: var(--border) var(--bg); } /* -------------------------------------------------------------------------- Selection color for light theme -------------------------------------------------------------------------- */ .theme-light ::selection { background-color: var(--accent); color: #ffffff; } /* -------------------------------------------------------------------------- Select dropdown arrow for light theme (darker chevron) -------------------------------------------------------------------------- */ .theme-light .select { background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23718096' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Button text color overrides for light theme (Primary/danger/success buttons keep white text on colored bg) -------------------------------------------------------------------------- */ .theme-light .btn--primary { color: #ffffff; } .theme-light .btn--danger { color: #ffffff; } .theme-light .btn--success { color: #ffffff; } /* -------------------------------------------------------------------------- Toggle track adjustment for light theme -------------------------------------------------------------------------- */ .theme-light .toggle__track { background: #cbd5e0; } .theme-light .toggle__track::after { background: #ffffff; } .theme-light .toggle__input:checked + .toggle__track { background: var(--accent); } /* -------------------------------------------------------------------------- Checkbox box for light theme -------------------------------------------------------------------------- */ .theme-light .checkbox__box { background: #ffffff; border-color: #cbd5e0; } .theme-light .checkbox__input:checked + .checkbox__box { background: var(--accent); border-color: var(--accent); } .theme-light .checkbox__box::after { border-color: #ffffff; } /* -------------------------------------------------------------------------- Radio circle for light theme -------------------------------------------------------------------------- */ .theme-light .radio__circle { background: #ffffff; border-color: #cbd5e0; } .theme-light .radio__input:checked + .radio__circle { border-color: var(--accent); } /* -------------------------------------------------------------------------- Input / textarea / select backgrounds for light theme -------------------------------------------------------------------------- */ .theme-light .input, .theme-light .textarea, .theme-light .select { background: #ffffff; border-color: #cbd5e0; } .theme-light .input:hover, .theme-light .textarea:hover, .theme-light .select:hover { border-color: #a0aec0; } .theme-light .input[readonly] { background: var(--bg); } /* -------------------------------------------------------------------------- Input group prefix/suffix for light theme -------------------------------------------------------------------------- */ .theme-light .input-group__prefix, .theme-light .input-group__suffix { background: var(--bg); border-color: #cbd5e0; } /* -------------------------------------------------------------------------- Help tooltip for light theme -------------------------------------------------------------------------- */ .theme-light .field__help { background: #cbd5e0; color: #4a5568; } .theme-light .field__help-text { background: #ffffff; border-color: #e2e8f0; color: var(--text); } .theme-light .field__help-text::after { border-top-color: #e2e8f0; } /* -------------------------------------------------------------------------- Code elements for light theme -------------------------------------------------------------------------- */ .theme-light code { background: #edf2f7; border-color: #e2e8f0; } .theme-light pre { background: #f7fafc; border-color: #e2e8f0; } .theme-light kbd { background: #edf2f7; border-color: #e2e8f0; } /* -------------------------------------------------------------------------- Sidebar adjustments for light theme -------------------------------------------------------------------------- */ .theme-light .sidebar { background: #ffffff; border-right-color: #e2e8f0; } .theme-light .sidebar__link:hover { background: #f7fafc; } .theme-light .sidebar__link.is-active { background: #edf2f7; } .theme-light .sidebar__link-badge { background: var(--accent); color: #ffffff; } /* -------------------------------------------------------------------------- Header for light theme -------------------------------------------------------------------------- */ .theme-light .header { background: #ffffff; border-bottom-color: #e2e8f0; } /* -------------------------------------------------------------------------- Table for light theme -------------------------------------------------------------------------- */ .theme-light .table th { background: #f7fafc; } .theme-light .table tbody tr:hover { background: #f7fafc; } /* -------------------------------------------------------------------------- Panel for light theme -------------------------------------------------------------------------- */ .theme-light .panel { background: #ffffff; border-color: #e2e8f0; box-shadow: var(--shadow-sm); } /* -------------------------------------------------------------------------- Sidebar overlay for light theme -------------------------------------------------------------------------- */ .theme-light .sidebar-overlay { background: rgba(0, 0, 0, 0.3); } /* -------------------------------------------------------------------------- OS-level dark mode preference detection (optional automatic switching) Uncomment this block if you want the theme to follow the OS preference when no explicit .theme-light class is applied. -------------------------------------------------------------------------- */ /* @media (prefers-color-scheme: light) { :root:not(.theme-dark) { --bg: #f5f7fa; --panel: #ffffff; --panel-hover: #edf1f7; --border: #e2e8f0; --text: #1a202c; --muted: #718096; --accent: #2b7de9; --accent-hover: #1f69cc; --success: #22a877; --warning: #d49b06; --error: #dc4444; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1); } } */