/* Theme: every Tailwind colour the templates use resolves through these variables (see the tailwind.config in base.html), so dark mode is one class on swapping the palette - no template carries a `dark:` twin, and a new template is dark for free. :root is Tailwind 3.4.16's own palette, generated from its colors.js, so light mode is exactly what it was. html.dark is "Neon Mint": neutrals invert onto navy, and each accent flips so that 50/100 tint a card, 200/300 ring it, 400-700 are the neon itself and 800+ brighten it for text. A palette that is not listed here (and in base.html) stays light in dark mode. */ :root { --white: 255 255 255; --stone-50: 250 250 249; --stone-100: 245 245 244; --stone-200: 231 229 228; --stone-300: 214 211 209; --stone-400: 168 162 158; --stone-500: 120 113 108; --stone-600: 87 83 78; --stone-700: 68 64 60; --stone-800: 41 37 36; --stone-900: 28 25 23; --stone-950: 12 10 9; --emerald-50: 236 253 245; --emerald-100: 209 250 229; --emerald-200: 167 243 208; --emerald-300: 110 231 183; --emerald-400: 52 211 153; --emerald-500: 16 185 129; --emerald-600: 5 150 105; --emerald-700: 4 120 87; --emerald-800: 6 95 70; --emerald-900: 6 78 59; --emerald-950: 2 44 34; --red-50: 254 242 242; --red-100: 254 226 226; --red-200: 254 202 202; --red-300: 252 165 165; --red-400: 248 113 113; --red-500: 239 68 68; --red-600: 220 38 38; --red-700: 185 28 28; --red-800: 153 27 27; --red-900: 127 29 29; --red-950: 69 10 10; --amber-50: 255 251 235; --amber-100: 254 243 199; --amber-200: 253 230 138; --amber-300: 252 211 77; --amber-400: 251 191 36; --amber-500: 245 158 11; --amber-600: 217 119 6; --amber-700: 180 83 9; --amber-800: 146 64 14; --amber-900: 120 53 15; --amber-950: 69 26 3; --rose-50: 255 241 242; --rose-100: 255 228 230; --rose-200: 254 205 211; --rose-300: 253 164 175; --rose-400: 251 113 133; --rose-500: 244 63 94; --rose-600: 225 29 72; --rose-700: 190 18 60; --rose-800: 159 18 57; --rose-900: 136 19 55; --rose-950: 76 5 25; --green-50: 240 253 244; --green-100: 220 252 231; --green-200: 187 247 208; --green-300: 134 239 172; --green-400: 74 222 128; --green-500: 34 197 94; --green-600: 22 163 74; --green-700: 21 128 61; --green-800: 22 101 52; --green-900: 20 83 45; --green-950: 5 46 22; --blue-50: 239 246 255; --blue-100: 219 234 254; --blue-200: 191 219 254; --blue-300: 147 197 253; --blue-400: 96 165 250; --blue-500: 59 130 246; --blue-600: 37 99 235; --blue-700: 29 78 216; --blue-800: 30 64 175; --blue-900: 30 58 138; --blue-950: 23 37 84; --sky-50: 240 249 255; --sky-100: 224 242 254; --sky-200: 186 230 253; --sky-300: 125 211 252; --sky-400: 56 189 248; --sky-500: 14 165 233; --sky-600: 2 132 199; --sky-700: 3 105 161; --sky-800: 7 89 133; --sky-900: 12 74 110; --sky-950: 8 47 73; --violet-50: 245 243 255; --violet-100: 237 233 254; --violet-200: 221 214 254; --violet-300: 196 181 253; --violet-400: 167 139 250; --violet-500: 139 92 246; --violet-600: 124 58 237; --violet-700: 109 40 217; --violet-800: 91 33 182; --violet-900: 76 29 149; --violet-950: 46 16 101; --orange-50: 255 247 237; --orange-100: 255 237 213; --orange-200: 254 215 170; --orange-300: 253 186 116; --orange-400: 251 146 60; --orange-500: 249 115 22; --orange-600: 234 88 12; --orange-700: 194 65 12; --orange-800: 154 52 18; --orange-900: 124 45 18; --orange-950: 67 20 7; } html.dark { --white: 14 19 32; --stone-50: 18 24 41; --stone-100: 23 32 54; --stone-200: 31 42 63; --stone-300: 43 56 82; --stone-400: 91 107 138; --stone-500: 138 155 184; --stone-600: 169 184 209; --stone-700: 196 208 228; --stone-800: 216 226 242; --stone-900: 230 241 255; --stone-950: 244 249 255; --emerald-50: 17 43 47; --emerald-100: 19 57 56; --emerald-200: 23 90 76; --emerald-300: 28 125 98; --emerald-400: 40 220 157; --emerald-500: 45 255 179; --emerald-600: 45 255 179; --emerald-700: 45 255 179; --emerald-800: 98 255 198; --emerald-900: 140 255 213; --emerald-950: 182 255 228; --red-50: 38 25 40; --red-100: 53 28 44; --red-200: 86 36 55; --red-300: 122 45 67; --red-400: 219 68 97; --red-500: 255 77 109; --red-600: 255 77 109; --red-700: 255 77 109; --red-800: 255 122 146; --red-900: 255 157 175; --red-950: 255 193 204; --amber-50: 38 38 35; --amber-100: 53 50 37; --amber-200: 86 76 41; --amber-300: 122 105 46; --amber-400: 219 181 58; --amber-500: 255 210 63; --amber-600: 255 210 63; --amber-700: 255 210 63; --amber-800: 255 221 111; --amber-900: 255 230 149; --amber-950: 255 239 188; --rose-50: 38 26 44; --rose-100: 53 31 52; --rose-200: 86 41 69; --rose-300: 122 52 87; --rose-400: 219 81 136; --rose-500: 255 92 154; --rose-600: 255 92 154; --rose-700: 255 92 154; --rose-800: 255 133 179; --rose-900: 255 165 199; --rose-950: 255 198 220; --green-50: 20 43 42; --green-100: 24 57 49; --green-200: 33 90 63; --green-300: 42 125 79; --green-400: 68 220 120; --green-500: 77 255 136; --green-600: 77 255 136; --green-700: 77 255 136; --green-800: 122 255 166; --green-900: 157 255 190; --green-950: 193 255 213; --blue-50: 16 40 54; --blue-100: 17 52 68; --blue-200: 20 81 99; --blue-300: 23 112 132; --blue-400: 31 194 222; --blue-500: 34 225 255; --blue-600: 34 225 255; --blue-700: 34 225 255; --blue-800: 89 232 255; --blue-900: 133 238 255; --blue-950: 178 244 255; --sky-50: 19 38 54; --sky-100: 22 50 68; --sky-200: 28 77 99; --sky-300: 35 106 132; --sky-400: 54 184 222; --sky-500: 61 213 255; --sky-600: 61 213 255; --sky-700: 61 213 255; --sky-800: 110 224 255; --sky-900: 148 232 255; --sky-950: 187 240 255; --violet-50: 30 31 54; --violet-100: 40 38 68; --violet-200: 64 54 99; --violet-300: 88 72 132; --violet-400: 154 118 222; --violet-500: 179 136 255; --violet-600: 179 136 255; --violet-700: 179 136 255; --violet-800: 198 166 255; --violet-900: 213 190 255; --violet-950: 228 213 255; --orange-50: 38 33 36; --orange-100: 53 41 38; --orange-200: 86 61 42; --orange-300: 122 82 48; --orange-400: 219 138 62; --orange-500: 255 159 67; --orange-600: 255 159 67; --orange-700: 255 159 67; --orange-800: 255 183 114; --orange-900: 255 202 152; --orange-950: 255 221 189; } /* ------------------------------------------------------------------ neon polish (dark only) */ html.dark { color-scheme: dark; /* native selects, checkboxes, date pickers */ --page: #070A12; --mint: 45 255 179; --cyan: 34 225 255; --glow-mint: 0 0 0 1px rgb(var(--mint) / .35), 0 0 18px -3px rgb(var(--mint) / .55); --glow-mint-hot: 0 0 0 1px rgb(var(--mint) / .6), 0 0 28px -2px rgb(var(--mint) / .75); --glow-red: 0 0 0 1px rgb(255 77 109 / .35), 0 0 18px -3px rgb(255 77 109 / .55); --glow-cyan: 0 0 0 1px rgb(var(--cyan) / .25), 0 0 16px -5px rgb(var(--cyan) / .55); scrollbar-color: #2B3852 var(--page); } /* beats .bg-stone-50 on ; the two glows sit still while the page scrolls */ html.dark body { background-color: var(--page); background-image: radial-gradient(900px 600px at -10% -10%, rgb(var(--mint) / .07), transparent 60%), radial-gradient(800px 600px at 110% 110%, rgb(var(--cyan) / .06), transparent 60%); background-attachment: fixed; } html.dark ::selection { background: rgb(var(--mint) / .35); color: #fff; } html.dark h1 { text-shadow: 0 0 28px rgb(var(--mint) / .18); } /* Cards: depth through --tw-shadow, which ring-1 composes into its own box-shadow - setting box-shadow directly would erase the ring. */ html.dark .bg-white.ring-1 { --tw-shadow: 0 12px 32px -16px rgb(0 0 0 / .85); } /* Glowing buttons. A ringed element takes the glow through --tw-shadow for the same reason; one without a ring gets it directly. */ html.dark :is(.bg-emerald-700, .bg-emerald-600, .bg-red-700, .bg-stone-900) { transition: background-color .2s ease, box-shadow .25s ease; } html.dark :is(.bg-emerald-700, .bg-emerald-600) { --tw-shadow: var(--glow-mint); } html.dark :is(.bg-emerald-700, .bg-emerald-600):not([class^="ring-"]):not([class*=" ring-"]) { box-shadow: var(--glow-mint); } html.dark :is(button, a).bg-emerald-700:hover { --tw-shadow: var(--glow-mint-hot); box-shadow: var(--glow-mint-hot); } html.dark .bg-red-700 { --tw-shadow: var(--glow-red); } html.dark .bg-red-700:not([class^="ring-"]):not([class*=" ring-"]) { box-shadow: var(--glow-red); } html.dark :is(button, a).bg-stone-900 { --tw-shadow: var(--glow-cyan); } html.dark :is(button, a).bg-stone-900:not([class^="ring-"]):not([class*=" ring-"]) { box-shadow: var(--glow-cyan); } html.dark button:disabled { box-shadow: none !important; } /* The campaign progress bar and its legend dots are hex, not palette classes */ html.dark .bg-\[\#0ca30c\] { background-color: rgb(var(--mint)); box-shadow: 0 0 10px rgb(var(--mint) / .6); } html.dark .bg-\[\#d03b3b\] { background-color: #FF4D6D; box-shadow: 0 0 10px rgb(255 77 109 / .6); } /* Active sidebar item: a lit edge and a halo */ html.dark aside nav a.bg-emerald-50 { box-shadow: inset 2px 0 0 rgb(var(--mint)), 0 0 20px -8px rgb(var(--mint) / .7); text-shadow: 0 0 12px rgb(var(--mint) / .55); } html.dark aside nav a { transition: background-color .2s ease, box-shadow .2s ease, color .2s ease; } /* Form controls sit recessed below the card, and light up mint on focus */ html.dark :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) { background-color: #0A0E18; } html.dark :is(input, select, textarea):focus { border-color: rgb(var(--emerald-600)); box-shadow: 0 0 0 2px rgb(var(--emerald-600)), 0 0 18px -4px rgb(var(--mint) / .55); } html.dark ::placeholder { color: rgb(var(--stone-400)); } html.dark input[type="checkbox"], html.dark input[type="radio"] { accent-color: rgb(var(--mint)); } html.dark ::-webkit-scrollbar { width: 10px; height: 10px; } html.dark ::-webkit-scrollbar-track { background: var(--page); } html.dark ::-webkit-scrollbar-thumb { background: #1F2A3F; border-radius: 8px; border: 2px solid var(--page); } html.dark ::-webkit-scrollbar-thumb:hover { background: rgb(var(--mint) / .7); } /* Charts read these once per draw (admin_dashboard.html and echereta.html redraw on themechange) */ html.dark .viz { --surface: #0E1320; --ink: #E6F1FF; --ink-2: #A9B8D1; --muted: #8A9BB8; --grid: #1F2A3F; --axis: #2B3852; --s1: #22E1FF; --s2: #FF9F43; --good: #2DFFB3; --critical: #FF4D6D; --warn: #FFD23F; --neutral: #8A9BB8; } /* Dispatch map: the tiles are a light style, so invert the canvas. The stop markers are HTML, not canvas, so they keep their verdict colours. */ html.dark .maplibregl-canvas { filter: invert(.92) hue-rotate(180deg) brightness(.95) contrast(.9); } html.dark .maplibregl-ctrl-group { filter: invert(.9) hue-rotate(180deg); } html.dark .maplibregl-ctrl-attrib { background: rgb(14 19 32 / .8); color: #8A9BB8; } html.dark .maplibregl-ctrl-attrib a { color: #A9B8D1; } /* ------------------------------------------------------------------ the toggle */ .theme-toggle { display: inline-flex; align-items: center; flex-shrink: 0; padding: 2px; border-radius: 9999px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .theme-toggle:focus-visible { outline: 2px solid rgb(var(--emerald-600)); outline-offset: 2px; } .theme-toggle__track { position: relative; display: block; width: 44px; height: 24px; border-radius: 9999px; background: #e7e5e4; box-shadow: inset 0 1px 2px rgb(0 0 0 / .15); transition: background-color .35s ease, box-shadow .35s ease; } .theme-toggle:hover .theme-toggle__track { background: #d6d3d1; } .theme-toggle__knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .3); transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), background-color .35s ease, box-shadow .35s ease; } .theme-toggle__knob svg { position: absolute; inset: 3px; width: 12px; height: 12px; transition: opacity .3s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1); } .theme-toggle__sun { color: #d97706; } .theme-toggle__moon { color: #070A12; opacity: 0; transform: rotate(-90deg) scale(.4); } html.dark .theme-toggle__track { background: rgb(var(--mint) / .14); box-shadow: inset 0 0 0 1px rgb(var(--mint) / .45), 0 0 14px -2px rgb(var(--mint) / .55); } html.dark .theme-toggle:hover .theme-toggle__track { background: rgb(var(--mint) / .22); } html.dark .theme-toggle__knob { transform: translateX(20px); background: rgb(var(--mint)); box-shadow: 0 0 10px rgb(var(--mint) / .9), 0 0 22px rgb(var(--mint) / .5); } html.dark .theme-toggle__sun { opacity: 0; transform: rotate(90deg) scale(.4); } html.dark .theme-toggle__moon { opacity: 1; transform: none; } /* ------------------------------------------------------------------ the switch itself */ /* theme.js reveals the new theme in a circle from the toggle; the default cross-fade would fight it */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } /* Fallback where View Transitions are missing: everything eases across for 400ms */ html.theme-anim, html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease, fill .4s ease, stroke .4s ease !important; } @media (prefers-reduced-motion: reduce) { .theme-toggle__track, .theme-toggle__knob, .theme-toggle__knob svg { transition: none; } }