The Heroes Behind Mawu’s Seven New Dark Themes

Mawu Dark Mode 0.9.0 adds seven new dark themes for the WordPress dashboard. Each one started with a comic book hero and the one color everyone links to that hero. The themes ship under their own names, so here is where each palette came from, and what it took to make each one easy to read.

Why heroes make good dark themes

A calm dark theme is easy: pick a soft color and keep it quiet. A hero’s costume is the opposite, since it is designed to be spotted from across a city at night. That makes a hero color a good test. It has to work as a bright button and a readable link on a near-black screen, without making the body text harder to read.

Each theme below has three parts, shown in the strips above: a base color for the page, a slightly lighter color for cards and panels, and one signature color for buttons, links and highlights.

Why the names are different

Character names and logos are trademarks. WordPress.org’s plugin rules also say a plugin must not use someone else’s trademark in a way that suggests a link to them. So every theme got an original name, and nothing inside the plugin mentions a character. The heroes only appear here, to explain where the colors came from.

Emerald

Green Lantern’s ring glows a bright, almost electric green. Emerald’s signature color, #2ee6a6, leans a little toward blue so it glows instead of looking like plain grass green. The base is a green-tinted black, #0d1512.

Green brought one real problem. Mawu shows “saved” and “success” messages in its own softer green. If links looked like that green, a normal link could pass for a success notice. The test suite measures the color distance between every theme’s link color and every status color, and Emerald clears it.

Gargoyle

Batman is mostly gray and black, with one flash of yellow from the oval behind the classic chest emblem. Gargoyle copies that balance. The grays are nearly neutral, starting at #0e0f12, and the only strong color is a warm yellow, #f5dc2a.

Yellow on charcoal is the easiest pair to read in the whole collection. Black button text on Gargoyle’s yellow measures 15.2:1, more than three times the 4.5:1 minimum.

Skyline

Spider-Man pairs red with deep blue. Skyline uses a navy base, #10131f, and a hot red, #ff2e63.

This was the one theme where the signature color failed as a link. Links must reach 4.5:1 on both card colors. The red reached 4.69:1 on one and fell just short on the other. So links use a slightly lighter red, #ff4272, which passes on both. Buttons keep the original red, since they carry black text, and black on #ff2e63 measures 5.8:1.

Forge

Iron Man’s armor is red and gold. Forge puts the red in the background, a dark red-brown (#1a1212) like metal cooling after it leaves the forge. The gold becomes a molten orange, #ff9d1c, for buttons and links.

The red went into the base on purpose. A red link can look like an error message, and an orange link on a red-tinted page doesn’t.

Onyx

Black Panther’s suit is black, and in the films it glows purple when it stores energy. Onyx uses a near-black with a hint of violet, #111014, and a bright purple accent, #c07bff.

Purple is also the color of the original Mawu theme, but Onyx is darker and more saturated. It’s the pick for anyone who likes Mawu but wants more punch.

Velocity

The Flash is red with gold lightning. Velocity has the warmest base in the set, a deep crimson (#1c0f10), and a lightning gold, #ffcc00.

Warm backgrounds can make text look muddy, so Velocity’s body text is a pale pink-white. It measures 13.5:1 against the base.

Abyss

Aquaman lives in the deep sea. Abyss starts from a teal-black, #081a1c, and adds a bright aqua, #19e6d8, like light coming through deep water.

Mawu’s Nature collection already has a water theme, Tide. Tide is calm and a little softer. Abyss has a darker base and a much brighter accent.

The rules every theme had to pass

A dark palette can look fine and still fail a contrast check. Mawu’s first audit found exactly that, which is why every theme now goes through the same automatic tests on every change:

• Body text on the page background: at least 4.5:1. The hero themes range from 11.9:1 to 13.8:1.
• Muted text on the lighter panel color: at least 4.5:1.
• Links on both card colors: at least 4.5:1.
• Black button text on the signature color: at least 4.5:1. The lowest in the collection is Skyline at 5.8:1.
• Links must look clearly different from the success, warning, error and info colors.

The seven themes also cover everything the other Mawu themes do: the dashboard, the admin bar and menu, the block editor with its writing canvas, the Classic Editor, and the login screen if you turn it on. Buttons in the block editor, like Publish, switch to the theme’s signature color too.

How to try them

Update Mawu Dark Mode to 0.9.0. Then go to Settings, then Mawu Dark Mode. Choose “Hero collection” above the theme grid and click “Use this theme” on the one you want. You can also pick them under Users, then Profile, then Admin Color Scheme. Each person on a site picks their own, so your choice doesn’t change anyone else’s dashboard.

If you use scheduled dark mode, any hero theme can be your night theme. See scheduled dark mode for how that works, or all 13 themes side by side.

Mawu Dark Mode is not affiliated with, sponsored by or endorsed by DC Comics, Marvel or their parent companies. Green Lantern, Batman, The Flash and Aquaman are trademarks of DC Comics. Spider-Man, Iron Man and Black Panther are trademarks of Marvel. They are named here only to describe the inspiration for each color palette. All graphics on this page are Mawu’s own color swatches.