/* * themes.css — global light / dark theme CSS custom properties * * Usage: * Light (default): or no attribute * Dark: * * JS tile URL helper (include on any map page): * const dark = document.documentElement.dataset.theme === 'dark'; * const TILES = dark * ? 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png' * : 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png'; */ /* ── Light theme (default) ───────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #f8f9fa; --surface: #ffffff; --card: #f0f2f5; --border: #e5e7eb; --accent: #0d6efd; --text: #1a1a1a; --muted: #6b7280; --success: #16a34a; --warn: #d97706; --yellow: #f59e0b; --orange: #ea580c; --danger: #dc2626; --purple: #7c3aed; --dim: #d1d5db; /* Panel chrome */ --panel-bg: #ffffff; --panel-border: #eeeeee; --panel-shadow: 0 2px 14px rgba(0, 0, 0, .18); /* Stop status colors (map markers + list badges) */ --s-confirmed: #16a34a; --s-inprog: #ca8a04; --s-candidates: #ea580c; --s-area: #dc2626; --s-hotel: #2563eb; --s-poi: #7c3aed; --s-personal: #6b7280; } /* ── Dark theme ──────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #0d1117; --surface: #161b27; --card: #1c2333; --border: #2d3650; --accent: #5b8def; --text: #e6edf3; --muted: #7d8590; --success: #56d364; --warn: #e3a338; --yellow: #e8d44b; --orange: #e8851a; --danger: #f87171; --purple: #a78bfa; --dim: #3d4a5c; --panel-bg: #161b27; --panel-border: #2d3650; --panel-shadow: 0 2px 20px rgba(0, 0, 0, .55); --s-confirmed: #56d364; --s-inprog: #e8d44b; --s-candidates: #e8851a; --s-area: #f87171; --s-hotel: #5b8def; --s-poi: #a78bfa; --s-personal: #7d8590; } /* Apply theme colors globally */ body { background: var(--bg); color: var(--text); } .card, .card-body { color: var(--text); } .form-control, .form-select { background-color: var(--bg); color: var(--text); border-color: var(--border); } .form-control:focus, .form-select:focus { background-color: var(--bg); color: var(--text); } .form-control:disabled { background-color: var(--surface); color: var(--muted); } .table { color: var(--text); } .text-muted { color: var(--muted) !important; } /* Navbar always on top of page panels and map elements */ .navbar { z-index: 2000; }