Add Dark Mode Option for Flatsome Theme Tutorial

Add a Dark Mode option to your Flatsome project with this amazing WP Dark Mode plugin and use the discount code.

By Sebastiaan Gamelkoorn
Flatsome Webdesigner

Add Dark Mode option to your Flatsome Theme" data-src="Add Dark Mode option to your Flatsome Theme">

Get the best design for your Flatsome shop from $49

95% of the Flatsome shops get more conversion + sales with our designs

See our designs

In the video I’ll show you how to integrate a Dark Mode option inside your WordPress Flatsome project. Working with the WP Dark Mode plugin it makes it super easy to integrate this without writing any line of code.

Discount code

Coupon for 30% off: sebdelaweb30

This free code is locked. 

Sign Up / Login

Switcher shortcode

Replace the number “1” to change the style.

[wp_dark_mode_switch style="1"]

Custom CSS

Flatsome section element fix for Dark Mode

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

Flatsome Button (outline) fix for Dark Mode

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

More popular tutorials

Discover more articles and tutorials to help you build better.

Customise your colors in Flatsome Theme
Customise your colors in Flatsome Theme
Add Dark Mode option to your Flatsome Theme
Add Dark Mode Option for Flatsome Theme Tutorial
Create a Custom Coming Soon Page in Flatsome Theme

Look better. Sell Better. With our designs.

Beautifully designed and easy customizable Flatsome demos for your WooCommerce shop. Invest in your online future.

#1 WooCommerce Designs