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

Related assets

More curated picks in Design & Creative.

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/canvas-design ~/.claude/skills/

Canvas Design

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece…★ 4.8 · 2,500+

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/web-artifacts-builder ~/.claude/skills/

Web Artifacts Builder

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui…★ 4.8 · 2,500+

skillclaude_appclaude_codeclaude_api

git clone https://github.com/anthropics/skills && cp -r skills/skills/slack-gif-creator ~/.claude/skills/

Slack Gif Creator

Knowledge and utilities for creating animated GIFs optimized for Slack. Provides constraints, validation tools, and animation concepts. Use when users…★ 4.8 · 2,500+

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

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+

image stylemidjourneydall-eflux

Studio-lit isometric product renders with soft shadows and clean surfaces.

3D Product Render Style Pack

Studio-lit isometric product renders with soft shadows and clean surfaces.0+

Audit before you install

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

Automated Web Security Scan

security

PageSpeed Analyzer

performance

AI Content Quality Test

arabic content

AI Agent / MCP Server Tester

ai testing

Site Stack Detector

migration

AI SEO / AEO / GEO Audit

ai visibility

llms.txt Generator

ai visibility

Readability Score

arabic content

Schema / JSON-LD Builder

ai visibility

AI Cost Calculator

ai testing

Headline Analyzer

arabic content