How to set a dark theme for the whole website?

[sterding]

I can only see dark setting for header / footer in the config.yaml, not the rest of the page. How can I set the dark model to TRUE by default? Thanks

[vincerubinetti]

As a temporary fix, in _scripts/dark-mode.js, change line 11 to:

  document.documentElement.dataset.dark = window.localStorage.getItem("dark-mode") ?? true;

I'll tweak this script in an upcoming update (#209) to allow setting a default more easily/cleanly, so look out for this change in the near future.

[sterding]

Sorry this seems not working, at least in the preview mode.

[vincerubinetti]

This is probably because you've toggled the dark mode in the footer. That will still save the user's preference, as it should. If you run localStorage.clear() in your browser dev tools, it will clear the preference, and refreshing should make it default black.

[sterding]

Thanks!! It works after I switch to a different browser.

[sterding]

Hi,

I noticed another bug after I change line 11 as you suggested above: It only works for the body part, not the footer/header.

In details, I have the following line in the ./_config.yaml.

header-dark: true
footer-dark: true

and the following line in _scripts/dark-mode.js.
document.documentElement.dataset.dark = window.localStorage.getItem("dark-mode") ?? true;

It looks all dark in the initial load, which seems great! However, when I click the toggle button at the footer, it only change the body part to white. The foot/header are still in dark. I expected the toggle button works for the whole page. Thanks

[vincerubinetti]

That is not a bug, that is expected and intended behavior and unrelated to the change here. If you want to change that behavior, you can remove your header/footer-dark: true and remove | is_nil: true from _includes/header.html and footer.

Dark mode isn't just an aesthetic thing, but an accessibility thing. When someone requests dark mode, everything should be dark. But there is still an option to force light even in dark mode, by setting dark to false (for header/footer and sections). If nothing is specified for header/footer dark, it defaults to dark to maintain contrast between the header/footer and main content. Removing the is_nil: true removes the default true, and makes it match whatever the mode is.