Register a custom default theme

Hi,

I’m trying to set my custom theme (coming from my extension) as default for my application, so I configured my “browser-app/package.json” like this:

"frontend": {
    "config": {
        "defaultTheme": "my-custom-theme-id",
        "defaultIconTheme": "theia-file-icons",
        ...
    }
}

This doesn’t work because when the ThemeService is loaded and tries to load the default theme at “browser-app\src-gen\frontend\index.js:19” my extension didn’t have the chance to register the custom theme. I noticed that once the preference settings for the active theme is set it then works because the preferences are applied after my extension has registered the custom theme.

Am I missing something to make it work or is there a different way?

Thanks

Theia version: 1.17.2

@Hanksha thank you for the discussion, I believe it is a current limitation, the themes are not ready until the application is loaded. There might be some investigation ongoing on how it can be improved as to allow custom themes to be set as default from the beginning:

@vince-fugnitto Thanks for your reply. As a workaround, is it possible to set default preferences via package.json? That way I could set the default theme in there as well. (I don’t really mind that the dark theme is visible for a split second when loading)

@Hanksha you can certainly try, but I haven’t confirmed how well that workaround works. My other idea was to override (inversify) the default theme theia declares, to instead use the custom one you implemented.

@vince-fugnitto How can you override it via inversify if the default themes are loaded in static variables in ThemeService.get()?

Another workaround I was thinking of was to modify the generated “browser-app\src-gen\frontend\index.js" so I can register my theme before ThemeService.get().loadUserTheme() but I don’t know how to modify the way that file is generated.

I’ll try the workaround with the preferences for now and see how it goes.

@vince-fugnitto How can you override it via inversify if the default themes are loaded in static variables in ThemeService.get() ?

I might be wrong, but I believe you can still rebind the symbol to your custom implementation:

Another workaround I was thinking of was to modify the generated “browser-app\src-gen\frontend\index.js" so I can register my theme before ThemeService.get().loadUserTheme() but I don’t know how to modify the way that file is generated.

You can always modify if after the fact with a script, else you can look at frontend-generator.ts:

I’ll try the workaround with the preferences for now and see how it goes.

:+1:

I might be wrong, but I believe you can still rebind the symbol to your custom implementation:

Yeah but that won’t help with the code calling ThemeService statically via ThemeService.get() unless I override it in the global as well. But that would still have to happen before the default theme is loaded and that’s happening outside of inversify.

You can always modify if after the fact with a script, else you can look at frontend-generator.ts:

I’ll have a look at that, thanks!