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.jsonand customiseworkbench.colorCustomizations->[yourThemeName]->titleBar.activeBackgroundvalue (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 commentedon 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 commentedon Jan 13, 2022
LSeelig commentedon 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 commentedon Jan 25, 2022
Thanks @LordMethenor! Yeah we probably need to fix something in the PWA manifest
shp7724 commentedon Mar 8, 2022
Workaround
Looking at the developer console, I found there exist two
theme-colormeta tags, which looked like the culprit of this issue.As a workaround, I simply deleted the following line in
workbench.htmland 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.htmlwas 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 commentedon 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!