Skip to content
delta

Turn on light and dark mode

Turn on the dark colours the seed already ships, follow each visitor’s computer setting, and add an optional switch.

Recipe
Turn on dark mode for this site. Follow the visitor’s computer setting. Start with get-design-context. This recipe is for the Delta seed design system, which already has a dark version of every colour in site.css (the :root block for data-theme dark). If the site uses its own design system, stop and tell me: it needs a dark block with my own variable names first. 1. Add a short script to the Header scripts (Delta → Scripts) that runs before the page paints. It reads a stored choice from localStorage and otherwise follows prefers-color-scheme, then sets data-theme on the html element, so the page opens in the right mode with no white flash. 2. In site.css, set color-scheme: light on :root and color-scheme: dark in the dark block, so form fields, scrollbars and dropdowns follow the mode. 3. Add a colour mode switch to the header, next to the menu (skip this step if I say no switch). It cycles through system, light and dark, its label says the current mode, and it uses the same storage key as the header script. System removes the stored choice and follows live changes to the computer setting. 4. If I changed the palette, compare the dark colours with my light colours. Propose a dark value for each one that no longer fits, check that each text and background pair reaches 4.5:1, and show me the table before you write anything. Check the action colour, the text on buttons and the inverted sections in both modes. 5. Open the site in both modes and list everything that still looks light or is hard to read: logos, inline SVGs with fixed fills, bright photos, forms, plugin pages and embeds. Mix colours with colour tokens, never with white or black. Show me each change as a diff and wait for my approval before you write.