102.3K+Download
Skip to the usage guide
Dark Mode Designby Owl-Listener

Dark Mode Design Skill.

Translate the interface hierarchy into dark surfaces instead of inverting its colors.

  • Color Design
  • Design Guidance
Download OpenDesignView Usage Guide
Source Review · Dark Mode DesignSKILL.md
Task UX Produces • A dark surface and elevation hierarchy • Mapped text, border, action, and status colors • Theme behavior and media adaptation guidance Before You Start Start with an existing light-mode palette, component examples and media assets. Use a rendered interface to check dark-mode contrast, theme switching and image treatment.
Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Dark Mode Design: Adapt an Existing Palette

Dark-palette adaptation with elevation, contrast, media treatment, and theme-selection behavior.

Source-based workflowNot an execution benchmark

The Working Approach

Dark Mode Design begins with an existing light palette. It uses progressively lighter dark surfaces to express elevation and adjusts bright colors, text, borders, and status treatments for the new background.

The source also includes images, illustrations, logos, system color-scheme preferences, and a manual switch. Its numeric color examples are reference points, not universal values. The design must be checked across real components and in the conditions where users will see it.

Expected Deliverables

  • A dark surface and elevation hierarchy
  • Mapped text, border, action, and status colors
  • Theme behavior and media adaptation guidance
See the Example Brief

From Brief to Review

  1. 01
    Read the Light Roles

    Identify existing semantic colors and component hierarchies.

  2. 02
    Remap Surfaces

    Use deliberate luminance steps and adjusted accents rather than a direct inversion.

  3. 03
    Review the Whole Interface

    Check component contrast, logos, images, automatic preferences, and a manual theme choice.

02 When to Use It

When to Use It

Start with an existing light-mode palette, component examples and media assets. Use a rendered interface to check dark-mode contrast, theme switching and image treatment.

A Good Fit

  • An Existing Light ProductUse when the base color system is already defined.
  • Uneven Dark ScreensResolve cards, overlays, and media that compete for attention in dark mode.

Limits to Check

  • Not Palette CreationBuilding the original product palette belongs to the color-system task.
  • Examples Need MeasurementSuggested colors and desaturation ranges cannot establish accessibility by themselves.

Bring These Inputs

  • Current PaletteProvide semantic light-mode roles.
  • Component InventoryShow elevated surfaces, states, and overlays.
  • Media and PreferencesIdentify brand images and expected theme-selection behavior.

03 Decisions That Matter

Decisions That Matter

  1. Elevation Without Heavy Shadows

    Surface luminance can communicate layers where dark shadows become ineffective.

  2. Media Is Part of the Theme

    A bright image or unsuitable logo can undermine an otherwise coherent dark interface.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Load this task's SKILL.md from the designer-skills repository in your agent's supported skill location. No universal installer command is established by the entry file.

Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md

Start with an existing light-mode palette, component examples and media assets. Use a rendered interface to check dark-mode contrast, theme switching and image treatment.

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief
Use dark-mode-design to adapt this existing light dashboard. Map surfaces and text semantically, review warning colors and chart imagery, and define system preference plus manual selection. Measure real contrast pairs and flag assets that need dark variants.

Inspect the Result

Check the actual output against these observable criteria.

  • Surface levels remain distinguishable.
  • Text and status contrast are checked.
  • Images, logos, and theme controls are reviewed.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesignRead the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner
Owl-Listener
Repository
Owl-Listener/designer-skills
Skill File
ui-design/skills/dark-mode-design/SKILL.md
License
MIT
Reviewed Snapshot
2026-10-07 · 9a6930cf84a8
Editorial Source Summary
Dark-palette adaptation with elevation, contrast, media treatment, and theme-selection behavior.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Can I simply invert the palette?

The source explicitly recommends redesigning surface relationships rather than inversion.

Does it create the original brand palette?

No. It assumes a base palette to adapt.

Should automatic mode replace a toggle?

The source recommends respecting system preference while also providing a manual choice.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesignBrowse Design Skills
Upstream Source File
https://github.com/Owl-Listener/designer-skills/blob/9a6930cf84a822eb458624bd11c61aac5bbdf224/ui-design/skills/dark-mode-design/SKILL.md