Extend an existing theia theme

Hi All,

I would like to know if there is an example or known way to extend an existing theme, for example.

I want to add theia-themes as dependency into my extension and then extend it by adding new icons, specific for that theme.

regards,
Abhishek

@abchakra thank you for the discussion :+1:

I had created theia-themes in the past as an example for others on how to create their own themes and consume it in their Theia-based applications before we had support for vscode themes.

The theia-themes package is not published on npm so if you really wanted to consume it you can probably reference it by commit, else you can simply inspire yourself from it to create your own theme from the start.

I’m not sure exactly what you want to change in terms of icons but I don’t think themes would allow it, you might need to extend components directly to change the icons until something like https://github.com/eclipse-theia/theia/pull/9513 is supported.

Thanks for your reply, I would like to use a theme, and based on the theme, change my Icons for dark and light background.

So for example if the theme-dark is selected , I want to show my widget with white color.

Since the theme file is part of another npm package , I do not want to override it but to extend it by adding new variables.

–theia-ui-font-color-custom0: var(–md-grey-970);

Now I am trying to do it via listening to the themeService change listener and then passing the theme id to my widget which call update() and then render icons for the theme.

Regards,
Abhishek

@chakraborty-slx @abchakra

You can definitely use the ThemeService to listen to theme change events and so on, however a likely easier implementation is to contribute colors in your extension (for dark, light, and hc (high contrast) themes) so you can use them in your widget:

For example:

You can then simply use these variables in your css.

Since the theme file is part of another npm package , I do not want to override it but to extend it by adding new variables.

I think the ColorContribution would be a better choice in this example? It can apply to all dark, light and high-contrast themes. Is there a reason you want to somehow consume https://github.com/vince-fugnitto/theia-themes?

1 Like