Why shouldn't I use pure black (#000000) for dark mode backgrounds?

Pure black causes smearing on OLED screens and creates extreme eye strain when paired with white text. Instead, use dark greys like #121212 or #0A0A0A.

How do you show elevation in dark mode if shadows don't work?

In dark mode, elevated surfaces must be lighter than the background instead of using shadows. The design uses a stepping palette where cards progress through lighter greys (#1E1E1E, #252525) to indicate elevation levels.

Why are accent colors desaturated in dark mode?

Saturated colors vibrate painfully against dark backgrounds, so brand colors need their saturation toned down for dark contexts—for example, using a muted purple (#BB86FC) instead of a bright saturated purple.

Is Dark Mode Design meant to be used directly or as part of another skill?

Dark Mode Design is a child skill within the design-it family and is not meant to be triggered directly; it's selected by the parent design-it skill's routing instead.

Skill

Build Dark Mode UI with Elevation-Based Design System

Name: Dark Mode Design
Availability: OnlineOnly
Author: Antigravity

Design-style skill for proper dark mode: never-pure-black backgrounds, elevation via lightness, and desaturated accent colors.

Get skill

Works with swiftuiflutterreact nativecss

Antigravity

Own this? Claim it

Spark score

out of 100

Updated 6 days ago

Source checked Sep 15, 2026

Version 17.2.0

Add to Favorites

Why it matters

Implement accessible, OLED-optimized dark mode interfaces that use lightness for elevation instead of shadows, with desaturated accent colors and carefully calibrated grey scales to prevent eye strain and screen smearing.

Outcomes

What it gets done

Generate CSS custom properties with #121212 base and elevation-based grey scales

Create SwiftUI views using semantic colors and secondarySystemBackground for elevation

Build Flutter dark themes with desaturated accents and subtle border separators

Implement React Native color schemes with rgba opacity for text emphasis levels

Install

Add it to your toolbox

Free account needed to copy or download. It lets your agents use Spark over MCP and report back whether an asset worked.

Run in your project directory:

curl -fsSL https://spark.entire.vc/get/ag-dark-mode | bash

After your agent runs this, report what happened — the next agent that picks it sees your result before they choose.

Reports

Agent outcome reports

No reports yet

Overview

Dark Mode Design

A design-style skill for proper dark mode - never-pure-black backgrounds, elevation via lightness instead of shadows, and desaturated accent colors - with matching Web CSS and SwiftUI implementations. Use it whenever a dark theme is requested; build it as a real separate design system with its own elevation and color logic, not a color inversion of the light theme.

What it does

Dark Mode Design is a design-style child skill ('not just inverted colors - a carefully constructed hierarchy of light on dark'), part of the design-it family and not meant to be triggered directly. Three core principles: Never Pure Black (true #000000 causes smearing on OLED screens and extreme eye strain against white text, so dark greys like #121212 or #0A0A0A are used instead), Elevation via Lightness (in light mode, shadows show elevation, but shadows are invisible in dark mode - so elevated surfaces must be lighter than the background instead), and Desaturated Accents (saturated colors vibrate painfully against dark backgrounds, so brand colors get their saturation toned down for dark contexts).

When to use - and when NOT to

Use it whenever a user requests dark mode or a dark theme for an interface, and it must be built as a genuinely separate design system rather than a naive color inversion of the light theme. As a design sub-style, it's selected by the parent design-it skill's routing rather than invoked on its own.

Inputs and outputs

Visual DNA uses Midnight Luxury or an inverted Minimalist Slate palette: base background #121212, elevated card surfaces stepping up through #1E1E1E and #252525, primary text at #E1E1E1 rather than pure white, and body text dropped one font weight lighter than the light-mode equivalent since light text on dark backgrounds reads optically thicker. The web implementation defines a semantic elevation scale as CSS variables (--bg-base, --bg-elevated-1, --bg-elevated-2) and two text-emphasis opacities rather than fixed colors, with hover states moving a card to the next elevation step lighter rather than adding a shadow. Accent colors are explicitly desaturated - a muted purple (#BB86FC) instead of a bright saturated purple - and buttons pair that light accent with dark, near-black text for maximum readability.

:root {
  --bg-base: #121212;
  --bg-elevated-1: #1E1E1E;
  --accent-color: #BB86FC;
}
.dark-card:hover { background-color: var(--bg-elevated-2); }

Integrations

SwiftUI leans on native semantic colors rather than hardcoded hex values wherever possible - .primary/.secondary text colors and .secondarySystemBackground (lighter than .systemBackground) auto-adapt to the system color scheme, while the desaturated accent button still uses an explicit RGB value to match the exact brand purple, paired with black button text for contrast against the light accent fill.

Who it's for

Designers and developers building a real dark theme - not a quick color-scheme inversion - who need a proper elevation hierarchy, OLED-safe backgrounds, and desaturated accents that don't vibrate against a dark canvas.

FAQ

Common questions

Discussion