← All posts

WordPress Admin Dark Mode and Custom Admin CSS: WP Admin Cleaner

wp admin cleaner

In most setups, a WordPress admin dark mode is either all or nothing: one person picks the color scheme and every other user gets it too. WP Admin Cleaner turns on the dark theme for the WordPress admin and the Gutenberg editor per user, and lets you add your own admin CSS. With a few lines of CSS you can highlight the menu items you use most, so they stand out when you open the dashboard.

Per-user dark theme for the WordPress admin

If a site has several users, one user's visual preference shouldn't change the admin for everyone else. In WP Admin Cleaner, the dark theme setting applies only to the user who turns it on.

  1. Go to Tools → WP Admin Cleaner and open the Dark Themes tab.
  2. Under Enable Dark theme for:, switch on WP Admin.
  3. Click Save Changes.

The dashboard, the posts list and every other admin screen switch to dark right away. In the video, we log in as a second user (a designer account) in another window and reload. That admin stays light because the setting belongs to the user who enabled it.

Gutenberg dark theme and Oxygen compatibility mode

A dark admin next to a bright white editor is hard on the eyes when you switch between them all day. The same tab has a switch for the block editor.

  1. In Dark Themes, switch on Gutenberg.
  2. Click Save Changes.
  3. Open any page for editing. The whole Gutenberg interface is now dark.

If you build with Oxygen Builder and use the Oxygen Gutenberg add-on, turn on Gutenberg optimized for Oxygen instead of Gutenberg. The add-on loads CSS differently, and this option covers the edge cases we found there.

Inject custom admin CSS

Sometimes you want to change one small thing in the admin, and a separate plugin or theme file is overkill for that. The fourth switch on the tab, Inject Custom CSS, opens a code editor. Any CSS you put there is loaded in the admin.

  1. Switch on Inject Custom CSS.
  2. Paste or write your CSS in the editor.
  3. Click Save Changes.

For this part of the video we turned the dark theme off because light mode gives more contrast when working during the day. The custom CSS works in both modes.

Highlight the Comments menu

When you check a few admin screens every day, it saves time if you can spot them in the sidebar right away. This snippet gives the Comments menu item a yellow background and turns its text and icon black:

#adminmenu #menu-comments a { background: yellow ; color: black; }
#adminmenu #menu-comments div.wp-menu-image:before { color: black; }

The first line styles the link. The second line colors the dashicon, which WordPress renders as a :before pseudo-element on div.wp-menu-image. After you save, Comments turns yellow right away.

To highlight another item, you need its ID:

  1. Right-click the menu item and choose Inspect.
  2. Find the <li> for that menu. WordPress gives each top-level item an ID such as menu-comments, menu-appearance or menu-plugins.
  3. Copy the two lines, replace menu-comments with the new ID and change the color.

Target only the top-level link, not the submenu

When we copied the rule to Appearance, the orange background also went onto every link in its submenu (Themes, Editor, Customize, Menus). That happens because #menu-appearance a matches every link inside the menu item. To style only the top-level link, use the child combinator >. It targets only the a that sits directly inside the <li>:

#adminmenu #menu-appearance > a { background: orange ; color: black; }
#adminmenu #menu-appearance div.wp-menu-image:before { color: black; }

Now only the main Appearance link is orange, and the flyout submenu keeps its default look. Use this pattern for any menu item that has submenus.

Highlight the Plugins menu too

The same two lines work for any menu item. Here is the full snippet from the end of the video, with Plugins added:

#adminmenu #menu-comments a { background: yellow ; color: black; }
#adminmenu #menu-comments div.wp-menu-image:before { color: black; }

#adminmenu #menu-appearance > a { background: orange ; color: black; }
#adminmenu #menu-appearance div.wp-menu-image:before { color: black; }

#adminmenu #menu-plugins > a { background: orange ; color: black; }
#adminmenu #menu-plugins div.wp-menu-image:before { color: black; }

It's only a few lines of CSS, and the admin screens you use most are easy to spot. The WordPress admin uses the same menu IDs on every site, so you can keep this snippet and paste it into WP Admin Cleaner on your other sites.

Who is this for

  • Developers and builders who spend long hours in wp-admin and want a dark admin and editor without forcing it on clients or teammates.
  • Oxygen Builder users on the Gutenberg add-on who need a dark editor that handles that setup's CSS loading.
  • Anyone managing many sites who wants a reusable CSS snippet to highlight key menu items without adding another plugin.

FAQ

Does the WP Admin Cleaner dark theme change the admin for all users?

No. The dark theme applies only to the user who enables it. In the video, a second user on the same site keeps the default light admin.

Can I use a dark theme in the Gutenberg editor?

Yes. Switch on Gutenberg in the Dark Themes tab and save. The whole block editor interface switches to dark mode.

Which option should I use with Oxygen Builder?

If you use Oxygen with its Gutenberg add-on, enable Gutenberg optimized for Oxygen instead of Gutenberg. It handles edge cases caused by how CSS loads in that setup.

How do I add custom CSS to the WordPress admin?

In Tools → WP Admin Cleaner → Dark Themes, switch on Inject Custom CSS, write your CSS in the editor and click Save Changes. It loads in the admin right away.

How do I style a menu item without changing its submenu links?

Use the child combinator, for example #adminmenu #menu-appearance > a. It matches only the top-level link, not the links in the submenu.

Get WP Admin Cleaner → dplugins.com

Related posts