dark-mode-design

Design accessible dark mode interfaces with surface hierarchy and contrast validation.

3|Updated Mar 28, 2026

Search Tags:#typography #design #ui #accessibility #contrast #dark-mode

Ready to run

npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill dark-mode-design-hulusi-tunc

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: dark-mode-design
Source: https://github.com/hulusi-tunc/unicorn-skills/tree/main/.claude/skills/ui-design--dark-mode-design
Command: npx skills add https://github.com/hulusi-tunc/unicorn-skills --skill dark-mode-design-hulusi-tunc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Designing dark mode interfaces should go beyond simple color inversion to maintain readability and accessibility. This skill provides guidance to create comfortable, accessible, and visually polished dark mode experiences.

Core Features & Use Cases

Design dark mode experiences that go beyond simple color inversion.
Establish a clear surface hierarchy (background, surfaces, elevation) to improve readability.
Apply color adaptation and typography choices that preserve contrast and legibility on dark backgrounds.
Validate accessibility with contrast checks and screen-reader considerations across web and mobile.

Quick Start

Start by auditing your current UI and implement the outlined dark mode principles to improve contrast, elevation, and readability.

Frequently Asked Questions about dark-mode-design

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I design a dark mode interface that maintains readability beyond simple color inversion?▼

Dark mode design requires establishing a clear surface hierarchy for backgrounds and elevation, applying color adaptation, and adjusting typography to preserve contrast and legibility on dark backgrounds.

What are the accessibility guidelines for dark mode contrast on web and mobile UI?▼

Dark mode accessibility involves validating contrast checks and screen-reader considerations across web and mobile to ensure UI components meet readability standards on dark surfaces.

How do I establish surface hierarchy and elevation for dark mode UI design?▼

Surface hierarchy in dark mode UI design is established by defining distinct background, surface, and elevation layers, improving readability by separating elements visually rather than relying on shadows.

Does dark mode typography need different contrast adjustments for accessibility?▼

Dark mode typography requires specific color adaptation to preserve contrast and legibility on dark backgrounds, ensuring text remains accessible and visually polished without causing eye strain.

What is the best way to test and validate dark mode accessibility across web and mobile?▼

The best way to validate dark mode accessibility is by auditing current UI elements, running contrast checks, and verifying screen-reader considerations across web and mobile platforms.

Why does simply inverting colors not work for accessible dark mode design?▼

Simple color inversion fails accessible dark mode design because it ignores surface hierarchy, color adaptation, and typography adjustments needed to maintain proper contrast and readability on dark backgrounds.