[Bug]: Changing Theme Switch is broken

[JonathanWoollett-Light]

Before submitting...

• I have searched for duplicate or closed issues.
• I have read the CONTRIBUTING document and my issue is following the guidelines.
• I have read the template completely before filling it in.

Context

I recently attempted to add a theme switch to my webpage (JonathanWoollett-Light/cv@1e93235). I copied the code from https://materializeweb.com/themes.html and the element from the page.

It functions like the theme switch on https://materializeweb.com/themes.html except that the page theme doesn't change.

Current Behavior

The icon changes and the correct case occurs but the theme isn't changed.

Expected behavior

The page theme should be flipped between light and dark.

Possible Solutions or Causes

No response

Steps to reproduce

Open https://github.com/JonathanWoollett-Light/cv/blob/1e9323509877f1644fdba3fa83cc6bc0bf39282d/index.html in a webbrowser and click the theme switch icon.

It looks like:

Your Environment

• Version used: 2.1.0
• Browser Name and version: chrome
• Operating System and version (desktop or mobile): ubuntu
• Additional information you want to tell us:

[OlivierMadant]

Hello Jonathan,

If I try to run in the console from your website (https://jonathanwoollett-light.github.io/cv/) document.documentElement.setAttribute('theme', 'dark');
then the theme is switching in dark mode.

If I run document.documentElement.removeAttribute('theme'); then the theme is switching back in light mode.

So the theme change seems to work properly...

I hope this comment helps you.

Olivier

[JonathanWoollett-Light]

It seems to not work when my device theme is darkmode but does work when in lightmode.

I think the example assumes the device theme is lightmode so that when document.documentElement.removeAttribute('theme'); is run it switches to darkmode.

But when the device theme is darkmode when you run document.documentElement.removeAttribute('theme'); the site will remain dark.

A fix would be changing document.documentElement.removeAttribute('theme'); to document.documentElement.setAttribute('theme','light');, possibly in the future it could be extended with a 3rd state that passthroughs the theme.

[gselderslaghs]

This is caused by the prefers-color-scheme media query, which follows your system preferences switching between light and dark theme based on system preferences and should work out of the box

However, the documentation lacks the information that a forced switch to light theme, eg. an interaction with a theme switch button should require setting the theme parameter to light instead of removing it, since your system preferences default would override the default theme option with the prefers-color-scheme media query

Needs refinement on the documentation