Currently, when using dark mode and loading the page the light background flashes briefly before dark mode is enabled. That’s because of the script switching on dark mode loads only at the end of the page. That doesn’t have to be if color theme is determined by an attribute on the <html> tag. Additional advantage here: no separate request to load dark mode CSS, it can be part of the main CSS file.
This pull request addresses a few more minor issues:
Dark mode toggle doesn’t have cursor: pointer style that it should have being essentially a button.
Selecting a different theme in the browser takes precedence over the previously remembered user choice, but only until the page reloads. That’s inconsistent, the setting in localStorage should be removed.
Changing theme in one tab should update all other tabs automatically rather than require a reload.
Ideally, user’s dark mode preferences should be respected even if JavaScript is disabled. However, without CSS processing (e.g. via Sass) this would become too messy – the CSS code is already messy as it is with :root[data-theme="dark"] spelled out multiple times.
Currently, when using dark mode and loading the page the light background flashes briefly before dark mode is enabled. That’s because of the script switching on dark mode loads only at the end of the page. That doesn’t have to be if color theme is determined by an attribute on the
<html>tag. Additional advantage here: no separate request to load dark mode CSS, it can be part of the main CSS file.This pull request addresses a few more minor issues:
cursor: pointerstyle that it should have being essentially a button.localStorageshould be removed.Ideally, user’s dark mode preferences should be respected even if JavaScript is disabled. However, without CSS processing (e.g. via Sass) this would become too messy – the CSS code is already messy as it is with
:root[data-theme="dark"]spelled out multiple times.