/** * EHON VMI - Theme System * Light/Dark Mode CSS Variables * * Usage: * 1. Include theme-init.js in BEFORE theme.css for automatic browser dark mode detection: * * * 2. Include theme.css BEFORE all other CSS files: * * * 3. Include theme-toggle.js before for interactive theme switching: * * * The system will automatically detect and apply the browser's dark mode preference * on first visit, and remember the user's manual preference for future visits. */ /* ============================================ BROWSER PREFERENCE FALLBACK (CSS-only) Automatically applies dark mode if browser prefers it and no manual preference is set ============================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]):not([data-theme-initialized]) { /* This will be overridden by JavaScript, but provides a CSS fallback */ /* Background Colors */ --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-tertiary: #252525; --bg-accent: rgba(255, 255, 255, 0.05); --bg-card: #1e1e1e; --bg-dark: #0d0d0d; --bg-darker: #000000; /* Table-specific Colors */ --table-main-bg: rgba(30, 30, 30, 0.95); --table-body-bg: rgba(25, 25, 25, 0.85); --table-header-bg: #2a2a2a; --table-row-even: rgba(255, 255, 255, 0.03); --table-row-hover: rgba(0, 0, 0, 0); /* Text Colors */ --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-tertiary: #d0d0d0; --text-inverse: #ffffff; --text-muted: #606060; --text-link: #8a8fff; /* Border Colors */ --border-color: #3a3b3f; --border-light: #2a2b2f; --border-dark: #606060; /* Brand Colors */ --accent-primary: #8a8fff; --accent-primary-hover: #a0a6ff; --accent-secondary: #70d0ff; --accent-danger: #ff4444; --accent-success: #00e676; --accent-warning: #ffa726; /* Button Colors */ --btn-primary-bg: #8a8fff; --btn-primary-hover: #a0a6ff; --btn-secondary-bg: #3a3b4f; --btn-secondary-hover: #8a8fff; --btn-text: #ffffff; /* Input/Form Colors */ --input-bg: #2a2b2f; --input-text: #ffffff; --input-border: #4a4b4f; /* Navigation Colors */ --nav-bg: #1f2023; --nav-border: transparent; --nav-text: #b0b0b0; --nav-hover: #2a2b2f; /* Scrollbar Colors */ --scrollbar-track: #2a2b2f; --scrollbar-thumb: #505050; /* Shadow Colors */ --shadow-sm: rgba(0, 0, 0, 0.3); --shadow-md: rgba(0, 0, 0, 0.5); --shadow-lg: rgba(0, 0, 0, 0.7); /* Input Shadow Colors */ --input-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); --input-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.5); --input-shadow-focus: 0 6px 20px rgba(138, 143, 255, 0.3); /* Status Badge Colors */ --status-green-bg: #00e676; --status-green-text: #000000; --status-red-bg: #ff4444; --status-red-text: #ffffff; /* Chart Colors */ --chart-bar: #8a8fff; --chart-line: #70d0ff; /* Special Purpose */ --overlay-bg: rgba(0, 0, 0, 0.7); --divider-color: #3a3b3f; } } /* ============================================ DEFAULT THEME (LIGHT MODE) ============================================ */ :root { /* Background Colors */ --bg-primary: #eaeefc; --bg-secondary: #eaeefcd5; --bg-tertiary: #f0f0f0; --bg-accent: #0000000b; --bg-card: #ffffff; --bg-dark: #011a37; --bg-darker: #ffffff; /* Table-specific Colors */ --table-main-bg: rgba(255, 255, 255, 0.95); --table-body-bg: rgba(255, 255, 255, 0.73); --table-header-bg: #d7d7d7; --table-row-even: #0000000b; --table-row-hover: rgba(187, 199, 255, 0.4); /* Text Colors */ --text-primary: #1a1b1f; --text-secondary: #676767; --text-tertiary: #32343a; --text-inverse: #ffffff; --text-muted: #e2e1e1; --text-link: #1a1b1f; /* Border Colors */ --border-color: #e2e2e2; --border-light: #eee; --border-dark: #333; /* Brand Colors (stay consistent) */ --accent-primary: #6c72ff; --accent-primary-hover: #212c4d; --accent-secondary: #57c3ff; --accent-danger: #EC1C1C; --accent-success: #00c853; --accent-warning: #ff9800; /* Button Colors */ --btn-primary-bg: #6c72ff; --btn-primary-hover: #212c4d; --btn-secondary-bg: #212c4d; --btn-secondary-hover: #6c72ff; --btn-text: #ffffff; /* Input/Form Colors (light: white/off-white for consistency across all pages) */ --input-bg: #ffffff; --input-text: #1a1b1f; --input-border: #dee2e6; /* Navigation Colors (distinct from page background so border + topborder stand out) */ --nav-bg: #dde2f5; --nav-border: #c5c9e0; /* Slightly darker shade for sidebar edge (light theme) */ --nav-text: #676767; --nav-hover: #d4daf7; /* Scrollbar Colors */ --scrollbar-track: #f0f0f0; --scrollbar-thumb: #888; /* Shadow Colors */ --shadow-sm: rgba(0, 0, 0, 0.1); --shadow-md: rgba(0, 0, 0, 0.2); --shadow-lg: rgba(0, 0, 0, 0.3); /* Input Shadow Colors (for text boxes to pop) */ --input-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); --input-shadow-hover: 0 3px 12px rgba(0, 0, 0, 0.12); --input-shadow-focus: 0 4px 16px rgba(0, 47, 96, 0.15); /* Status Badge Colors */ --status-green-bg: #00c853; --status-green-text: #ffffff; --status-red-bg: #ff5252; --status-red-text: #ffffff; /* Chart Colors */ --chart-bar: #6c72ff; --chart-line: #57c3ff; /* Special Purpose */ --overlay-bg: rgba(0, 0, 0, 0.5); --divider-color: #eee; /* Hint UA for native controls (date/time pickers, scrollbars) in light theme */ color-scheme: light; } /* Standardize page background to --bg-primary (#eaeefc in light) on all pages. PR9: `html body …` beats test-site-de674e.webflow.css `body { … }` (0,0,1) on cascade order + specificity so `!important` is not required. */ html body, html body .page-wrapper, html body .dashboard-main-section, html body .dashboard-content, html body .dashboard-main-content { background-color: var(--bg-primary); } /* Pages that use white/neutral background instead of blue-tinted --bg-primary */ html body.page-bg-white, html body.page-bg-white .page-wrapper, html body.page-bg-white .dashboard-main-section, html body.page-bg-white .dashboard-content, html body.page-bg-white .dashboard-main-content, html body.page-bg-white main.table { background-color: var(--bg-card); } /* Override test-site/webflow white headings so content is readable on light backgrounds. PR9: `html body h1` (0,0,3) beats bare `h1` (0,0,1) from test-site without `!important`. */ html body { color: var(--text-primary); } html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .page-header, html body .page-header h1, html body .card h1, html body .card .display-4 { color: var(--text-primary); } html body .page-header p { color: var(--text-secondary); } html body .card { color: var(--text-primary); } html body .card label, html body .card .input, html body .card input, html body .card select { color: var(--text-primary); } html body .input::placeholder, html body textarea.input::placeholder { color: var(--text-secondary); } /* ============================================ DARK MODE THEME ============================================ */ [data-theme="dark"] { color-scheme: dark; /* Background Colors */ --bg-primary: #121212; --bg-secondary: #1e1e1e; --bg-tertiary: #252525; --bg-accent: rgba(255, 255, 255, 0.05); --bg-card: #1e1e1e; --bg-dark: #0d0d0d; --bg-darker: #000000; /* Table-specific Colors */ --table-main-bg: rgba(30, 30, 30, 0.95); --table-body-bg: rgba(25, 25, 25, 0.85); --table-header-bg: #2a2a2a; --table-row-even: rgba(255, 255, 255, 0.03); --table-row-hover: rgba(0, 0, 0, 0); /* Text Colors */ --text-primary: #ffffff; --text-secondary: #b0b0b0; --text-tertiary: #d0d0d0; --text-inverse: #ffffff; --text-muted: #606060; --text-link: #8a8fff; /* Border Colors */ --border-color: #3a3b3f; --border-light: #2a2b2f; --border-dark: #606060; /* Brand Colors (slightly adjusted for dark mode) */ --accent-primary: #8a8fff; --accent-primary-hover: #a0a6ff; --accent-secondary: #70d0ff; --accent-danger: #ff4444; --accent-success: #00e676; --accent-warning: #ffa726; /* Button Colors */ --btn-primary-bg: #8a8fff; --btn-primary-hover: #a0a6ff; --btn-secondary-bg: #3a3b4f; --btn-secondary-hover: #8a8fff; --btn-text: #ffffff; /* Input/Form Colors */ --input-bg: #2a2b2f; --input-text: #ffffff; --input-border: #4a4b4f; /* Navigation Colors */ --nav-bg: #1f2023; --nav-border: transparent; /* No visible edge in dark theme */ --nav-text: #b0b0b0; --nav-hover: #2a2b2f; /* Scrollbar Colors */ --scrollbar-track: #2a2b2f; --scrollbar-thumb: #505050; /* Shadow Colors */ --shadow-sm: rgba(0, 0, 0, 0.3); --shadow-md: rgba(0, 0, 0, 0.5); --shadow-lg: rgba(0, 0, 0, 0.7); /* Input Shadow Colors (enhanced for dark mode) */ --input-shadow: 0 3px 10px rgba(0, 0, 0, 0.4); --input-shadow-hover: 0 4px 14px rgba(0, 0, 0, 0.5); --input-shadow-focus: 0 6px 20px rgba(138, 143, 255, 0.3); /* Status Badge Colors */ --status-green-bg: #00e676; --status-green-text: #000000; --status-red-bg: #ff4444; --status-red-text: #ffffff; /* Chart Colors */ --chart-bar: #8a8fff; --chart-line: #70d0ff; /* Special Purpose */ --overlay-bg: rgba(0, 0, 0, 0.7); --divider-color: #3a3b3f; } /* ============================================ DARK MODE TEXT OVERRIDES Ensure ALL text is light/readable ============================================ */ html[data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } html[data-theme="dark"] body h1, html[data-theme="dark"] body h2, html[data-theme="dark"] body h3, html[data-theme="dark"] body h4, html[data-theme="dark"] body h5, html[data-theme="dark"] body h6, html[data-theme="dark"] body p, html[data-theme="dark"] body span, html[data-theme="dark"] body div, html[data-theme="dark"] body td, html[data-theme="dark"] body th, html[data-theme="dark"] body li, html[data-theme="dark"] body a, html[data-theme="dark"] body label, html[data-theme="dark"] body input, html[data-theme="dark"] body textarea, html[data-theme="dark"] body select { color: var(--text-primary); } /* Page wrappers and containers */ html[data-theme="dark"] body .page-wrapper, html[data-theme="dark"] body .dashboard-main-section { background-color: var(--bg-primary); } html[data-theme="dark"] body .dashboard-content { background-color: var(--bg-secondary); } html[data-theme="dark"] body .dashboard-main-content { background-color: var(--bg-primary); } /* Dark-mode CTA link in the tx-table-toolbar (child row "View all transactions"). PR9: `html[data-theme="dark"] body a.tx-table-toolbar__link` beats the universal dark `a` colour rule on specificity (extra `html` + `.tx-table-toolbar__link`). Moved from `vmi-tables.css` in PR5 (audit §15.5). */ html[data-theme="dark"] body a.tx-table-toolbar__link, html[data-theme="dark"] body a.tx-table-toolbar__link:visited { color: var(--btn-text); background-color: var(--btn-primary-bg); border: 1px solid var(--input-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } html[data-theme="dark"] body a.tx-table-toolbar__link:hover { color: var(--btn-text); background-color: var(--btn-primary-hover); border-color: #4a6a8c; box-shadow: 0 4px 12px rgba(58, 90, 124, 0.35); } /* Cards and containers */ html[data-theme="dark"] body .card, html[data-theme="dark"] body .card.pd-30px---36px, html[data-theme="dark"] body .upload-container { background-color: var(--bg-darker); } html[data-theme="dark"] body .report-card { background-color: var(--bg-darker); } /* Light mode — Webflow `.w-input` / `.small-dropdown-*` (0,1,0); PR9 uses `html body` prefix. */ html body .small-dropdown-list { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } html body .input, html body textarea.input { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } /* Small dropdown lists */ html[data-theme="dark"] body .small-dropdown-list { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } /* Text inputs and textareas */ html[data-theme="dark"] body .input, html[data-theme="dark"] body textarea.input { color: var(--input-text); background-color: var(--input-bg); border-color: var(--input-border); } /* Dividers */ html[data-theme="dark"] body .divider { background-color: var(--border-color); } /* Small dots and decorative elements */ html[data-theme="dark"] body .small-dot { background-color: var(--accent-primary); } /* Specific element overrides for dark mode */ html[data-theme="dark"] body thead th { background-color: var(--table-header-bg); color: var(--text-primary); } html[data-theme="dark"] body tbody tr { color: var(--text-primary); } html[data-theme="dark"] body .table__header { background-color: var(--table-header-bg); } html[data-theme="dark"] body .table__body { background-color: var(--table-body-bg); } html[data-theme="dark"] body main.table { background-color: var(--table-main-bg); } /* SVG icons in dark mode */ html[data-theme="dark"] body svg, html[data-theme="dark"] body svg * { fill: var(--text-primary); stroke: var(--text-primary); } /* ============================================ DATATABLES OVERRIDES FOR DARK MODE Fix hardcoded white backgrounds from CDN ============================================ */ html[data-theme="dark"] body table.dataTable, html[data-theme="dark"] body table.dataTable tbody tr, html[data-theme="dark"] body table.dataTable tbody tr td, html[data-theme="dark"] body .dataTables_wrapper, html[data-theme="dark"] body .dataTables_wrapper tbody tr { background-color: var(--table-body-bg); color: var(--text-primary); } html[data-theme="dark"] body table.dataTable tbody tr:hover, html[data-theme="dark"] body table.dataTable tbody tr:hover td { background-color: var(--table-row-hover); } html[data-theme="dark"] body table.dataTable thead th, html[data-theme="dark"] body table.dataTable thead td { background-color: var(--table-header-bg); color: var(--text-primary); border-color: var(--border-color); } /* Child rows and expanded details */ html[data-theme="dark"] body table.dataTable tbody tr.child, html[data-theme="dark"] body table.dataTable tbody tr.expanded-details { background-color: var(--bg-secondary); } /* DataTables pagination and info */ html[data-theme="dark"] body .dataTables_info, html[data-theme="dark"] body .dataTables_paginate { color: var(--text-secondary); } html[data-theme="dark"] body .dataTables_paginate .paginate_button { color: var(--text-primary); background-color: var(--bg-secondary); } html[data-theme="dark"] body .dataTables_paginate .paginate_button:hover { background-color: var(--bg-tertiary); } /* DataTables 2 CDN only lightens dt-control for html.dark / data-bs-theme; VMI uses data-theme */ html[data-theme="dark"] body table.dataTable td.dt-control:before { border-left-color: rgba(255, 255, 255, 0.5); } html[data-theme="dark"] body table.dataTable tr.dt-hasChild td.dt-control:before { border-top-color: rgba(255, 255, 255, 0.5); border-left-color: transparent; } /* ============================================ ENHANCED INPUT/TEXTAREA STYLING Make text boxes pop with shadows ============================================ */ html body input[type="text"], html body input[type="email"], html body input[type="password"], html body input[type="number"], html body input[type="search"], html body input[type="tel"], html body input[type="url"], html body input[type="date"], html body input[type="time"], html body textarea, html body select { background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); box-shadow: var(--input-shadow); transition: all 0.3s ease; padding: 0.5rem; border-radius: 0.375rem; } html body input[type="text"]:hover, html body input[type="email"]:hover, html body input[type="password"]:hover, html body input[type="number"]:hover, html body input[type="search"]:hover, html body input[type="tel"]:hover, html body input[type="url"]:hover, html body input[type="date"]:hover, html body input[type="time"]:hover, html body textarea:hover, html body select:hover { box-shadow: var(--input-shadow-hover); border-color: var(--accent-primary); } html body input[type="text"]:focus, html body input[type="email"]:focus, html body input[type="password"]:focus, html body input[type="number"]:focus, html body input[type="search"]:focus, html body input[type="tel"]:focus, html body input[type="url"]:focus, html body input[type="date"]:focus, html body input[type="time"]:focus, html body textarea:focus, html body select:focus { outline: none; box-shadow: var(--input-shadow-focus); border-color: var(--accent-primary); transform: translateY(-1px); } /* Unified form controls across all pages (clients, Service, reports, Fuel-Quality, etc.) */ html body .recip, html body .recip1, html body .recip2, html body .recip3, html body .recip4, html body .gw-merged input, html body .gw-merged select, html body .gw-merged .recip, html body .gw-ports input, html body .gw-ports select, html body .gw-ports .recip, html body .alert-upd .recip, html body .alerts_div .recip { background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); } /* Dark mode specific input enhancements */ html[data-theme="dark"] body input[type="text"], html[data-theme="dark"] body input[type="email"], html[data-theme="dark"] body input[type="password"], html[data-theme="dark"] body input[type="number"], html[data-theme="dark"] body input[type="search"], html[data-theme="dark"] body input[type="tel"], html[data-theme="dark"] body input[type="url"], html[data-theme="dark"] body input[type="date"], html[data-theme="dark"] body input[type="time"], html[data-theme="dark"] body textarea, html[data-theme="dark"] body select { background-color: var(--input-bg); color: var(--input-text); border-color: var(--input-border); } /* Selects with webflow classes - visible in both themes (groups, edit_site, etc.) */ html body select.small-dropdown-link, html body select.small-dropdown-toggle, html body select.w-dropdown-link, html body #groupDropdown { background-color: var(--input-bg); color: var(--input-text); border: 1px solid var(--input-border); } html body select.small-dropdown-link:focus, html body select.small-dropdown-toggle:focus, html body select.w-dropdown-link:focus, html body #groupDropdown:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--input-shadow-focus); } /* Webflow `.small-dropdown-toggle:hover` sets pale blue text (#d1dbf9); with theme `--input-bg` white that wins on specificity and makes labels unreadable. Force theme text on hover/focus. */ html body select.small-dropdown-toggle:hover, html body select.small-dropdown-link:hover, html body select.w-dropdown-link:hover, html body #groupDropdown:hover { color: var(--input-text); } /* Native `