Repository navigation
titleBar color setting is ignored in version v4.0.1 (PWA mode) #4725
Description
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:
- Set up 3.12.0.
- Install it in PWA mode (as separate app window).
- Edit settings.json and customise workbench.colorCustomizations->[yourThemeName] -> titleBar.activeBackground value (CSS color).
An example:
https://gist.github.com/akares/846d368c9ebecfb7fdc51aaa4a91ec12 - Notice window title background change.
Broken version:
- Upgrade to 4.0.1
- The theme tweak is ignored now.
Screenshot
Expected
UPD: Seems hex color values preview feature also failed in 4.0.1.
Activity
jsjoeio commented on Jan 12, 2022
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 commented on Jan 13, 2022
LSeelig commented on Jan 25, 2022
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 commented on Jan 25, 2022
Thanks @LordMethenor! Yeah we probably need to fix something in the PWA manifest
shp7724 commented on Mar 8, 2022
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 commented on Mar 8, 2022
@shp7724 wow!!! Nice find. We actually delete this as part of the 1.64 update (#4902) so this should be fixed in the next release. Thank you for posting that!