design · PromptZap Team
Dark Mode Retrofit
Adds a proper dark mode — parallel token set, adjusted shadows, WCAG-checked accents, prefers-color-scheme — instead of naively inverted colors.
Prompt text
Add a proper dark mode to [component/app], not just inverted colors. Requirements: - Generate a parallel token set: dark-mode background/surface/border/text colors that maintain the same relative contrast relationships as light mode (don't just flip black/white) - Flag every hardcoded color in the current code that needs to become a token - Adjust shadows for dark mode (they should be lighter/more subtle, often replaced with a lighter border instead of a shadow) - Preserve brand accent color but check it still passes WCAG AA contrast on dark backgrounds — suggest an adjusted shade if not - Respect prefers-color-scheme by default, with a manual toggle override stored in localStorage Show me the token diff (light vs dark) as a table before touching any component code.