Themes for a custom widget

[YathindraNikshipth]

I created a custom Widget as follows

@injectable()
export class CloseWidget extends ReactWidget{}

the source contains a button having text,border and a icon

and added to Theia top panel as follows

app.shell.topPanel.addWidget(this.close)

so my doubt, how can i apply styles for text,border and icon so that it will be coherent with changes in theia theme like light(theia), dark(theia), abyss, quiet light etc themes. just like any other widget available in theia how to make it responsive

[msujew]

Hey @YathindraNikshipth,

see here for most of the registered theme colors and here how to use them in CSS.

[sowjanyagunupuru]

Hello @msujew

Can we get a reference that how we can use the registeredColorsnin common-frontend-contribution.ts for our components as an example
Like we have an id : window.activeBorder
How can we apply that color to our component

[msujew]

@sowjanyagunupuru I've linked an example in CSS above. You just need to replace all . with - and prefix it with --theia- to get the CSS variable from the color ID.

[sowjanyagunupuru]

Yes I tried using
border : var(--theia-window-activityBorder);

I am getting the color perfectly
But
On changing theme
I want my border color also to change respectively

Similar to the text color change on swapping light and dark themes

[msujew]

That should be accomplished automatically. Changing the theme should also exchange the value of the CSS variable. We don't do anything special to enable theme support in the app.

Do you have a video or some code to show the problem?

Yes I tried using
border : var(--theia-window-activityBorder);

Also did you mean --theia-window-activeBorder?

[sowjanyagunupuru]

Okay
On using perfect suitable css from theia
Thats reflecting good on theme change

Thank you 😊