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

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.

Prerequisites

Please make sure you have the following installed and activated:

• FluentSnippets (Or similar code snippet plugins)

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:

   <?php
   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');

   Source: WPTuts
   

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.
   
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

• FluentSnippets 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.