Initial switch to dark mode doesn't trigger theme change

[Dave Shoreman]

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

 toggleDarkMode() { 
     this.currentTheme = 'light' === this.currentTheme ? 'dark' : 'light'; 
  
     localStorage.setItem('theme', this.currentTheme); 

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).