WordPress Admin Dark Theme

WordPress sadly only have “Light mode”. If you have problem with that hard contrast and big light screen you need to install heavy plugins that only bloats your server and admin resources.

screenshot 2021 05 09 at 20 19 59 dashboard ‹ scripts organizer — wordpress
WP Admin Dark
screenshot 2021 05 09 at 20 20 21 dashboard ‹ scripts organizer — wordpress
WP Admin
screenshot 2021 05 09 at 20 20 47 pages ‹ scripts organizer — wordpress
Pages List Dark
screenshot 2021 05 09 at 20 21 13 pages ‹ scripts organizer — wordpress
Pages List
screenshot 2021 05 09 at 20 21 38 edit post ‹ scripts organizer — wordpress
Gutenberg Dark
screenshot 2021 05 09 at 20 21 59 edit post ‹ scripts organizer — wordpress
Gutenberg
screenshot 2021 05 09 at 20.23.13
Gutenberg Add Elements Dark
screenshot 2021 05 09 at 20.22.54
Gutenberg Add Elements

Scripts Organizer Setup

Select admin only condition. With that option CSS will be served only to the logged in users.

Use PHP Block as this CSS will be inserted into WP Action

screenshot 2021 05 09 at 20.49.58

Since Scripts Organizer have Scheduling Feature you can also have Light theme during the day and Dark theme during the night switched automatically.

Under Script Duration switch from All day to Time and you will get option to set up “from and to” hours.

<?php
function adminStylesCss() {
echo '
<style>

/* Admin BG color */
.wp-admin {
  background-color: #262626;
}

/* Revert colors and bring back links colors */
.wp-admin #wpbody {
  filter: invert(0.85) hue-rotate(185deg);
}

/* Bring back colors to the images */
.wp-admin #wpbody img {
  filter: invert(0.85) hue-rotate(-185deg);
  background: white;
}

/* Gutenberg bring it back */
.block-editor-page #wpbody {
  filter: unset;
}
/* Gutenberg topbar */
.block-editor-page .interface-interface-skeleton__header {
  filter: invert(0.85) hue-rotate(185deg);
}
.block-editor-page .is-primary {
  color: black !important;
}

/* Gutenberg sidebars */
.block-editor-page .interface-interface-skeleton__sidebar,
.block-editor-page .interface-interface-skeleton__secondary-sidebar {
  filter: invert(0.85) hue-rotate(185deg);
}

/* Gutenberg Content - Manual colors */
.block-editor-page .editor-styles-wrapper {
  color: lightgray;
  background: #262626;
}

/* Gutenberg Links */
.block-editor-page .editor-styles-wrapper a {
  filter: invert(0.85) hue-rotate(185deg);
}

/* Gutenberg Metaboxes - Bellow content */
.block-editor-page .edit-post-layout__metaboxes {
  border-top: 0px;
  background-color: #262626;
}

</style>';

}
add_action('admin_head', 'adminStylesCss');

?>
Click to Copy