In this tutorial, you’ll learn how to transform your WordPress dashboard into a modern dark mode interface using a free PHP code snippet.

Dark mode isn’t just about looks—it can help reduce eye strain and make long admin sessions more comfortable. This step-by-step guide walks you through adding dark mode to the WordPress admin area, customizing colours, and fine-tuning the appearance to match your preferences.

Step-by-Step Overview

1. Install a code snippet plugin such as Codes Snippets (free) or a similar alternative.

2. Add the below PHP snippet in Code Snippet to create a custom function for the WordPress admin area and activate it.

function applyCustomStyles() {
echo ‘
<style>

/* Change link colour to white */
#wpbody-content a {
filter: invert(1) hue-rotate(180deg) saturate(10);
color: white !important;
}

/* Change link colour to yellow */
#wpbody-content a:hover {
filter: invert(1) hue-rotate(180deg) saturate(10);
color: red !important;
}

/* Styling for primary content area. */
.block-editor-page .editor-styles-wrapper {
color: lightgray;
background: #262626;
}

/* Base styling adjustments. */
.wp-admin {
background-color: #262626;
}

/* Image display corrections. */
.wp-admin #wpbody img {
filter: invert(1) hue-rotate(-180deg);
background: white;
}

/* Enhancements for hyperlink visuals. */
.block-editor-page .editor-styles-wrapper a {
filter: invert(0.85) hue-rotate(185deg);
}

/* Filter reset for specific editor sections. */
.block-editor-page #wpbody {
filter: unset;
}

/* Adjustments for the main body appearance. */
.wp-admin #wpbody {
filter: invert(0.85) hue-rotate(185deg);
}

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

/* Configuration for top navigation bar. */
.block-editor-page .interface-interface-skeleton__header {
filter: invert(0.85) hue-rotate(185deg);
}

/* Primary action button styling. */
.block-editor-page .is-primary {
color: black !important;
}

/* Lower section layout adjustments. */
.block-editor-page .edit-post-layout__metaboxes {
border-top: 0px;
background-color: #262626;
}

/* Reset various button BG colours */
.wrap .add-new-h2, .wrap .add-new-h2:active, .wrap .page-title-action, .wrap .page-title-action:active {
background:#f6f7f700;
}

</style>’;
}
add_action(‘admin_head’, ‘applyCustomStyles’);

Key Notes

• The snippet only affects the WordPress admin dashboard—not your site’s front end.

• Dark mode is achieved using the CSS invert filter, with selective overrides for clarity.

• Every part of the CSS can be customized to match your personal style.

Final Thoughts

Have fun experimenting with your WordPress dashboard! If anything goes wrong, simply disable the snippet to instantly revert your changes.

If you like to get WordPress here are some links for you.

Buy WordPress 👉 https://automattic.pxf.io/Dy5G6d
Buy Jetpack – WordPress plugins security, performance, marketing tools.👉https://automattic.pxf.io/e1DX0O
Buy Pressable Incredible WordPress Hosting 👉https://automattic.pxf.io/6yvLNq
Buy WooCommerce Marketplace Themes Plugins 👉https://automattic.pxf.io/RGzq9N
Buy Akismet – Spam Protection for Websites 👉https://automattic.pxf.io/YROPaP
Buy Sensei – Create and sell online courses with the Sensei WordPress LMS plugin 👉https://automattic.pxf.io/3J2W1M
Buy WP Job Manager – Create Job Board Job Listing 👉https://automattic.pxf.io/dOxgdj

Affiliate Disclosure: We’re a reader-supported site committed to helping you find the best deals. To support our work, we may earn a small commission on purchases made through our links, at no additional cost to you.