---
title: 'A new block: Dark Mode Toggle'
description: A new WordPress block adds a light and dark mode toggle, offering customizable styles and smart defaults for creative expression.
doc_version: current
last_updated: '2026-03-31T09:54:06.000Z'
date: '2024-05-07T06:00:00.000Z'
author: Rich Tabor
summary: A new WordPress block adds a light and dark mode toggle, offering customizable styles and smart defaults for creative expression.
tags:
  - Blocks
published: true
type: blog
url: /dark-mode-toggle-block
canonical: https://richtabor.com/dark-mode-toggle-block
id: 5270
---

I recently built a new WordPress block to add a toggle between light and dark modes on your website, like I have on my blog.

[Download on WordPress.org](https://wordpress.org/plugins/dark-mode-toggle-block/) / [View the code on Github](https://github.com/richtabor/dark-mode-toggle-block)

The block was initially designed as a [dynamic block](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/), similar to my recent [Cards block](/cards-block/), but I converted it to a static block to allow for better style support, so that the toggle can look differently across websites.

While dynamic blocks do support styles, like the [WordPress search block](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/search), it becomes quite a bit of a lift on the PHP front to account for _all_ style classes—if you’re not applying styles to a block’s parent element, like I needed to do.

I like it. It’s simple, but you can take it as far as you want with size, color, border styles—and four icon sets—like this here:

![A creative blue toggle with a orange border on a blue background.](https://i0.wp.com/rich.blog/wp-content/uploads/2024/05/CleanShot-2024-05-02-at-17.26.58.png?ssl=1&resize=856%2C558)

Also interesting, I used a CSS variable for [calculating the size of elements](https://github.com/richtabor/dark-mode-toggle-block/blob/main/src/style.scss#L1-L11) throughout the block, which made it super simple to have multiple sizes without many additional lines of CSS.

All in all, I’d say the Dark Mode Toggle block is a nice example of a block affording creative expression with smart defaults. Maybe you’ll learn something new by [checking out the code](https://github.com/richtabor/dark-mode-toggle-block), or have suggestions to make it better. A win either way.

I’m also planning on adding it to the [Block Directory](/publish-blocks/) as a block plugin. If you’re curious how that works, I have [a primer on adding blocks to the block directory](/publish-blocks/).

[Download on WordPress.org](https://wordpress.org/plugins/dark-mode-toggle-block/)

## Sitemap

[Full site index](/sitemap.md)