Skip to content

Add a dark theme

A second set of colors that follows the system setting, checked for contrast

Add a dark theme to this site that follows the visitor's system setting. How to do it: - Find the colors the site uses and name them as theme tokens (background, surface, text, muted text, line, accent). If the project uses Tailwind 4, define them in @theme and use those classes; do not scatter dark: variants over every element. - The dark set is not the light one inverted. Background near black but not pure black, surfaces a step lighter, text off-white, lines as low-opacity white. Keep the accent, adjusted if it gets too loud. - Shadows mostly disappear on dark: replace them with a faint light ring where a surface needs an edge. - Check contrast for body text, muted text and text on the accent. Body text at least 4.5 to 1. - Images and logos that assume a light background get a treatment, or a note to me if they need new files. Do not add a theme switcher unless I ask. Do not change the layout. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. List the tokens you created with their light and dark values.

Other prompts