Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Content Carousel - Featured Blog
Stacked Images - Featured Blog
ACF Repeater Field - Featured Blog

Dark Mode for Elementor

The Dark Mode widget for Elementor widget by Unlimited Elements offers a seamless way to let users toggle between light and dark themes on your website. Designed to enhance user experience, it not only reduces eye strain but also adds a contemporary, stylish touch to your site’s design. Whether you’re prioritizing functionality, aesthetics, or user comfort, this widget makes it simple to deliver a modern browsing experience that visitors will love.

Let’s look at each of the options in the Dark Mode widget for Elementor below.

Add a Dark Mode Widget to Elementor

This widget requires Unlimited Elements Free version installed and activated on your WordPress website.

  1. Go to Unlimited Elements Widget Library
  2. Search in the search bar for “Dark Mode”
  3. Hover over the widget in the search results and click install
  4. Add the “Dark Mode” widget to any Elementor Page

General Settings

1

Animation Speed

Set the animation speed.

2

Button Horizontal Position

Set the horizontal positioning of button.

3

Button Vertical Position

Set the vertical positioning of button.

4

Button Vertical Offset

Set the vertical offset of button.

5

Button Horizontal Offset

Set the horizontal offset of button.

6

Button Icon

Choose an icon to display in button.

7

Dark Mode Mix Color

Choose a color to display the dark mode mix color.

8

Dark Mode Background Color

Choose the background color for dark mode.

9

Save in Cookies

It will save the dark mode state in cookies.

10

Auto Match OS Theme

By turning this on widget will automatically match the OS theme.

11

Do Not Affect Images

Turn this on to prevent image from inverting.

12

Do Not Affect SVG

Turn this on to prevent SVG from inverting.

Dark Mode Widget Styling

You have full control over the widget’s design, including colors,  icons, and layout, ensuring it aligns with your website’s aesthetic and functions as you envision.

Button Styling

Set the button size, color, radius, border, and box shadow.

Button Icon Styling

Style the icon size, color and color hover for active and hover state.

Dark Mode Design Examples For Elementor

Here are some live use cases for the Dark Mode Widget.

Dark Mode on testimonial box.

Dark mode on step process.

We hope this guide has provided you with everything you need to make the most of the Dark Mode Widget for Elementor. With its ability to enhance user comfort and bring a modern edge to your website, this widget is a valuable addition to any design.

If you have further questions or need additional guidance, don’t hesitate to reach out to our support team.

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!