A new block: Dark Mode Toggle

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 / View the code on Github

The block was initially designed as a dynamic block, similar to my recent 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, 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.

Also interesting, I used a CSS variable for calculating the size of elements 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, or have suggestions to make it better. A win either way.

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

Download on WordPress.org

Responses

  1. Nathan Wrigley Avatar
    Nathan Wrigley

    I was talking about this exact toggle the other day, and it got me wondering if it needs to slide from side to side, or is it better to save a ‘tiny’ bit of space and just have it as a round toggle? Seems like a side to side toggle is where the industry is setling though?

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      I think either could work. A toggle as I did here is more standard, but it could be done otherwise just as well.

      Reply
  2. Nahuai Badiola Avatar
    Nahuai Badiola

    Thanks for sharing Rich.

    Do you think it could make sense to link the toggle to a theme style variation?
    I understand that for a plugin could be tricky since there is no name convention (something like dark-mode.json) but it would be great to have some standarization around it.

    Does that make sense to you?

    Thanks!

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      Yes, that’s an interesting idea.

      In my upcoming theme I did make it so that if you created colors in Global Styles with the same slug (theme-1-dark, theme-2-dark) etc, they’d override the theme’s dark colors—so you wouldn’t need to do anything further.

      Reply
      1. Nahuai Badiola Avatar
        Nahuai Badiola

        Cool, that’s an elegant way to integrate it with your theme. Any chance you may add a field/setting to add other names? For existing themes that use dark.json or others…

        Also, did you considered using the interactivity API? I think it would be a great example for it. P.D: Looking forward to see your new theme.

  3. Thijs Avatar
    Thijs

    Hi Rich,

    I’ve downloaded the block, but it doesn’t work on my site. I like the simplicity of this block.
    Are you open for support-questions? Where can I aks you those questions?

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      Hey there, sure you can ask here. 🙂

      The quick answer is that you still need some CSS to define what the dark styles are. The block adds a `theme-dark` class, which you can target any of your block theme’s colors with.

      Reply
      1. yepe Avatar
        yepe

        Can you tell me how to add the dark-theme? i am a layman with wordpress and i just used this plugin.

      2. Rich Tabor Avatar
        Rich Tabor

        Hey friend, I updated the readme with specific details.

  4. SARRAZY Avatar
    SARRAZY

    Hi Rich, is it possible to use your system with Elementor? Or just with Gutenberg?

    Thanks!

    Damien (to France)

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      Just with the block editor (Gutenberg).

      Reply
  5. Ray Avatar
    Ray

    Hello, it would be great if there were few more instructions to use it on an existing site, for instance using the Twenty Twenty-Four theme. I’m new to WordPress and and a bit lost where to put the CSS.

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      Hey Ray. I’ve updated the plugin readme with a bit more details. You could plug your CSS into the Site Editor > Styles > Additional CSS field (screenshot), or if you add the colors in the Site Editor like I’ve detailed, they should just hook in.

      Reply
  6. Paul Avatar
    Paul

    Hello there – I really enjoy the idea to KISS (Keep It Simple Stupid). I also enjoy last week when I play a lite bit with Block Theme Color Switcher It handles all theme json variations.

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      I tested it with my latest theme and couldn’t get it to work; not quite sure why.

      Reply
  7. Zohar Avatar
    Zohar

    This is great. Love the simplicity and ease. Made a variation of the css for Twenty Twenty Four and it works great (see below).

    Would be great to see the button being accessible, at the moment tabbing skips it, and no option to toggle with keyboard.
    I know this would be adding complexity, but would be great to also follow the system setting.

    .theme-dark body {
    --wp--preset--color--base: var(--wp--preset--color--custom-base-dark);
    --wp--preset--color--base-2: var(--wp--preset--color--custom-base-2-dark);
    --wp--preset--color--contrast: var(--wp--preset--color--custom-contrast-dark);
    --wp--preset--color--contrast-2: var(--wp--preset--color--custom-contrast-2-dark);
    --wp--preset--color--contrast-3: var(--wp--preset--color--custom-contrast-3-dark);
    --wp--preset--color--accent-2: var(--wp--preset--color--custom-accent-2-dark);
    --wp--preset--color--accent-3: var(--wp--preset--color--custom-accent-3-dark);
    --wp--preset--color--accent-4: var(--wp--preset--color--custom-accent-4-dark);
    --wp--preset--color--accent-5: var(--wp--preset--color--custom-accent-5-dark);
    }

    Reply
    1. Rich Tabor Avatar
      Rich Tabor

      Thanks! I just pushed up changes that improve the accessibility experience. I thought about pre-setting based on system but it did introduce a bit of complexity. Perhaps it’s worth exploring again.

      Reply
      1. Jer Clarke Avatar
        Jer Clarke

        Update: I figured out some CSS tricks to have this block with alongside the user preference, so you get the user preference by default, and the switch always inverts it:

        https://github.com/richtabor/dark-mode-toggle-block/issues/17

      2. Rich Tabor Avatar
        Rich Tabor

        Interesting. I’ll take a look. I don’t love the icon being “wrong” in a sense, but I think this is solvable in an elegant way.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also enjoy…