Initial switch to dark mode doesn't trigger theme change
dshoreman opened this issue · comments
Summary
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.
Problem
The lack of a theme
key only seems to be an issue because of this comparison in the darkmode
plugin:
servidor/resources/js/plugins/darkmode/index.js
Lines 15 to 18 in 37e18d4
When no theme
key is defined, the value of this.currentTheme
will be null
, causing it to fall back to 'light'
.
Solution
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 ['dark', 'light'].includes(this.currentTheme)
.