March 11, 2024

Create a WordPress Dark Mode Admin Area with a Simple Code Snippet

Play Video

The visual appeal of your website’s admin area is just as important as its functionality. With the increasing popularity of dark mode for its eye comfort and energy-saving benefits, implementing a dark theme in your WordPress dashboard has become a sought-after feature. This tutorial will guide you through creating a WordPress Dark Mode Admin Area using a simple code snippet with FluentSnippets, transforming your dashboard into a sleek, dark-themed interface.


Please make sure you have the following installed and activated:

Why Turn Your Admin Area Dark?

Dark mode not only reduces eye strain in low-light conditions but also enhances the readability of text by providing a high contrast ratio. This can be particularly beneficial for those who spend extended periods managing their WordPress site. By customizing your admin area with a dark mode, you’re taking a step towards a more comfortable and visually appealing backend environment. Additionally, understanding the basics of CSS (Cascading Style Sheets) and how PHP functions integrate with WordPress can be invaluable in customizing and enhancing your site’s backend further.

Instructions for a WordPress Dark Mode Admin Area

  1. Install and activate FluentSnippets from the WordPress plugin repository.
  2. Navigate to FluentSnippets > New snippet, give it a title, and copy the PHP code snippet provided below into the FluentSnippets editor:
    function applyCustomStyles() {
        echo '
        /* 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 {
    add_action('admin_head', 'applyCustomStyles');

    Source: WPTuts
    Copy the PHP code snippet provided below into the FluentSnippets editor

  3. Customize the CSS within this snippet to suit your preferences.

    Note: The provided example includes basic styling for background and text colors. Feel free to modify the colors, hover states, and other properties.

  4. Save the snippet and set it to run in the admin area only. FluentSnippets allows you to specify where your code should be executed to ensure the dark mode only affects the dashboard and not the public-facing site.
    Save the snippet and set it to run in the admin area only
  5. Test your new dark mode by navigating through various sections of the WordPress admin area. Adjust the CSS as needed to achieve your desired look and feel.

Official Documentation

WordPress Dark Mode Admin Area – Conclusion

By following this tutorial, you’ve taken a significant step towards customizing your WordPress dashboard with a dark mode, providing a modern and eye-friendly interface for your admin area. Remember, this is just a starting point. Feel free to expand upon the basic snippet provided to tailor the dark mode to your specific needs and preferences. Experimenting with different styles and settings can lead to a uniquely personalized backend experience that enhances your productivity and enjoyment while managing your site.

Required Resources

Credit to WPTuts
WPTuts is a popular YouTube channel dedicated to providing high-quality, easy-to-follow tutorials for WordPress enthusiasts, web designers, and developers. The channel features a wide range of topics, from beginner guides on setting up your first WordPress site to advanced tutorials on customizing themes and plugins, ensuring that there's something for everyone
Create a WordPress Dark Mode Admin Area with a Simple Code Snippet
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.