How to customize electron window title?

[timfayz]

Question

Hey there! I'm trying to change an electron window title (default is "Eclipse Theia"). However, couldn't find how :(. Tried this (mostly ai generated):

// src/electron-main/myext-electron-main-contribution.ts
@injectable()
export class BrandingMainApplication extends ElectronMainApplication {
  protected override getDefaultTheiaWindowOptions(): TheiaBrowserWindowOptions {
    return {
      ...super.getDefaultTheiaWindowOptions(),
      frame: false,
      title: "MY TITLE",
      titleBarStyle: "hidden",
      titleBarOverlay: {
        color: "#36af40",
        symbolColor: "#b11212",
        height: 32,
      },
    };
  }
}

then:

// src/electron-main/myext-electron-main-module.ts
export default new ContainerModule((bind, unbind) => {
  unbind(ElectronMainApplication);
  bind(ElectronMainApplication).to(BrandingMainApplication).inSingletonScope();
});

then in package.json:

  "theiaExtensions": [
    {
      "electronMain": "lib/electron-main/myext-electron-main-module"
    }
  ]

However, nothing changes. Any suggestion how to proceed?

[github-actions[bot]]

Hi @timfayz, thanks for starting this discussion! 👋

The Theia community will take a look soon. In the meantime, you might find helpful information in:

• 📖 Theia Documentation
• ❓ FAQ
• 💬 Previous Discussions

---

💙 Eclipse Theia is built and maintained by a community of contributors and sponsors. If Theia is valuable to your work, consider sponsoring the project. For professional support, training, or consulting services, learn more about available options.

[cristiandmonda]

You can customize the title through the application's package.json, like this. You can see more here.

[msujew]

Hey @timfayz,

the window title is handled in both electron and web by the same WindowTitleService. It collects a bunch of data and displays that as the title.

As for the Eclipse Theia title - you should change that in the package.json configuration of your application, see the applicationName:

theia/examples/browser/package.json

Lines 6 to 9 in 8ed51a5

	"theia": {
	"frontend": {
	"config": {
	"applicationName": "Theia Browser Example",

[timfayz]

thank you all a lot. almost stuck on this part. as for this:

the window title is handled in both electron and web by the same WindowTitleService. It collects a bunch of data and displays that as the title.

could you kindly elaborate how to use WindowTitleService (if any)? like can I, using it, affect, say, title of web page in a browser, title of a main electron window, or a title of a electron sub-windows?

[msujew]

Assuming you want to change the behavior, you can subclass it and rebind your new implementation. See this guide on how to customize Theia.

Almost none of the services inside of Theia are designed to be used from the outside, i.e. like in a library. Most of them contribute features to the application - if you want to change those behaviors, they are designed to be overridable/subclassable.

[timfayz]

the main issue I'm having right now with Theia is that it heavily relies on DI which blurs the boundaries who does what and how. for example, if I want to change, say, the aforementioned title (eg. in a browser this time), will it be a setter in a class i need to rebind? or will it be a *Contribution interface I need to implement and bind to? or will it be some global that I can import and set directly.

[msujew]

Generally, if you want to change behavior, you will need to find what contributes that behavior and rebind it. On the other hand, the *Contribution interfaces are designed to add new behavior to the application. That's a good rule of thumb.