---
title: "How to Add Dark Mode in WordPress?"
url: https://nexterwp.com/docs/add-dark-mode-in-wordpress/
date: 2024-12-05
modified: 2026-09-27
lang: en
author: "Aditya Sharma"
description: "A dark mode switch is two separate jobs: something for the visitor to click, and a set of dark colours for the page to switch to. This block is the..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Dark-Mode-in-WordPress_-1024x519.jpg
word_count: 582
---

# How to Add Dark Mode in WordPress?

## Key Takeaways

- Dark Mode block añade un interruptor en Nexter Blocks, activa la clase tpgb-dark-active en el y puede recordar la elección con Save Cookies.
- Nexter Blocks muestra que el bloque es gratuito y funciona en Nexter Blocks (free) y con Nexter Blocks Pro, con Dark Mode activado bajo Nexter > Blocks en el panel de WordPress.
- El tema o CSS propio define los colores oscuros para body.tpgb-dark-active; sin esas reglas, el interruptor no oscurece la página y las imágenes o incrustaciones siguen sin adaptarse.

A dark mode switch is two separate jobs: something for the visitor to click, and a set of dark colours for the page to switch to.

This block is the first job. It adds the switch, flips a class on the page and can remember the choice — the colours come from your theme or your own CSS.

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-dark-mode-switcher/)

## Before You Start

- **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Dark Mode, switched on under **Nexter > Blocks** in your WordPress dashboard.- Dark colours defined for the `tpgb-dark-active` class — either from your theme or your own CSS. See below.

## Video Tutorial

https://www.youtube.com/watch?v=w55EMLSxEbk

## Steps

- Add the **Dark Mode** block where the switch should sit — often a header or a footer.

![Adding the Dark Mode block](https://nexterwp.com/wp-content/uploads/2024/12/Nexter-Blocks-Dark-Mode-Activation.webp)

- Choose a **style** for the switch and set its icons.

![Dark Mode block, Dark Mode panel in the Layout tab](https://nexterwp.com/wp-content/uploads/2026/09/rs-dark-mode-layout-dark-mode.webp)

- Switch **Save Cookies** on if the choice should survive a page load.

- Set **Match OS Theme** if the page should open dark for visitors whose system is set to dark.

- Choose the **position** — in the flow of the page, or fixed to a corner.

![Dark Mode block, Switcher panel in the Style tab](https://nexterwp.com/wp-content/uploads/2026/09/rs-dark-mode-style-switcher.webp)

## How It Behaves

The block renders a switch. Clicking it adds one class to the page; everything you see change after that is CSS responding to that class.

- **It adds `tpgb-dark-active` to the page's `<body>`** — measured by clicking the real switch on a published page. Clicking again removes it.- **The page's own colours do not change on their own.** Measured: the background was `rgb(255,255,255)` before the click and `rgb(255,255,255)` after it. The switch is the trigger; the dark colours have to exist in your CSS.- **Save Cookies decides whether the choice survives.** Measured: with it off nothing is stored and a reload returns the page to light; with it on the browser stores `tpgb_darkmode` and the page opens dark again after a reload.- **Fixed position moves the block out of your content.** Measured: the block's own script lifts it to the top of the page body, which is why it leaves no gap where you inserted it.- Measured with Nexter Blocks Pro deactivated: this block renders identically. It is a free block.

## Limitations

- **The block does not darken your site.** It flips a class — measured, nothing about the page's colours changed by itself. Your theme must style `body.tpgb-dark-active`, or you must write those rules.- **Without Save Cookies the choice is forgotten** on every page load — measured.- **Images and embeds do not adapt.** A white logo or a light screenshot will still be light; supply a dark variant if that matters.- One switch per page is enough — several would each toggle the same class.

## Troubleshooting

### I click the switch and nothing happens

Something almost certainly did happen: the class is added to the page body. Measured, the colours do not change unless CSS exists for `body.tpgb-dark-active`. Add those rules, or use a theme that ships them.

### The page goes back to light when I reload

Switch **Save Cookies** on. Measured: with it off nothing is stored; with it on the choice is remembered across reloads.

### The switch is not where I put it

Position is set to Fixed. Measured: the block is then moved to the top of the page body by its own script and pinned to the corner you chose.

### Some parts of the page stay light

Those parts have no dark rules. Work through the sections that matter under `body.tpgb-dark-active`.

## Related Docs

- [Add a pro paragraph in WordPress](https://nexterwp.com/docs/add-pro-paragraph-in-wordpress/)- [Add pro buttons in WordPress](https://nexterwp.com/docs/add-pro-buttons-in-wordpress/)- [Add an interactive circle in WordPress](https://nexterwp.com/docs/add-an-interactive-circle-in-wordpress/)- [Advanced tab settings](https://nexterwp.com/docs/use-advanced-tab-in-nexter-blocks/)

## Frequently Asked Questions

**Q: What do I need before adding dark mode in WordPress with this block?**
A: The switch is only half the job. Nexter Blocks provides the click target and flips the `tpgb-dark-active` class on the page, but your theme or custom CSS has to define the dark colors. The block is available in the free edition and also works with Nexter Blocks Pro. That matters because without matching CSS, the page can toggle state without visibly changing.

**Q: Why does the dark mode switch not change the page colors?**
A: The switch only adds `tpgb-dark-active` to the ``, so nothing will look different unless your CSS reacts to that class. The page content keeps its own colors until your theme or custom rules style `body.tpgb-dark-active`. That is why a click can register correctly while the page still looks light.

**Q: How do I keep dark mode on after a page reload?**
A: Save Cookies controls whether the visitor’s choice survives a reload. With it off, nothing is stored and the page returns to light on refresh. With it on, the browser stores `tpgb_darkmode` and opens dark again after reload. That makes it useful when you want the site to remember a user preference instead of resetting every time.

**Q: Can I make WordPress open in dark mode based on the visitor’s system theme?**
A: The block includes Match OS Theme for that case. When it is enabled, the page opens dark for visitors whose system is set to dark. That is a cleaner default than forcing everyone into one mode, because it follows the user’s device preference instead of making them switch manually.

**Q: Where should I place a dark mode toggle on a WordPress site?**
A: The tutorial says the switch often belongs in a header or footer, since those are places visitors expect persistent controls. Position can be in the normal flow of the page or fixed to a corner. If you choose Fixed, Nexter Blocks moves the block out of your content and pins it to the corner you selected.

**Q: Why do some images or sections stay light after switching to dark mode?**
A: Dark mode here is class-based, not automatic image rewriting. Images and embeds do not adapt on their own, so a white logo or light screenshot will stay light unless you provide a dark variant. The same idea applies to any section that has no rules under `body.tpgb-dark-active`, which is why partial darkness usually means missing CSS for those parts.