Dark theme blinks on refresh

[lex111]

🐛 Bug Report

When loading a page with dark mode turned on, a light theme is visible for a while before the previously selected dark theme is applied.

Have you read the Contributing Guidelines on issues?

Yes

To Reproduce

1. Select dark theme in navbar
2. Reload (F5 or Ctrl + R) any page

Expected behavior

A dark theme should be shown right away

Actual Behavior

For a second or so, a "regular" light theme is showed, and only then a dark theme:

[yangshun]

Yeah we're aware of this issue. It's because the theme is only applied after page load, that's why we see the flash. It's a little annoying but possible to fix - gatsbyjs.org doesn't have this issue.

[lex111]

A good example where there is no such issue - https://overreacted.io/ (yeah, powered by Gatsby).

[endiliey]

Try reading this https://github.com/donavon/use-dark-mode/blob/develop/README.md#that-flash

To fix this, we need a setbody hooks to inject script into html body. So that it wont wait till React load to actually enter dark mode