Divi Dark Mode

Divi Dark Mode extension for Divi Builder brings an elegant, user-friendly way to offer a dark theme option on your Divi websites, enhancing readability, reducing eye strain, and improving visual comfort in low-light conditions. This extension allows users to seamlessly switch between light and dark modes, creating a more immersive browsing experience that caters to their lighting environment and personal preferences.

Dark Mode

Go to your WordPress Dashboard, select Divi Torque, then choose Dark Mode from the menu. On the right, you’ll see a tabbed interface. In the General tab, activate the Enable Dark Mode toggle.

General

This tab has the fundamental settings and options for the Dark mode.

General Settings

• Enable Dark Mode – Activates the dark theme on your website, giving users the option to switch to the dark theme.

Dark Mode Type

Select the mode of dark theme implementation using radio buttons.

1. Light – Keeps the website in a light theme.
2. Dark – Forces the website to display in dark mode.
3. System Aware – Automatically matches the website’s theme with the user’s system preferences.

Appearance

The Appearance main tab in the Dark Mode extension provides comprehensive customization for your website’s dark theme. It allows you to personalize both the overall theme appearance and the toggle switch settings. 

Appearance – Theme Settings tab

Controls the main appearance of dark mode, such as background and text colors.

Theme Color

Allows you to define the overall color scheme for Dark Mode

1. Auto – This option enables the system to automatically adjust the color scheme for Dark Mode. But you can customize the Brightness and other settings. 
2. Presets – This option offers a selection of predefined dark theme color schemes, allowing users to choose a consistent color palette for their website without the need for manual adjustments.

Appearance – Switch Settings tab

Manages the dark mode toggle switch options, including its placement, style, and visibility.

Switch Settings

Configure the dark mode switch for your website.

• Enable Floating Switch – Enable a floating dark mode switch on the frontend to toggle between dark and light modes.

Switch Style

This option allows you to choose the appearance of the dark mode toggle on your website. It enhances the user experience by providing different visual styles for the switch, enabling users to select their preferred look.

1. Filled – This radio button option creates a solid, filled design for the switch, offering a vibrant and bold appearance that catches the user’s attention.
2. Stroke – This option features an outlined switch with a transparent center, providing a clean and minimalist aesthetic that blends seamlessly with various designs.
3. Circle – Selecting this option will display the switch in a circular shape, giving it a softer and more modern look that enhances the overall user interface.
4. Eye – This radio button allows for a unique eye-shaped switch, which symbolizes visibility or light/dark mode, adding an engaging visual element to the design.

Switch Position

This option allows you to determine the placement of the dark mode toggle on your website, enhancing accessibility and user convenience by offering flexibility in positioning.

1. Left – Selecting this radio button positions the switch on the left side of the screen, making it easily accessible for users who prefer that layout and maintaining a consistent design flow.
2. Right – This option places the switch on the right side, providing a more conventional location that aligns with user expectations and allows for quick access to toggle dark mode on and off.

Switch Size

This setting allows you to choose the size of the dark mode toggle switch, ensuring it fits seamlessly within your website’s design and meets user preferences for visibility and ease of use.

1. Small – Selecting this option results in a compact toggle switch, ideal for minimalist designs or when space is limited, while still providing functionality.
2. Medium – This size offers a balanced option, making the switch noticeable without overwhelming other elements on the page, suitable for most layouts.
3. Large – Choosing this size makes the toggle switch more prominent, enhancing visibility and accessibility for users who may have difficulty interacting with smaller buttons.
4. X-Large – This option creates an even larger toggle switch, perfect for designs that prioritize accessibility or for users who prefer larger interface elements for easier interaction.

Visibility

This setting allows you to control where the dark mode toggle switch appears on your website by selecting the devices on which it will be visible, providing flexibility in design and user experience.

1. Mobile – When checked, the toggle will be displayed on mobile devices, ensuring that users on smartphones can easily access the dark mode feature.
2. Tablet – By selecting this checkbox, the dark mode toggle will be visible on tablet devices, accommodating users who prefer browsing on larger screens.
3. Desktop – Checking this option ensures that the toggle is shown on desktop versions of your site, allowing users who browse on computers to easily switch between light and dark modes

Advanced

This is one of the main tabs of the Dark Mode extension. Currently, it has only one setting: Enable Keyboard Shortcut, which allows users to quickly toggle dark mode on and off using a keyboard shortcut, enhancing user experience and accessibility. Future options and settings will be included in this tab to expand the functionality of the Dark Mode feature.

• Enable Keyboard Shortcut – Activates a convenient keyboard shortcut for toggling dark mode. To see the keyboard shortcut instructions, refer to the Advanced Settings tab.