WordPress Admin Dark Theme

WordPress has no dark mode for wp-admin. The admin colour schemes under your profile only change the sidebar, and the content stays a large white screen. Dark mode plugins exist, but many load a lot of CSS and JavaScript for what is mostly a colour change.

This WordPress admin dark theme is a few lines of CSS. It inverts the admin screens and the block editor’s toolbar and sidebars, turns images and colour swatches back to their real colours, and leaves the editor canvas in your theme’s colours, so you still see the post as visitors will.

The CSS

/* WordPress admin dark theme (dpc). CSS only, loaded in wp-admin. */

/* Dark page behind the inverted content. */
body.wp-admin,
.wp-admin #wpwrap {
	background-color: #1d1d1d;
}

/* Classic screens: invert the content area, turn the hues back so links stay blue. */
.wp-admin:not(.block-editor-page) #wpbody {
	filter: invert(0.9) hue-rotate(180deg);
}

/* Block editor: invert the toolbar and the sidebars; the canvas keeps the theme's own colours. */
.block-editor-page :is(.interface-interface-skeleton__header, .interface-interface-skeleton__sidebar, .interface-interface-skeleton__secondary-sidebar, .interface-interface-skeleton__footer) {
	filter: invert(0.9) hue-rotate(180deg);
}

.block-editor-page .interface-interface-skeleton__content {
	background-color: #1d1d1d;
}

/* Show images, video, embeds and colour swatches in their real colours again. */
.wp-admin:not(.block-editor-page) #wpbody :is(img, video, iframe, .wp-color-result, .iris-picker),
.block-editor-page :is(.interface-interface-skeleton__header, .interface-interface-skeleton__sidebar, .interface-interface-skeleton__secondary-sidebar) :is(img, video, iframe, .components-color-palette__custom-color-button, .components-circular-option-picker__option) {
	filter: invert(1) hue-rotate(180deg);
}

Add it with Scripts Organizer

In Scripts Organizer go to Code Blocks → Add New and give the block a name. Set Trigger location to Admin only, tick Header under Script location, set Header Mode to CSS, paste the CSS and publish.

With Admin only the CSS is printed in the <head> of every wp-admin page, for every logged-in user who opens wp-admin, and never on the front end. No PHP is needed. The older version of this post echoed the same kind of CSS from a PHP function on admin_head.

Without Scripts Organizer, load the CSS with wp_add_inline_style() on admin_enqueue_scripts in a small plugin.

How it works

filter: invert(0.9) turns white into dark grey and black text into light grey. hue-rotate(180deg) turns the inverted colours back around the colour wheel, so blue links and buttons stay blue instead of orange.
The admin menu and the admin bar are already dark, so only #wpbody, the content area, is inverted.
Images, video, iframes and colour swatches are inverted a second time with invert(1) hue-rotate(180deg), which brings them close to their real colours.
In the block editor the post content is inside an iframe. Inverting it would turn your photos and colours into negatives, so only the editor’s toolbar, sidebars and footer are inverted. The older version targeted .editor-styles-wrapper, which no longer exists outside that iframe, so the editor was left half white.
#wpbody is not filtered on block editor screens. A filter makes an element the reference for position: fixed children, and the full-screen editor is one of those.

Customise it

Softer or harder contrast: change 0.9 in both invert(0.9) rules, for example to 0.85 (the original value) or 1.
Only for you: the Admin only trigger has no user condition, so if other users should keep the light admin, wrap the CSS in PHP and print it only for your user ID.
Something still looks wrong, such as a plugin’s chart: add its selector to the last rule so it is turned back.

Gotchas

It is a filter trick, not a designed dark theme. Shadows look like light glows, and some plugin screens with their own colours look odd.
Popovers and dropdowns in the block editor, the media modal and the Site Editor are not inverted and stay light.
Inverting large areas costs some rendering time on very long list tables. On a slow machine you may notice it while scrolling.
Prefer colour-coding the admin menu instead? See Color Admin Menu Items.

In the Scripts Organizer library Import it with one click from Scripts Organizer.