Use system theme by default

[Palid]

Currently the web client doesn't use system theme by default upon first login, which, for dark theme users, can end up in a very unpleasant flash of white in their eyes.

[t3chguy]

The code says that should be on by default https://github.com/matrix-org/matrix-react-sdk/blob/06c9a060b427a988d225a65d710d9728eca00e87/src/settings/Settings.tsx#L503

[t3chguy]

Is this just a duplicate of #4895 ?

the OP is unclear on when/what this white flash is. Proper repro steps/screenshot/gif would be appreciated.

[Palid]

@t3chguy could be, did a quick search and didn't find in issues. Will provide reproduction steps shortly.

[ShadowJonathan]

I've also had such a "white flash", often when I preview netifly builds, I have to log into my own account, which has dark mode set always-on.

When the main interface is loading, it's set to default to white theme before loading in my preferences and switching to dark mode. I'm gonna guess this is related to what happens with the system-decided theme, where the main interface loads before the preferences kick in.

[Palid]

That's weird, I have 100% reproducability on dev env, but can't reproduce it on production. Sounds very much like some kind of a race condition, exactly like @ShadowJonathan described.

[ShadowJonathan]

I think it's safe to assume that this is a side-effect of using a developer environment, where it may need to load extra resources (maps and debug symbols) before it can properly execute. @Palid you said you didn't get this when using a production environment, can you confirm that? Then I think this issue can be considered solved, as the (minor) issue only pertains to dev environments.

[Palid]

I'll test that on RC on monday too. If that's only a problem for dev indeed then I think we can try figuring it out after hot reload for css gets merged in.

[SimonBrandner]

@Palid, what is the status on this?

[Palid]

I think it's more DX at this point, so it'd be nice to figure out but nothing super important.

[Palid]

@SimonBrandner basically to make this better we'd need to rewrite a chunk of how we load styles and change themes, which isn't really that hard, but requires figuring it out; from what I can say now is that we'd definitely prefer a way to add new css DOM elements on theme change instead of just enabling/disabling those, but it also requires tiny webpack changes.

[kittykat]

I'm closing this in favour of #4895 as it sounds like the same problem. Please reopen and update issue description if you feel that it isn't.