Skip to content

How to Add Dark Mode in WordPress?

Updated On : September 27, 2026By : Reading Time : 3 minutes

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.
Table of Contents

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

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

Steps

  1. Add the Dark Mode block where the switch should sit — often a header or a footer.
Nexter Blocks screen with the Dark Mode block turned on and outlined in the Blocks list
  1. Choose a style for the switch and set its icons.
Dark Mode block, Dark Mode panel in the Layout tab
  1. Switch Save Cookies on if the choice should survive a page load.
  1. Set Match OS Theme if the page should open dark for visitors whose system is set to dark.
  1. Choose the position — in the flow of the page, or fixed to a corner.
Dark Mode block, Switcher panel in the Style tab

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

Share your Thoughts

Still in Doubt? Let’s Assist You

Raise a ticket Now

Have Feedback or Questions?

Join our WordPress Community on Facebook!

Join Us

Related Frequently Asked Questions

What do I need before adding dark mode in WordPress with this block?

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.

Why does the dark mode switch not change the page colors?

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.

How do I keep dark mode on after a page reload?

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.

Can I make WordPress open in dark mode based on the visitor’s system theme?

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.

Where should I place a dark mode toggle on a WordPress site?

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.

Why do some images or sections stay light after switching to dark mode?

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.

Last reviewed: September 28, 2026

Related Docs

How to Add a Before and After Opacity Slider in WordPress?
icon
How to Add a Blend Cursor in WordPress?
icon
How to Add a Blockquote in WordPress?
icon
How to Add a Button in a WordPress Message Box?
icon
How to Add a Button in WordPress Timeline?
icon
How to Add a Call to Action Banner in WordPress?
icon
123………………………………………………………………53