1. Habit
  2. Skills
  3. Dark Mode Design skill
owl-listener · 2K installs

Dark Mode Design skill
Runs by itself, light theme changed.

Dark mode stays readable everywhere.

Install the Dark Mode Design skill and make it a habit: follow https://gethabit.dev/skills/owl-listener/dark-mode-design.md

  1. 1Copy
  2. 2Paste into Claude Code, Codex or Cursor
  3. 3It runs by itself

2K installs3K starsMIT licenceSource on GitHub ↗

Dark Mode Design

by owl-listener · 2K installs

The skill

The dark mode design skill helps agents adapt an existing light palette to dark mode: surface elevation, desaturated colors, off-white text, contrast rebalancing and media handling.

Only when you ask.

The habit

Dark mode stays readable everywhere.

↻ Runs by itselflight theme changed

How the habit works.
You don't have to.

Three questionsWhen does it start? How does it check its work? What does it remember?

01

It starts by itself

light theme changed. Runs in GitHub Actions or Claude Code routine.

  • ↻ light theme changed
  • commit that edits light theme colors or components

02

It checks its work

dark contrast and surfaces. If a check fails, it tells you.

  • ✓body text in dark mode reaches 4.5:1
  • ✓surfaces get lighter with elevation
  • ✓text uses off-white, not pure white
  • ✓prefers-color-scheme is respected and a manual toggle exists

03

It remembers

dark mode log. The next run reads it first: components that failed in dark mode before.

loops/dark-mode-check-loop/log.md

One run, step by step.
Then it stops.

Stop ruleStops after one pass over the changed components.

  1. 01

    Map the surfaces

    Your agent checks background and three elevated surface levels from darkest to lightest.

  2. 02

    Adapt the colors

    It checks primaries are desaturated and error and warning colors are adjusted for dark backgrounds.

  3. 03

    Check text and borders

    It confirms off-white text and subtle low-opacity borders.

  4. 04

    Check media

    It looks for dimmed images, dark illustration variants and light-on-dark logos.

  5. 05

    Check accessibility

    It measures contrast and confirms the media query and manual toggle work.

  6. 06

    Log the results

    It records failing components and uses the color-system skill when the base palette is missing.

What it may do.
Nothing more.

Safe by defaultIt writes only in its own folder and asks you before anything goes out.

Is it for you?
Use it when it fits.

Quick checkRead both lists. If the left one sounds like you, the Dark Mode Design skill helps.

Use it when

  • ✓ adding dark mode to an app
  • ✓ fixing low contrast in a dark theme
  • ✓ planning dark surface levels

Skip it when

  • – you have no base palette yet
  • – you need chart colors

Questions

Dark Mode Design skill, answered.

Is dark mode just inverted colors?

No. The skill redesigns surfaces with elevation and adjusted colors instead of inverting.

What if I have no light palette yet?

Build it first with the color-system skill, then adapt it with this one.

How do I install the Dark Mode Design skill?

Copy the prompt at the top into your agent. It installs the skill from owl-listener/designer-skills and sets up the habit. Or run npx skills add owl-listener/designer-skills --skill dark-mode-design.

Is the Dark Mode Design skill free?

Yes. It is published under MIT. Habit is free too.

Dark Mode Design. Now as a habit.

Install the Dark Mode Design skill and make it a habit: follow https://gethabit.dev/skills/owl-listener/dark-mode-design.md

  • Free
  • No account
  • Undo in one line

All owl-listener skills →More design skills →

Works in

  • Claude Code
  • Codex
  • Cursor
  • ChatGPT
  • Claude app

Made by owl-listener, published under MIT. Habit links to the original and never changes it. Is this your skill?

Copying didn't work here. Select the line and copy it by hand.