/* Dark mode for the shared storefront pages. * --------------------------------------------------------------------------- * A theme's dark mode only reaches the theme's own templates. Everything a * shop shares with every other shop, which is sign in, the account, the basket * and the checkout, is built from fixed light utilities: bg-white, text-gray-900, * border-gray-300 and so on. Those do not know the page has gone dark, so the * sign in card stayed white on a dark page, and so did thirty two other files. * * Rather than rewrite two hundred and twenty one class names across those * files, this remaps them while the page is dark. Tailwind puts its utilities * in a cascade layer, and an unlayered rule beats a layered one whatever the * specificity, so these win without !important and without touching the markup. * * Two scopes keep it honest: * * :root.dark the shop's own toggle, never the system setting, because the * themes work the same way. * .uc-shop on the storefront's body only. The admin panel sets the same * `dark` class on the same html element and has its own dark * mode already, so without this every rule here would land on * it too. * * A theme that wants its own palette sets the --uc- tokens in its own dark * block. The values below are the fallback for a theme that has not. */ :root.dark .uc-shop { --uc-surface: #1F1D1B; --uc-raised: #2A2724; --uc-ink: #ECE8E1; --uc-ink-soft: #BEB7AC; --uc-ink-faint: #928B81; --uc-line: rgba(236, 232, 225, 0.14); --uc-line-strong: rgba(236, 232, 225, 0.26); /* The shared pages also set colours inline, as var(--color-text) and the * like with a light fallback. A stylesheet cannot override an inline * style, but it can change what the variable resolves to, which reaches * all fifty two of those without a single !important. * * These are set here on the body rather than on :root on purpose. Themes * derive their own tokens from --color-* at the :root level, so redefining * them up there would quietly repaint the theme itself. */ --color-text: var(--uc-ink); --color-muted: var(--uc-ink-soft); --color-background: var(--uc-surface); /* Used as a background nine times and as a border twelve. A translucent * light serves both: a faint raised panel on a dark card, a hairline where * it is a border. */ --color-surface: var(--uc-line); } /* ---------- surfaces ---------- */ :root.dark .uc-shop .bg-white { background-color: var(--uc-surface); } :root.dark .uc-shop .bg-gray-50, :root.dark .uc-shop .bg-gray-100, :root.dark .uc-shop .bg-gray-200 { background-color: var(--uc-raised); } :root.dark .uc-shop .hover\:bg-gray-50:hover, :root.dark .uc-shop .hover\:bg-gray-100:hover { background-color: var(--uc-raised); } /* ---------- type ---------- */ :root.dark .uc-shop .text-gray-900, :root.dark .uc-shop .text-gray-800 { color: var(--uc-ink); } :root.dark .uc-shop .text-gray-700, :root.dark .uc-shop .text-gray-600 { color: var(--uc-ink-soft); } :root.dark .uc-shop .text-gray-500, :root.dark .uc-shop .text-gray-400, :root.dark .uc-shop .text-gray-300, :root.dark .uc-shop .text-gray-200 { color: var(--uc-ink-faint); } /* Not text-white. It sits on a coloured button, which is coloured in both * schemes, and turning it dark would make the button unreadable. */ /* ---------- rules and edges ---------- */ :root.dark .uc-shop .border-gray-300, :root.dark .uc-shop .border-gray-400 { border-color: var(--uc-line-strong); } :root.dark .uc-shop .border-gray-200, :root.dark .uc-shop .border-gray-100, :root.dark .uc-shop .border-gray-50 { border-color: var(--uc-line); } /* Both spellings of the divider. Tailwind v4 draws it as a bottom border on every child but the last; the older selector skips the first child instead. Written only the old way, the first row in every list kept Tailwind's own near white line while the rest took this one, which is why a list appeared to have one bright rule under its first item and nothing else. */ :root.dark .uc-shop .divide-gray-100 > :not([hidden]) ~ :not([hidden]), :root.dark .uc-shop .divide-gray-50 > :not([hidden]) ~ :not([hidden]), :root.dark .uc-shop .divide-gray-200 > :not(:last-child), :root.dark .uc-shop .divide-gray-100 > :not(:last-child), :root.dark .uc-shop .divide-gray-50 > :not(:last-child) { border-color: var(--uc-line); } /* ---------- fields ---------- */ :root.dark .uc-shop input, :root.dark .uc-shop select, :root.dark .uc-shop textarea { background-color: transparent; color: var(--uc-ink); } :root.dark .uc-shop input::placeholder, :root.dark .uc-shop textarea::placeholder { color: var(--uc-ink-faint); } /* A dropdown's own list is drawn by the browser, which takes the page colours * from these two rather than from the field. */ :root.dark .uc-shop select option { background-color: var(--uc-surface); color: var(--uc-ink); } /* ---------- notices ---------- */ /* The pale tints are a wash of colour at four per cent of their weight in the * light scheme. Left alone they glare on a dark page, so they are rebuilt from * the same hue rather than swapped for grey, and the words on them lightened to * match: a dark red panel with dark red type on it says nothing. */ :root.dark .uc-shop .bg-red-50 { background-color: color-mix(in srgb, #F87171 13%, transparent); } :root.dark .uc-shop .bg-green-50, :root.dark .uc-shop .bg-emerald-50 { background-color: color-mix(in srgb, #34D399 13%, transparent); } :root.dark .uc-shop .bg-amber-50, :root.dark .uc-shop .bg-yellow-50 { background-color: color-mix(in srgb, #FBBF24 13%, transparent); } :root.dark .uc-shop .bg-blue-50, :root.dark .uc-shop .bg-indigo-50 { background-color: color-mix(in srgb, #818CF8 13%, transparent); } :root.dark .uc-shop .border-red-200, :root.dark .uc-shop .border-red-400 { border-color: color-mix(in srgb, #F87171 40%, transparent); } :root.dark .uc-shop .border-green-200, :root.dark .uc-shop .border-emerald-200 { border-color: color-mix(in srgb, #34D399 40%, transparent); } :root.dark .uc-shop .border-amber-200, :root.dark .uc-shop .border-yellow-200 { border-color: color-mix(in srgb, #FBBF24 40%, transparent); } :root.dark .uc-shop .text-red-800, :root.dark .uc-shop .text-red-700, :root.dark .uc-shop .text-red-600, :root.dark .uc-shop .text-red-500 { color: #FCA5A5; } :root.dark .uc-shop .text-green-800, :root.dark .uc-shop .text-green-700, :root.dark .uc-shop .text-green-600 { color: #6EE7B7; } :root.dark .uc-shop .text-amber-800, :root.dark .uc-shop .text-amber-700, :root.dark .uc-shop .text-yellow-800, :root.dark .uc-shop .text-yellow-700 { color: #FCD34D; } /* Indigo is the shared pages' link and accent colour. At 600 and above it is * chosen to read on white, and on a dark card it goes muddy. The buttons are * left alone: they are a solid indigo with white on them, which works in both. */ :root.dark .uc-shop .text-indigo-800, :root.dark .uc-shop .text-indigo-700, :root.dark .uc-shop .text-indigo-600 { color: #A5B4FC; } /* Status pills, which are a pale tint with its own darker text on top: green for paid, amber for pending, red for cancelled and so on. The text above was lightened for use on a dark panel, but these backgrounds stayed pale, so the pills ended up light on light and the word inside them disappeared. The background is rebuilt from the same hue to sit under the lightened text. */ :root.dark .uc-shop .bg-red-100 { background-color: color-mix(in srgb, #F87171 20%, transparent); } :root.dark .uc-shop .bg-green-100, :root.dark .uc-shop .bg-emerald-100 { background-color: color-mix(in srgb, #34D399 20%, transparent); } :root.dark .uc-shop .bg-amber-100, :root.dark .uc-shop .bg-yellow-100 { background-color: color-mix(in srgb, #FBBF24 20%, transparent); } :root.dark .uc-shop .bg-blue-100, :root.dark .uc-shop .bg-indigo-100 { background-color: color-mix(in srgb, #818CF8 20%, transparent); } :root.dark .uc-shop .bg-teal-100 { background-color: color-mix(in srgb, #2DD4BF 20%, transparent); } :root.dark .uc-shop .bg-orange-100 { background-color: color-mix(in srgb, #FB923C 20%, transparent); } /* The hues the pills use that were not lightened with the rest, so that every status reads the same way rather than three of them being legible. */ :root.dark .uc-shop .text-blue-800, :root.dark .uc-shop .text-blue-700, :root.dark .uc-shop .text-blue-600 { color: #93C5FD; } :root.dark .uc-shop .text-teal-800, :root.dark .uc-shop .text-teal-700, :root.dark .uc-shop .text-teal-600 { color: #5EEAD4; } :root.dark .uc-shop .text-orange-800, :root.dark .uc-shop .text-orange-700, :root.dark .uc-shop .text-orange-600 { color: #FDBA74; }