The “Dark Mode Widget” is a dynamic tool that can transform your website into a stylish, all-black theme that too with just a click. You can enhance your website with a sleek dark mode toggle and offer visitors an enjoyable browsing experience! With our easy-to-use Dark Mode Widget, creating a dark mode toggle has never been simpler. It’s as simple as clicking a button. Fast, easy, and visually stunning, this widget gives your site an impressive dark-mode look in no time.
Let’s look at each of the options in the “Dark Mode Widget” below.
Install Dark Mode Widget for Elementor
This widget requires Unlimited Elements PRO 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 your “Dark Mode” widget to any Elementor Page
General Settings
Animation Speed
Set the animation speed in seconds.
Button Horizontal Position
Select the horizontal position of button.
- Left
- Right
Button Vertical Position
Select the vertical position of button.
- Top
- Bottom
Button Vertical Offset
Set the vertical offset of button in pixels.
Button Horizontal Offset
Set the horizontal offset of button in pixels.
Button Icon
Choose an icon to display as button.
Dark Mode Mix Color
Choose a color to display the dark mode mix color.
Dark Mode Background Color
Choose a color to display the dark mode background color.
Save in Cookies
It will save the dark mode state in cookies.
Auto Match OS Theme
By turning on, widget will automatically match the mode with OS theme.
Do not affect images
Turn this option on to prevent images from inverting.
Dark Mode Widget Button Styling
Set the button size, color, border radius, border, and box shadow of button.
Button Icon Styling
You can set the icon size, color, color hover, and active color.
Usage Examples
Here are some live use cases for the Dark Mode Widget.
