Skip to content
Get Pro

Dark Mode

The Dark Mode extension offers an elegant and user-friendly way to add a dark theme option to your Divi websites. It enhances readability, reduces eye strain, and improves visual comfort in low-light environments.

Dark Mode Setup

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

General Tab

This tab contains the basic settings and options for the Dark Mode feature.

General Settings

  • Enable Dark Mode – Activates the dark theme on your website, allowing users to switch to it.
  • Dark Mode Type – Select how the dark theme is applied:
    • Light – Keeps the website in light mode.
    • Dark – Forces the website to display in dark mode.
    • System Aware – Automatically adapts to the user’s system preferences.

Appearance Tab

The Appearance tab in the Dark Mode extension offers detailed customization for the dark theme, allowing you to personalize both the overall theme and toggle switch settings.

Theme Settings

  • Theme Color – Define the color scheme for Dark Mode.
    • Auto – Automatically adjusts the color scheme for Dark Mode, but allows customization of brightness and other settings.

Switch Settings

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

  • Enable Floating Switch – Adds a floating dark mode switch on the frontend to toggle between light and dark modes.
  • Switch Style – Choose the appearance of the dark mode toggle:
    • Filled – Solid, vibrant switch design.
    • Stroke – Outlined switch with a transparent center, for a minimalist look.
    • Circle – Circular switch for a modern, softer appearance.
    • Eye – Unique eye-shaped switch symbolizing visibility or mode change.
  • Switch Position – Choose the toggle switch placement:
    • Left – Position the switch on the left side of the screen.
    • Right – Position the switch on the right side.
  • Switch Size – Adjust the size of the toggle switch:
    • Small – Compact switch for minimalist designs.
    • Medium – Balanced size for most layouts.
    • Large – Larger, more prominent switch for better visibility.
    • X-Large – Very large switch, is ideal for accessibility.
  • Visibility – Control where the toggle switch appears across devices:
    • Mobile – Toggle displayed on mobile devices.
    • Tablet – Toggle displayed on tablet devices.
    • Desktop – Toggle displayed on desktop devices.

Advanced Tab

The Advanced tab includes additional settings for enhancing user experience and accessibility.

  • Enable Keyboard Shortcut – Allows users to toggle dark mode on and off using a keyboard shortcut. Check the Advanced Settings tab for instructions on the shortcut.