Styling theia

I want to style some elements of theia like moving some things to somewhere else. How to do it? And yes I want to know how to make a plugin theme of .vsix as the default theme of the IDR

[original thread by Arijit265]

[Arijit265]

How to style theia according to my use??

[Arijit265]

How to set a theme plugin as the default theme when packaging thr package.json

[Arijit265]

I want to move some bars from here to therr

If you want to theme the application (colors) then you can create a vscode color theme. In order to set the default theme, you can reference it in the package.json like so. If you require more excessive changes to the application then you must create a custom Theia extension that updates the application by providing css changes.

[Arijit265]

I mean just reference it??

[Arijit265]

The theme

[Arijit265]

And how to access the bars and menu ??

[Arijit265]

I mean in css

The vscode theme will need to be installed as a plugin (referencing the default should work correctly).
In order to modify components in css you can reference elements by their id or classNames.

[Arijit265]

How to know their names??

[Arijit265]

I mean id names

[Arijit265]

Will the package.json that I am making normally will it work for extensions or while making an extension there will be some cha ges in the .json file??

The names of themes? You can find the name in the extension’s package.json (contributes > themes > label)

I’m not sure I understand your question, what changes do you think will occur?

[Arijit265]

You said that i shouod access the elements in css with their div id now I want to know the div id names of the top bar ,bottom bar like that

[Arijit265]

Basically I mean that how to edut the elements of the editor in css??

[Arijit265]

How to access the editor through css

[Arijit265]

And them how to package that thimg with the chamges done?

The easiest way would be to look at the sources and see the classnames and ids (major restyling of the application is probably not recommended as it might break other components / extensions). Your custom extension which provides updated styling should be added as a dependency to your application.

If you’d like, you could take a look at this branding extension which helps set up the boilerplate for what might become of your own implementation. The following extension provides some custom css to add icons to the menu, and background image when no editors or content is present in the main area. You should be able to update the css to do things you’d like once you find the necessary corresponding ids and classnames.