Task prompt · Websites & Apps
Add dark mode to an existing site
by Agent Yard TeamAdds a proper dark theme with a toggle that respects system settings.
You'll attach
Needs file
Works with
Cursor
Claude Code
Codex
Claude
ChatGPT
GeminiUse cases
- Adds a proper dark theme with a toggle that respects system settings.
- When you already have a file and want the AI to work from it instead of starting from scratch.
- Reuse it as often as you like: fill in the blanks (paste css if not attached) with new details and copy again.
- With Cursor, Claude Code, Codex and more, the AIs that support what this prompt needs.
Featured in: Best Cursor prompts for building websites.
How to use it
- Open Cursor or Claude Code in your terminal (or another AI listed here).
- Attach the file (PDF, Word, CSV or Excel), or paste its text into the prompt.
- Fill in the highlighted blank ([PASTE CSS IF NOT ATTACHED]) below, or edit them after pasting.
- Copy the prompt, paste it into the chat and send.
Fill in the blanks (optional)
Prompt
Add dark mode to my site. My CSS is attached (or pasted below). - Convert colors to CSS custom properties if they aren't already. - Create a dark palette with readable contrast (WCAG AA), not just inverted colors; keep my brand color recognizable. - Default to the user's system setting via prefers-color-scheme, add a toggle that remembers the choice in localStorage, and avoid a flash of the wrong theme on load. - Handle images, shadows, borders and form controls. Return the full updated CSS, the toggle HTML and the small JS snippet, and list anything that needs manual checking. [PASTE CSS IF NOT ATTACHED]
One email a week
The Weekly is presented byyour brandSponsored · openThe best new prompts and personas, nothing else.