Switching theme from dark to light does not change UI

[andybalaam]

Steps to reproduce

0. Use Chromium browser
1. Go to Settings -> Appearance
2. Click "Dark" to choose the dark theme. Note that the screen changes colour.
3. Click "Light". The button is selected, but the screen does not change.

4. Note: if you refresh the browser, the light theme is displayed.

Outcome

What did you expect?

I expected the screen to change back to light theme.

What happened instead?

The screen did not change.

Operating system

Ubuntu 21.10

Browser information

Chromium Version 95.0.4638.54 (Official Build) snap (64-bit)

URL for webapp

develop.element.io

Application version

Latest, but also confirmed in January 2021 version.

Homeserver

matrix.org

Will you send logs?

Yes

[SimonBrandner]

I cannot repro, I think this might be caused by the dev environment, can you repro on develop or app?

[t3chguy]

If you have hot reload enabled on a dev environment then this is a known issue.

https://github.com/vector-im/element-web/blob/75b1d813f1323ecb017f36dcb1e945655d86d9a2/.env.example#L14 and #18484

[andybalaam]

I was in a dev environment with hot-reload, and today I can't reproduce it even there :-(

[dbkr]

I can reliably reproduce this on develop (ie. not a dev env, no hot reload) in chrome canary (96) but only if it's using the light theme when it first loads.

Load with light theme, change to dark, change to light: remains on dark theme (hover text thinks it's in light though). Reload & it's in light again.
Load with light theme, change to dark, refresh, change to light: light theme
Load with dark theme, change to light, change to dark: dark theme

Same whether you do it from the settings modal or the lightswitch button.

Confused element illustrated below: