Dark mode icon is initially rendered as the moon in dark mode

[jerelmiller]

Description

When the page is loaded in dark mode, the dark mode toggle icon is rendered as the moon for a second, then switches to the sun. This only happens when refreshing the page.

The dark mode setting relies on a few properties to determine what state its in:

localStorage

It uses localStorage to save the user's preference so that when a user returns to the site, they can see the site in their style of choice

prefers-color-scheme: dark CSS media query

If there has been no saved preference, it uses a media query to determine which color scheme to show. A user can toggle their preferred color scheme in their OS's system settings.

Because Gatsby generates HTML ahead of time, it cannot know what a user's localStorage or preferred color scheme is, therefore when it is rendered, it has to be given a default value. Our default value is set to light mode, so the generated HTML is also set to render light mode. This means that on page refreshes, the icon is displayed as light mode the light mode icon (the moon icon), until hydration kicks in and switches it over to the dark mode icon (the sun).

Likely we will want to hide or fade in the icon until we know what the setting should be. This should help us avoid the flash of the wrong icon.

Steps to reproduce

1. Load the developer site. You'll see the wrong icon for a second before it corrects to the right one.

Expected behavior

I see the proper icon on the initial page load.

[jerelmiller]

This seems to be a common problem on sites I've looked at and not unique to us. I'm going to close this as something we don't plan to fix.