/* * Carenos-style dark mode for Carelyze. * * Activated by the `dark` class on (set by the no-flash script + theme * toggle in the header). Rather than editing every template, this layer remaps * the neutral Tailwind utilities the app already uses to the Carenos dark * palette. The accent (indigo -> blue #2563EB) and status colors are preserved * and only brightened where needed for contrast on the dark surfaces. * * Loaded AFTER tailwind.css so these rules win ties. */ html.dark { color-scheme: dark; --c-bg: #111418; /* page background (Carenos --black) */ --c-surface: #1b2028; /* cards / panels (bg-white) */ --c-surface-2: #232a33; /* raised / hover surfaces (bg-gray-50/100/200) */ --c-border: rgba(255, 255, 255, 0.10); --c-text: #fafafa; /* headings / strong text */ --c-text-2: #e5e7eb; /* body text */ --c-muted: rgba(255, 255, 255, 0.60); --c-dim: rgba(255, 255, 255, 0.42); } /* ---- Base surfaces ---- */ html.dark body { background-color: var(--c-bg); color: var(--c-text-2); } html.dark .bg-gray-100 { background-color: var(--c-bg) !important; } html.dark .bg-gray-50 { background-color: var(--c-surface-2); } html.dark .bg-gray-200 { background-color: var(--c-surface-2); } html.dark .bg-white { background-color: var(--c-surface); } html.dark .bg-white\/80 { background-color: rgba(27, 32, 40, 0.82); } /* Sidebar + header chrome sit slightly darker than the cards (like the mockup) */ html.dark #sidebar { background-color: #0d1117 !important; } html.dark header { background-color: rgba(17, 20, 24, 0.92) !important; } /* ---- Borders ---- * Preflight paints every border with #e5e7eb; recolor uncolored borders, then * re-assert accent + status borders (which the universal rule would clobber). */ html.dark *, html.dark ::before, html.dark ::after { border-color: var(--c-border); } html.dark .border-transparent { border-color: transparent; } html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300 { border-color: var(--c-border); } html.dark .divide-gray-50 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]), html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--c-border); } /* Accent borders (kept blue) */ html.dark .border-indigo-600 { border-color: #2563eb; } html.dark .border-indigo-500 { border-color: #3b82f6; } html.dark .border-indigo-200, html.dark .border-indigo-100 { border-color: rgba(37, 99, 235, 0.45); } /* Status borders (tinted) */ html.dark .border-green-200 { border-color: rgba(34, 197, 94, 0.40); } html.dark .border-green-500 { border-color: #22c55e; } html.dark .border-red-400 { border-color: rgba(239, 68, 68, 0.45); } html.dark .border-red-500 { border-color: #ef4444; } html.dark .border-amber-200, html.dark .border-amber-300 { border-color: rgba(245, 158, 11, 0.45); } html.dark .border-amber-500 { border-color: #f59e0b; } /* ---- Text ---- */ html.dark .text-gray-900 { color: var(--c-text); } html.dark .text-gray-800 { color: var(--c-text-2); } html.dark .text-gray-700 { color: #d1d5db; } html.dark .text-gray-600 { color: var(--c-muted); } html.dark .text-gray-500 { color: var(--c-muted); } html.dark .text-gray-400 { color: var(--c-dim); } html.dark .hover\:text-gray-600:hover, html.dark .hover\:text-gray-700:hover, html.dark .hover\:text-gray-800:hover { color: var(--c-text); } html.dark .placeholder-gray-500::-moz-placeholder { color: var(--c-dim); } html.dark .placeholder-gray-500::placeholder { color: var(--c-dim); } /* ---- Hover backgrounds ---- */ html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-200:hover, html.dark .hover\:bg-gray-300:hover { background-color: rgba(255, 255, 255, 0.07); } html.dark .hover\:bg-indigo-50:hover, html.dark .hover\:bg-indigo-50\/40:hover { background-color: rgba(37, 99, 235, 0.16); } /* ---- Form controls ---- */ html.dark input, html.dark select, html.dark textarea { background-color: var(--c-surface); color: var(--c-text-2); } html.dark select option { background-color: var(--c-surface); color: var(--c-text-2); } /* ---- Scrollbars ---- */ html.dark ::-webkit-scrollbar-track { background: #1b2028; } html.dark ::-webkit-scrollbar-thumb { background: #3a434f; } html.dark ::-webkit-scrollbar-thumb:hover { background: #4b5563; } html.dark .thin-scrollbar { scrollbar-color: #3a434f #1b2028; } /* ---- Status backgrounds (translucent tints so they read on dark) ---- */ html.dark .bg-green-50, html.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.14); } html.dark .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.14); } html.dark .bg-red-50, html.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.14); } html.dark .bg-amber-50 { background-color: rgba(245, 158, 11, 0.14); } html.dark .bg-yellow-50, html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.14); } html.dark .bg-blue-100 { background-color: rgba(59, 130, 246, 0.16); } html.dark .bg-indigo-50, html.dark .bg-indigo-50\/60, html.dark .bg-indigo-100 { background-color: rgba(37, 99, 235, 0.16); } /* ---- Status text (brightened for contrast) ---- */ html.dark .text-green-800, html.dark .text-green-700 { color: #4ade80; } html.dark .text-emerald-800, html.dark .text-emerald-700, html.dark .text-emerald-600 { color: #34d399; } html.dark .text-red-800, html.dark .text-red-700 { color: #f87171; } html.dark .text-amber-800, html.dark .text-amber-700, html.dark .text-amber-600 { color: #fbbf24; } html.dark .text-yellow-600 { color: #facc15; } html.dark .text-orange-700 { color: #fdba74; } html.dark .text-teal-700 { color: #5eead4; } html.dark .text-blue-800 { color: #93c5fd; } html.dark .text-indigo-900, html.dark .text-indigo-800 { color: #93c5fd; } /* ---- Leaflet maps ---- * Base tiles are light; invert+hue-rotate them into a dark basemap. Only the * tile layer is filtered, so markers/polygons/popups (in the overlay panes) * keep their real colors. */ html.dark .leaflet-tile { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9); } html.dark .leaflet-container { background: #0d1117; } html.dark .leaflet-popup-content-wrapper, html.dark .leaflet-popup-tip { background: var(--c-surface); color: var(--c-text-2); } html.dark .leaflet-bar a, html.dark .leaflet-bar a:hover { background: var(--c-surface); color: var(--c-text-2); border-color: var(--c-border); } /* ---- Theme toggle button ---- */ .theme-toggle .icon-moon { display: none; } .theme-toggle .icon-sun { display: block; } html.dark .theme-toggle .icon-moon { display: block; } html.dark .theme-toggle .icon-sun { display: none; }