Bug with switching to light mode for the first time with dark mode preference

[wookie184]

When on a system with prefers-color-scheme as dark mode, switching to light mode for the first time requires two clicks.

The toggle colour scheme function:

peps/pep_sphinx_extensions/pep_theme/static/colour_scheme.js

Lines 19 to 27 in a4f0c14

	const toggleColourScheme = () => {
	if (localStorage.getItem("colour_scheme") === "dark") {
	makeLight()
	localStorage.setItem("colour_scheme", "light")
	} else {
	makeDark()
	localStorage.setItem("colour_scheme", "dark")
	}
	}

If the page starts in dark mode, localStorage would not contain a theme value, so the second block there is called, and localStorage is set to dark meaning it works on the next click.

I think changing it to this would fix the issue:

 const toggleColourScheme = () => { 
     const colourScheme = localStorage.getItem("colour_scheme")
     const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches

     if ((colourScheme === "dark") || (!colourScheme && prefersDark)) { 
         makeLight() 
         localStorage.setItem("colour_scheme", "light") 
     } else { 
         makeDark() 
         localStorage.setItem("colour_scheme", "dark") 
     } 
 } 

Would this be OK to PR?

[hugovk]

Good point, when I try this in incognito on Android and starting with prefers dark mode, the first click flashes light mode and then back to dark.

Yes, please send a PR. It will create a build preview for ease of testing.

[CAM-Gerlach]

Agreed as well; I vaguely recall this being brought up before some time ago after the dark theme was first implemented. Yes, please send a PR, unless you'd prefer one of us to take care of it. Thanks!