/* css/dark-mode.css Site-wide dark mode for Golden Green Properties. Why this approach: the site is built with the Tailwind CDN (no build step), so every page already uses dozens of individual utility classes like bg-white, text-gray-500, border-gray-100 spread across HTML and JS-generated markup. Rewriting each one with a matching dark: variant would mean editing hundreds of individual class strings across every file. Instead, this stylesheet remaps the neutral utility classes that are actually used across the site, scoped under html.dark, so toggling one class on re-themes the whole site consistently. Brand colors (green/gold) and saturated status colors (the red/amber/ emerald/rose badges and buttons) are left untouched on purpose — they already read fine on a dark background and changing them would weaken the brand identity. */ html.dark body { background-color: #0f172a; /* slate-900 */ } /* Card / panel / modal surfaces that were plain white */ html.dark .bg-white { background-color: #1e293b; /* slate-800 */ } /* Page-background grays */ html.dark .bg-gray-50 { background-color: #0f172a; /* slate-900 */ } html.dark .bg-gray-100 { background-color: #273449; } html.dark .bg-gray-200 { background-color: #334155; /* slate-700 */ } /* Opacity-modifier variants (e.g. bg-gray-50/50) generate their own class name with the slash escaped, so the plain .bg-gray-50 rule above doesn't match them — they need their own explicit override or they're left with a light background under dark-mode text, which is unreadable. */ html.dark .bg-gray-50\/50 { background-color: rgba(30, 41, 59, 0.5); /* slate-800 @ 50% */ } /* Body / heading text */ html.dark .text-gray-950, html.dark .text-gray-900 { color: #f1f5f9; /* slate-100 */ } html.dark .text-gray-800, html.dark .text-gray-700 { color: #e2e8f0; /* slate-200 */ } html.dark .text-gray-600, html.dark .text-gray-500 { color: #94a3b8; /* slate-400 */ } html.dark .text-gray-400 { color: #64748b; /* slate-500 */ } /* Borders */ html.dark .border-gray-50, html.dark .border-gray-100, html.dark .border-gray-200, html.dark .border-gray-300, html.dark .border, html.dark .border-t, html.dark .border-b, html.dark .border-b-2 { border-color: #334155; /* slate-700 */ } /* Hover backgrounds used on table rows / list items (hover:bg-gray-50 etc.) */ html.dark .hover\:bg-gray-50:hover, html.dark .hover\:bg-gray-100:hover, html.dark .hover\:bg-gray-200:hover { background-color: #273449; } /* Form controls — these get a plain white background from the browser by default unless styled, regardless of any utility class, so they need an explicit rule rather than a utility-class remap. */ html.dark input, html.dark select, html.dark textarea { background-color: #1e293b; color: #e2e8f0; border-color: #334155; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b; } /* Without this, the native calendar-picker icon on date inputs renders black-on-dark and becomes nearly invisible. */ html.dark input[type="date"] { color-scheme: dark; } /* Tables (admin panel) */ html.dark table thead tr { background-color: #1e293b; } html.dark table tr.hover\:bg-gray-50:hover { background-color: #273449; } /* Scrollbar (cosmetic, optional) */ html.dark ::-webkit-scrollbar-track { background: #0f172a; } html.dark ::-webkit-scrollbar-thumb { background: #334155; } /* Dropzone upload boxes in the admin panel */ html.dark .dropzone { background-color: #1e293b; } html.dark .dropzone.dragover { background-color: rgba(197, 168, 128, 0.15); } /* Dark-mode toggle button itself */ .theme-toggle-btn { color: #6b7280; } html.dark .theme-toggle-btn { color: #facc15; }