---
title: "Dark Mode"
url: "https://divitorque.com/docs/dark-mode.md"
canonical: "https://divitorque.com/docs/dark-mode/"
published: "2024-11-11"
modified: "2026-01-15"
author: "Fahim Reza"
description: "Give every visitor a one-click dark mode across your Divi site. Learn how to add and configure the Dark Mode extension in Divi — settings, options, and tips."
tags:
  - "Extensions"
---

# 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.