Initial switch to dark mode doesn't trigger theme change
dshoreman opened this issue · comments
Dark mode can be enabled by clicking the light bulb icon at the top-right of the sidebar but, the first time you try, it actually requires two clicks for it to have an effect. Although the light theme's styles are used by default, the
theme key isn't set in local storage until the first attempt to toggle dark mode... by which time it's too late.
To reproduce, delete the
theme key from Local Storage and reload the page.
The lack of a
theme key only seems to be an issue because of this comparison in the
theme key is defined, the value of
this.currentTheme will be
null, causing it to fall back to
At first glance the easy option would be something like this, but it only reverses the issue:
this.currentTheme = 'dark' === this.currentTheme ? 'light' : 'dark';
While it would correctly set dark mode when the theme is
null, any invalid values would incorrectly fall back to the dark theme which could cause further issues when loading the actual stylesheets for the current theme.
Instead of inverting the comparison, we need to set a default value with
localStorage.setItem('theme', 'light') at some point before the
toggleDarkMode() method is called. The
themed-page component is used everywhere, so that could be a good place to hook into a load/ready event and check if