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.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Dark Mode”
- Hover over the widget in the search results and click install
- Add the “Dark Mode” widget to any Elementor Page
General Settings
Animation Speed
Set the animation speed.
Button Horizontal Position
Set the horizontal positioning of button.
Button Vertical Position
Set the vertical positioning of button.
Button Vertical Offset
Set the vertical offset of button.
Button Horizontal Offset
Set the horizontal offset of button.
Button Icon
Choose an icon to display in button.
Dark Mode Mix Color
Choose a color to display the dark mode mix color.
Dark Mode Background Color
Choose the background color for dark mode.
Save in Cookies
It will save the dark mode state in cookies.
Auto Match OS Theme
By turning this on widget will automatically match the OS theme.
Do Not Affect Images
Turn this on to prevent image from inverting.
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.