How to style theia according to my use??

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

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.

I mean just reference it??

The theme

And how to access the bars and menu ??

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.

How to know their names??

I mean id names

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) https://github.com/akamud/vscode-theme-onedark/blob/11ef483921495ea6c086f56149dfa0ca6225ae53/package.json#L28

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

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

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

How to access the editor through css

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.

@vince-fugnitto

I dont want the editor to look like monaco one I want it to look different. Can I change the editor to my desired one or editt its elements like that ?

https://github.com/microsoft/monaco-editor/blob/master/test/playground.generated/customizing-the-appearence-exposed-colors.html will this help

This link??

I actually want to know the names of all css elements

@arijit265

in general, vscode theming extensions would customize the appearance of the monaco editor including colors and other details such as if an element is bold, etc. I think this would be the easiest way to achieve what you want. If you want to completely change the monaco editor to a different editor, I'd advise against it since it would be quite difficult and potentially require a lot of changes/testing.

@vince-fugnitto

that would be good i actually want to chamge the size of stuff and things according to my needs