search

element-hq / element-web

A glossy Matrix collaboration client for the web.
https://element.io
GNU Affero General Public License v3.0
11.15k stars 1.99k forks source link

Switching theme from dark to light does not change UI #19514

Open andybalaam opened 2 years ago

andybalaam commented 2 years ago

Steps to reproduce

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

theme-switch

  1. 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 commented 2 years ago

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

t3chguy commented 2 years ago

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 https://github.com/vector-im/element-web/issues/18484

andybalaam commented 2 years ago

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

dbkr commented 2 years ago

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:

Screenshot 2021-10-27 at 17 25 00
SocksPls commented 2 years ago

if I toggle high contrast on&off the theme toggles start working as expected

EECvision commented 2 years ago

Hi @SimonBrandner, I am an Outreachy applicant. I am interested in solving this issue. Please can you assign it to me? Thank you

SimonBrandner commented 2 years ago

Hi @SimonBrandner, I am an Outreachy applicant. I am interested in solving this issue. Please can you assign it to me? Thank you

I've assigned you to the issue. If you need any help/have any questions be sure to visit #element-dev:matrix.org!

EECvision commented 2 years ago

Awesome! I am currently working on it.