DCDev
Active member
- Apr 14, 2021
- 108
- 101
- 43
Hello everyone.
A nice little PHP script that turns WordPress's Admin in to Dark Mode. Sometimes its easier to remove the garish white background, or you just want to rest those tired eyes late at night when developing etc.
BEST used with Advanced Script by Clean Plugin, or any other script editing plugin.
Make sure you have the following...
Type: PHP
Location: Admin area
Hooks: plugins_loaded or init
Priority: 10
Conditions: (Set these if you want it to run at a specific time)
A nice little PHP script that turns WordPress's Admin in to Dark Mode. Sometimes its easier to remove the garish white background, or you just want to rest those tired eyes late at night when developing etc.
BEST used with Advanced Script by Clean Plugin, or any other script editing plugin.
Make sure you have the following...
Type: PHP
Location: Admin area
Hooks: plugins_loaded or init
Priority: 10
Conditions: (Set these if you want it to run at a specific time)
<?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');
?>
