style: add dark theme color scheme

[qupig]

Partially fixes the issue mentioned in #7077.

Using vscode theme colors is proposed in #3019, that would be nice. But until it is implemented, it might still be helpful as a fallback for browser adaptation in the absence of user preferences.

The problem is that this PR only solves the color scheme of login page, error pages.
I haven't found out how to modify the vscode page, so the FOUC is still there.

It seems that vscode page needs to be modified in lib/vscode? I.e. is this also an upstream issue?

I tested https://vscode.dev and it seems to have the same FOUC issue.

• But it seems to only appear when opening first time or pressing Enter in the address bar.
• i.e. it doesn't seem to happen when refreshing the page. (But happens in this project)

Or should actually compare to Codespace(https://github.dev) , which actually has no FOUC issues, in my testing.

Login page (Light)	Login page (Dark)

Error page (Light)	Error page (Dark)

[code-asher]

Interesting about Codespaces, they must add something specially to Codespaces to avoid the FOUC, instead of adding it to the OSS repository for some reason.

This is really cool! I have not seen light-dark before. Should we have fallback colors in case the browser does not support light-dark? It seems fairly new. Like:

color: #444
color: light-dark(#444, #ccc)

[code-asher]

To expand a little on fixing it for VS Code, we serve an HTML file from VS Code so we have no control over it from the outside, so yeah it will have to be fixed in VS Code itself (or patched).

Well, I guess we could intercept it and modify it but it seems a bit janky to do it that way.

[qupig]

Should we have fallback colors in case the browser does not support light-dark? It seems fairly new.

https://caniuse.com/mdn-css_types_color_light-dark
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/light-dark

Yeah, I didn't think much about it since it has become the new baseline and is supported by all browsers.
But yes, adding fallback values ​​is always better for older systems and doesn't hurt anything.
Thanks for bringing this up.

To expand a little on fixing it for VS Code, we serve an HTML file from VS Code so we have no control over it from the outside, so yeah it will have to be fixed in VS Code itself (or patched).
Well, I guess we could intercept it and modify it but it seems a bit janky to do it that way.

Well, yes, I agree with you. I'm not familiar with those structures, so perhaps need more time to investigate.

So maybe another PR that should contains:

• Avoid FOUC when loading and refreshing vscode page
• When there is no vscode user preference theme setting, match a default theme based on the current browser prefers-color-scheme, perhaps written once to settings.json

I think having these will greatly improve the first experience for users prefer a dark theme.
At least to my eyes it is, I think it's almost a usability issue.

#3019 would be nice, but that's more of a icing on the cake.

[code-asher]

Agreed with your comments! Thanks again, this is great.