prompt

Dark Mode Palette Adapter

Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.

VettedUpdated June 2026
The prompt
Adapt this light-mode palette to dark mode: {{palette}}. Provide dark-mode values for background surfaces (base, raised, overlay), text (primary, secondary, disabled), borders, and the brand and semantic colors. Keep contrast accessible (aim for WCAG AA), avoid pure black, and note any color that needs desaturating in dark mode.
Did it work? Rate this prompt

Variables

paletteLight palette

Example output

Dark-mode adaptation. Backgrounds: base #0E0F12 (not pure black), raised #16181D, overlay #1E2128. Text: primary #ECEDEF, secondary #A4A8B0, disabled #5E636C. Borders: #2A2E36. Brand: lighten and slightly desaturate the light-mode brand so it does not vibrate on dark — e.g., a saturated blue moves from #1E5BFF to a softer #5B8BFF. Semantic: success, warning, and error each get a lighter, less saturated variant for contrast on dark surfaces. Note: bright pure colors look harsher on dark; desaturate by roughly 10-15% and verify each text pairing meets AA.

Details

Author

AI Khazna

License

—

Security

Vetted

Type

prompt

Frequently asked questions

What is the Dark Mode Palette Adapter prompt?

Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.

Is Dark Mode Palette Adapter free?

Yes, it is free to use.

Related assets

More curated picks in Design & Creative.

prompt
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Illustration Style Brief
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.0+
prompt
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.
Font Pairing Advisor
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.0+
prompt
Turns a vague design ask into a structured creative brief a designer can act on.
Creative Brief Generator
Turns a vague design ask into a structured creative brief a designer can act on.0+
prompt
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Accessibility Contrast Checker
Checks color pairs against WCAG contrast rules and suggests accessible fixes.0+
prompt
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
Design System Component Spec
Specs a UI component with its variants, states, sizing, and usage rules for a design system.0+
prompt
Runs a structured critique of a screen or layout across hierarchy, spacing, and clarity.
Design Critique Checklist
Runs a structured critique of a screen or layout across hierarchy, spacing, and clarity.0+

Audit before you install

Run any source through our checks - AI visibility, security, performance, and stack detection.

AI Agent / MCP Server Tester

ai testing

Automated Web Security Scan

security

AI Content Quality Test

arabic content

Site Stack Detector

migration

PageSpeed Analyzer

performance

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Schema / JSON-LD Builder

ai visibility

Readability Score

arabic content

AI Cost Calculator

ai testing

Headline Analyzer

arabic content

More in Design & Creative