Add Dark Mode Option for Flatsome Theme Tutorial

In this tutorial, we’re going to walk through how to install and customize the WP Dark Mode plugin for your WordPress website, with a focus on using it alongside the Flatsome theme. This plugin allows visitors to switch between light and dark mode, giving a modern and accessible touch to your website. Plus, I’ll share a 30% discount code so you can grab the premium or ultimate version for extra features and customization options.

Introduction to WP Dark Mode

The WP Dark Mode plugin is a user-friendly tool created by WP Pool. It allows you to add a dark mode switch to your website, similar to the dark mode feature on mobile devices and computers. This feature is essential for improving user experience and accessibility.

Steps to Install and Customize WP Dark Mode:

1. Install the Free Version of WP Dark Mode

• Go to your WordPress dashboard.
• Search for “WP Dark Mode” in the plugin section.
• Install and activate the plugin from WP Pool.

2. Activate the Free Version and Test It

• Once activated, you’ll see a switcher in the lower corner of your website.
• Click the switch to toggle between light and dark mode.
• The free version provides basic functionality, but to fully customize the switcher and integrate it with Flatsome, you’ll need the premium version.

3. Upgrade to the Premium or Ultimate Version

• To access the advanced features (like custom CSS and better styling), upgrade to the premium version. You can do this directly from the plugin’s dashboard.
• Use the discount code sebdeloweb30 for 30% off.

Coupon for 30% off: sebdelaweb30

4. Customize the Look of Dark Mode

• Navigate to the plugin settings, where you’ll find several customization options:
  • Color Settings: Adjust the background and text colors for your dark mode.
  • Custom CSS: Add custom CSS to ensure your dark mode works perfectly with your Flatsome theme. I’ve shared some useful snippets in my member area to help you tweak button outlines and section colors. 

div#content.content-area, .mfp-content {
	background: var(--wp-dark-mode-bg)!important;
}

.button.is-underline, .button.is-link {
    background-color: transparent !important;
    border-color: transparent !important;
}

• • Logo Settings: Make sure to upload a lighter version of your logo, so it shows properly when dark mode is activated.

5. Remove the Floating Switch and Add a Header Switch

• Many prefer the dark mode switch to appear in the navigation rather than floating at the bottom.
• Go to the Flatsome UX Builder, add an HTML element in your header, and paste the provided shortcode for the dark mode switch.

[wp_dark_mode_switch style="1"]

6. Explore Advanced Features

• The plugin offers time-based dark mode, auto-switching based on user device settings, and options to enable dark mode in the WordPress backend.

7. Test and Finalize Customizations

• Once you’ve set everything up, test your website in both light and dark modes.
• Make sure the switch works smoothly and that all elements display correctly in dark mode.

Tips and Extra Features:

• You can exclude certain elements from switching to dark mode by adding CSS classes to the exclude list.
• If you’re working with multiple websites, the premium version allows activation on up to 5 websites, making it a great deal.

Closing Thoughts

I’ve been using WP Dark Mode for my projects and find it a fantastic way to modernize websites. The support from WP Pool is top-notch, and with the 30% discount code (sebdeloweb30), it’s also affordable. Be sure to visit my member area for additional resources, like custom CSS snippets for Flatsome users.