Have to click twice to switch from light to dark mode when my browser theme is dark

[gabrc52]

Steps to reproduce

1. Set "default_theme": "light" in config.json
2. Set your device or browser's theme to dark (instructions are platform-dependent)
3. Log in with a brand new account
4. Click on your profile picture
5. Click on the change theme icon

Edit: This doesn't require a brand new account, just a brand new session.

Outcome

What did you expect?

Theme changes from light to dark

What happened instead?

Theme stays light, and the tooltip says "switch to light mode" when I am already in light mode. I have to click it another time to switch to dark theme and only then does it act as a "toggle theme" button.

See screen recording in next comment.

Operating system

Windows and Linux

Browser information

Firefox 116.0

URL for webapp

matrix.mit.edu (not public)

Application version

Element version: 1.11.39 Olm version: 3.2.14

Can reproduce on develop branch too

Homeserver

matrix-synapse-py3 1.90.0+jammy1

Will you send logs?

Yes

[gabrc52]

Screen recording of the issue:

Screencast.from.2023-08-18.22-52-43.webm

[gabrc52]

comment posted on wrong issue accidentally, sorry

[t3chguy]

@gabrc52 did you mean to post that on #26002 instead?

[gabrc52]

Yes, thank you.

[weeman1337]

@gabrc52 Unfortunately I cannot reproduce your issue. Please update your issue with more information. If we don’t hear back from you in a week, we will close the issue as we need to be able to reproduce it before we can fix it.

I've tried to reproduce with a new account and an existing one with the config setting "default_theme": "light". I did event copy your entire config.json to my environment and it still works. Do you just click on your avatar and then on the theme switcher, or do you do other things first?

[gabrc52]

Yes, I just click on my avatar and then on the theme switcher. I've noted that this bug only happens when the system or browser theme is dark (i.e. when window.matchMedia('(prefers-color-scheme: dark)').matches is true).

[weeman1337]

Yes, I just click on my avatar and then on the theme switcher. I've noted that this bug only happens when the system or browser theme is dark (i.e. when window.matchMedia('(prefers-color-scheme: dark)').matches is true).

Thank you, I was able to reproduce it with the extra information.