/* * puntWork dark mode stylesheet * * Strategy: Tailwind darkMode:'class' + :where(.dark) fallback remaps. * * :where() has zero specificity, so these rules win over Tailwind's base * utilities (0,1,0) when .dark is present on , yet they are safely * overridden by any explicit dark: variant class (0,2,0) in templates. * * Load order: after style.css so fallback remaps take effect. */ /* ── Native color-scheme (scrollbar, form controls, selection) ──────────── */ html { color-scheme: light; } html.dark { color-scheme: dark; } /* ── Smooth transitions on theme switch for key surfaces ─────────────────── */ body, header, footer, nav, aside, article, section, #pw-consent-banner { transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } /* ── Fallback remaps: auto-adapt common Tailwind gray utilities ─────────── * Covers page-content areas that don't have explicit dark: variants. * Specificity: 0,1,0 — wins over base .text-gray-* (0,1,0 at same position * since dark-mode.css loads after style.css), but loses to .dark .dark:* (0,2,0). */ /* Text colors */ :where(.dark) .text-gray-900 { color: rgb(241 245 249); } /* → slate-100 */ :where(.dark) .text-gray-800 { color: rgb(226 232 240); } /* → gray-200 */ :where(.dark) .text-gray-700 { color: rgb(209 213 219); } /* → gray-300 */ :where(.dark) .text-gray-600 { color: rgb(156 163 175); } /* → gray-400 */ :where(.dark) .text-gray-500 { color: rgb(107 114 128); } /* → gray-500 (keep subtle) */ /* Background colors */ :where(.dark) .bg-white { background-color: rgb(17 24 39); } /* → gray-900 */ :where(.dark) .bg-gray-50 { background-color: rgb(17 24 39); } /* → gray-900 */ :where(.dark) .bg-gray-100 { background-color: rgb(31 41 55); } /* → gray-800 */ :where(.dark) .bg-gray-200 { background-color: rgb(55 65 81); } /* → gray-700 */ /* Border colors */ :where(.dark) .border-gray-100 { border-color: rgb(75 85 99); } /* → gray-600 */ :where(.dark) .border-gray-200 { border-color: rgb(55 65 81); } /* → gray-700 */ :where(.dark) .border-gray-300 { border-color: rgb(75 85 99); } /* → gray-600 */ /* Light-background badge/chip patterns */ :where(.dark) .bg-indigo-50 { background-color: rgb(49 46 129 / 0.35); } /* indigo-900/35 */ :where(.dark) .bg-blue-50 { background-color: rgb(30 58 138 / 0.3); } /* blue-900/30 */ :where(.dark) .bg-green-50 { background-color: rgb(6 78 59 / 0.3); } /* green-900/30 */ :where(.dark) .bg-amber-50, :where(.dark) .bg-yellow-50 { background-color: rgb(120 53 15 / 0.3); } /* amber-900/30 */ :where(.dark) .text-indigo-700 { color: rgb(165 180 252); } /* → indigo-300 */ :where(.dark) .text-indigo-600 { color: rgb(129 140 248); } /* → indigo-400 */ :where(.dark) .text-blue-700 { color: rgb(147 197 253); } /* → blue-300 */ :where(.dark) .text-green-700 { color: rgb(110 231 183); } /* → emerald-300 */ /* Input fields */ :where(.dark) input[type="text"], :where(.dark) input[type="email"], :where(.dark) input[type="search"], :where(.dark) textarea, :where(.dark) select { background-color: rgb(31 41 55); border-color: rgb(75 85 99); color: rgb(241 245 249); } :where(.dark) input::placeholder, :where(.dark) textarea::placeholder { color: rgb(107 114 128); } /* Focus ring legibility in dark mode */ :where(.dark) .focus\:ring-indigo-500:focus { --tw-ring-color: rgb(129 140 248 / 0.6); } /* ── Icon-only theme toggle polish ───────────────────────────────────────────── */ [data-pw-theme-toggle] { margin-top: 2px; margin-bottom: 2px; /* add breathing room vs sibling pills/buttons */ } [data-pw-theme-toggle] [data-theme-icon] { line-height: 0; pointer-events: none; } [data-pw-theme-toggle]:focus-visible { outline: 2px solid rgb(99 102 241 / 0.55); outline-offset: 2px; }