[gatsby-theme-minimal-blog]: The dark/light mode toggle is not working

[michaelkowalski]

Description

As in the title. Newly installed site 🥲 Only reloading the page is working. However here on the demo https://minimal-blog.lekoarts.de it works like a charm.

Steps to reproduce

Followed the readme:

npx gatsby new gatsby-starter-minimal-blog https://github.com/LekoArts/gatsby-starter-minimal-blog

Then whatever I do (simple yarn develop or publish to hosting) the toggle is just not working.

Expected result

Clicking on the toggle we should see dark and light mode after each press

Actual result

Nothing happens unless you reload the site

Environment

  System:
    OS: macOS 12.6
    CPU: (8) arm64 Apple M1 Pro
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 19.4.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 111.0.5563.146
    Safari: 15.6.1
  npmPackages:
    gatsby: ^5.5.0 => 5.8.1
    gatsby-plugin-feed: ^5.5.0 => 5.8.0
    gatsby-plugin-manifest: ^5.5.0 => 5.8.0
    gatsby-plugin-sitemap: ^6.5.0 => 6.8.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.30 => 1.1.30

[guvengorgun]

I'm having the same issue

[aloTu]

Me too

[LekoArts]

Hi!

It’s on my radar to fix this but can’t give an ETA for this. Last time I looked into it I didn’t find any obvious bugs that might cause it. If anyone finds the time to also look into this it would be much appreciated :)

[backendrulz]

a temporary solution is to edit onClick in colormode-toggle.tsx and add:

document.documentElement.classList.value = 'theme-ui-' + next;

after setColorMode(next);

Like this:

      <button
        onClick={() => {
          const next = isDark ? `light` : `dark`;
          setColorMode(next);

          document.documentElement.classList.value = 'theme-ui-' + next;
          ....

[aloTu]

I notice the "/404" page’s toggle is work. I found that this bug occurred because the style tag(<style data-emotion="css-global" data-s="">) was incorrectly rendered multiple times, which overwrote the current theme.

[LekoArts]

Doing a proper fix seemed like a rabbit hole so I shipped a simpler fix, thanks @backendrulz for the pointer.

You can update your versions and it should work :)