titleBar color setting is ignored in version v4.0.1 (PWA mode)

[akares]

After upgrade 3.12.0 -> 4.0.1 the titleBar.activeBackground theme setting doesn't work anymore.

It suppose to change the color of the window title in the PWA mode (see screenshots).

OS/Web Information

• Web Browser: Chrome
• Local OS: macOS 12.1
• Remote OS: Ubuntu 20.04.3 LTS
• Remote Architecture: x86_64
• code-server --version: 4.0.1

Steps to Reproduce

Working version:

1. Set up 3.12.0.
2. Install it in PWA mode (as separate app window).
3. Edit settings.json and customise workbench.colorCustomizations->[yourThemeName] -> titleBar.activeBackground value (CSS color). An example: https://gist.github.com/akares/846d368c9ebecfb7fdc51aaa4a91ec12
4. Notice window title background change.

Broken version:

5. Upgrade to 4.0.1
6. The theme tweak is ignored now.

Screenshot

Expected

UPD: Seems hex color values preview feature also failed in 4.0.1.

[jsjoeio]

I tested this and was able to reproduce the issue in code-server 4.0.1

I also tested on vscode.dev (installing the PWA) and could not reproduce (works as expected).

cc @code-asher was this ever broken in the past? Maybe we lost a change in the upgrade.

[code-asher]

Hmm I am not sure. We have our own PWA setup so maybe there is existing code that vscode.dev is using that we should switch to.

[LSeelig]

Same here on my chromebook. Fresh install on 3.12 (theme-color sets correctly), vs 4.0.1 (theme-color is unchanged)

I don't know a ton about web development, but I'm pretty sure theme-color is set dynamically. Even if it's set in the manifest, it can still change in the page's html. The page will load in with the manifest's setting.

[jsjoeio]

Thanks @LordMethenor! Yeah we probably need to fix something in the PWA manifest

[shp7724]

Workaround

Looking at the developer console, I found there exist two theme-color meta tags, which looked like the culprit of this issue.

As a workaround, I simply deleted the following line in workbench.html and everything worked as expected.

<link rel="alternate icon" href="{{BASE}}/static/resources/server/favicon.svg" type="image/svg+xml" />
<link rel="icon" href="{{BASE}}/favicon.ico" type="image/x-icon" />
<link rel="manifest" href="{{BASE}}/manifest.json" crossorigin="use-credentials">
- <meta name="theme-color" content="{{CLIENT_BACKGROUND_COLOR}}">
<link data-name="vs/workbench/workbench.web.api" rel="stylesheet" href="{{BASE}}/static/out/vs/workbench/workbench.web.api.css">

(I installed code-server via homebrew, so in my case, workbench.html was located in /usr/local/Cellar/code-server/4.1.0/libexec/vendor/modules/code-oss-dev/out/vs/code/browser/workbench/workbench.html.)

I hope this helps.

[jsjoeio]

@shp7724 wow!!! Nice find. We actually delete this as part of the 1.64 update (https://github.com/coder/code-server/pull/4902) so this should be fixed in the next release. Thank you for posting that!