Do you want to add mix blend mode to your Elementor dark mode toggle? The mix blend mode applies CSS background blending to create a distinct color transformation when dark mode is activated, without replacing every individual element color manually.
The Dark Mode widget in The Plus Addons for Elementor includes a built-in Mix Blend option that lets you apply a CSS blend mode across the entire page with a single setting change.
Best Used For:
- Design-focused websites where dark mode should produce a stylized inversion effect rather than a standard color swap
- Portfolio or creative agency sites where the mix blend transformation reinforces the site’s visual identity
- Blogs or editorial sites where a warmer or cooler blend mode creates a more readable low-light experience
To check the complete feature overview documentation of The Plus Addons for Elementor Dark Mode widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor. Make sure it is installed and activated.
To do this, add the Dark Mode widget to the template and follow the steps –
Note: To create the template, you can use the free Nexter Builder or you can use Elementor Pro if you are already using it.
1. From the Type dropdown under the Layout tab, select Mix Blend. This switches the dark mode from a simple color swap to a CSS blend mode transformation applied over the entire page.
From the Style section, select a style for the dark mode swatch. This controls how the toggle button or icon appears on the page.
From the Background Color section, add a background color to apply to the page. This color interacts with the selected blend mode to determine the final visual result.
2. From the Mix Blend Mode dropdown, select the blend mode to use when dark mode is active. Different blend modes produce different effects: Multiply darkens the page, Difference inverts colors, and Hue shifts the color tones while preserving lightness.
Note: The blend mode effect will change if you have set a background color from the Background Color section.
Note: Make sure to exclude images from dark mode while using the mix blend mode, because images can have adverse visual effects.
When you toggle the dark mode switcher, the page will display a unique color scheme based on the selected mix blend mode and the page elements. For another interactive visual effect that responds to user actions, see how to add image reveal animation on scroll in Elementor.
Suggested Read: How to Exclude Elements from Dark Mode in Elementor
