The “Dark Mode Widget“ allows you to easily enable dark mode functionality for free in WordPress Elementor websites. This feature provides users with the option to switch between light and dark themes, offering a more comfortable viewing experience, especially in low-light environments. You can fully customize the toggle button design, colors, and animations to seamlessly match your site’s style.
Let’s look at each of the options in the “Dark Mode Widget“ widget for Elementor below.
Elementor Dark Mode Tutorial Video (Step by Step Guide)
Add Free Dark Mode 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 in Elementor Dark Mode
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.
Elementor Dark Mode 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 in Elementor Dark Mode
Set the button size, color, radius, border, and box shadow.
Button Icon Styling in Elementor Dark Mode
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.
Free Elementor Dark Mode on Testimonial Box.
Free Elementor Dark Mode on Step Process.
Thank you for using the Dark Mode Widget for Elementor! With its seamless activation and easy customization, this is the best Dark Mode Widget for Elementor, perfect for enhancing user experience by allowing visitors to switch between light and dark modes effortlessly. If you have any questions or need assistance, feel free to reach out. For more use cases and examples visit the live demo on our website.
