In this guide, we will show you how to add a “Dark Mode widget” to your Elementor website. The Dark Mode widget allows your visitors to seamlessly switch between light and dark themes, enhancing user experience with a modern, stylish feel. Perfect for reducing eye strain and providing a more comfortable viewing option in low-light conditions, this free widget makes your website more accessible and user-friendly. With simple toggle controls and smooth transitions, the Dark Mode widget ensures your Elementor design stays on trend and responsive to user preferences.
Let’s explore the customization options available in the “Dark Mode widget” for Elementor below.
Elementor Dark Mode Tutorial Video
Add a Free Dark Mode to Elementor
Add a Free Dark Mode Widget to an Elementor Page
Elementor Dark Mode Widget General Settings
Animation Speed (s)
Set the transition speed for dark mode.
Button Horizontal Position
Choose the horizontal placement of the toggle button.
Button Vertical Position
Choose the vertical placement of the toggle button.
Button Vertical Offset (px)
Adjust the button’s vertical distance.
Button Horizontal Offset (px)
Adjust the button’s horizontal distance.
Button Icon
Select an icon for the dark mode toggle.
Dark Mode Mix Color
Choose a color to mix with elements in dark mode.
Dark Mode Background Color
Set the main background color for dark mode.
Save in Cookies
Toggle to remember the user’s dark mode preference.
Do Not Affect Images
Toggle to prevent image inversion in dark mode.
Do Not Affect SVG
Toggle to prevent SVG inversion in dark mode.
Elementor Dark Mode Widget Style Settings
Button Size
Set the overall button size.
Button Color Dark
Choose the button color for dark mode.
Button Color Light
Choose the button color for light mode.
Border Radius
Set corner roundness (use the chain icon to link/unlink values).
Inactive / Active Tabs
Configure settings for light mode (Inactive) and dark mode (Active).
Border Type
Choose a border style for each state.
Border Width
Set border thickness for each state.
Border Color
Select the border color for each state.
Border Hover Type
Choose a border style for the hover state.
Box Shadow
Click the pencil icon to configure the normal state shadow.
Box Shadow Hover
Click the pencil icon to configure the hover state shadow.
Icon Size
Set the icon size.
Icon Color
Choose the icon color in its normal state.
Icon Color Hover
Choose the icon color on hover.
Active Tab
Click to configure icon colors for dark mode.
Icon Color Active
Set the icon color when dark mode is active.
Icon Color Hover Active
Set the icon color on hover while dark mode is active.
Dark Mode Widget Design Examples For Elementor
Here are some live use cases for the Dark Mode widget.
Step Process as an Instructive Dark Mode widget.
Testimonial Box with Floating Dark Mode widget.
Thank you for using the Dark Mode widget for Elementor! This free widget lets users easily switch between light and dark themes, enhancing your site’s look and reducing eye strain. With customizable toggle styles and transitions, it helps create a modern, user-friendly experience. For help or live demos, feel free to contact us or visit our website.