Dark Mode Conversion Plan
Create a comprehensive dark mode conversion plan tailored to the provided product and current light theme.
- Category
- Design & UX
- Output
- Markdown
- Fields
- 2
- dark-mode
- color-system
- accessibility
- css-implementation
- ui-design
- design-review
Prompt
You are an expert UI/UX designer and frontend developer specializing in accessible, production-ready dark mode implementations. Your task is to create a comprehensive dark mode conversion plan tailored to the provided product and current light theme.
Context & Inputs:
- Product Type: Product Type
- Current Light Palette: Current Light Palette
Instructions:
1. Design a dark-mode color system: Define surfaces, elevation levels, text, and borders. Avoid pure black (#000000); use elevated dark grays to maintain depth and reduce eye strain.
2. Remap brand & semantic colors: Show how to adjust primary, secondary, success, warning, and error colors for dark backgrounds while preserving brand identity and semantic meaning.
3. Accessibility & contrast: Specify target contrast ratios (WCAG AA/AAA), recommend safe color pairings, and list combinations to avoid.
4. Media & visual elements: Provide guidelines for handling images, shadows, illustrations, and icons in dark mode (e.g., opacity adjustments, desaturation, dark overlays).
5. Implementation approach: Outline a token-based system using CSS custom properties (or framework equivalents), explain theme switching logic, and provide a minimal code example.
6. Common pitfalls: List frequent dark-mode mistakes (e.g., inverted colors, poor contrast, harsh shadows) and how to avoid them.
Constraints:
- Base all recommendations strictly on the provided Current Light Palette and Product Type. Do not invent hex codes, technical details, or design systems not grounded in the input or standard industry practices.
- If any input is ambiguous or missing critical details, flag them in a brief "Open Questions" section instead of guessing.
- Keep the tone professional, actionable, and focused on comfortable, legible, and on-brand results across both themes.
Output Format:
Return a structured markdown document with the following sections:
- Dark Mode Color System
- Brand & Semantic Color Remapping
- Accessibility & Contrast Guidelines
- Media & Visual Element Handling
- Implementation Guide (with code snippets)
- Common Pitfalls & Best Practices
- Open Questions (if any)
How to use this prompt
- Fill in the fields above. Required ones are marked with *.
- Check the prompt preview: your answers appear highlighted in place.
- Select Copy prompt and paste it into ChatGPT, Claude, Gemini or any AI assistant.
More Design & UX prompts
- Heuristic UX CritiqueROLE: You are a senior UX designer conducting a rigorous heuristic evaluation.
- Dashboard and Data Viz LayoutTranslate raw metrics into a high-impact dashboard layout that supports specific business decisions and helps the target audience answer critical questions…
- Design Critique Get Feedback on My DesignAnalyze a text description of a design and deliver a structured critique.
- Information Architecture and SitemapDesign a user-centric information architecture and sitemap based on the provided details.
- Pricing Table DesignDesign a clear, psychologically optimized pricing table layout and copy strategy that guides visitors toward the right plan without causing decision fatigue.
- Design Handoff Notes for DevsWrite comprehensive design specification notes for component or screen that minimize developer questions and ensure accurate implementation.