menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Theia

Eclipse Theia - Cloud & Desktop IDE

Channels
Team

Styling theia

February 20, 2020 at 11:41am
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

February 20, 2020 at 11:41am
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.

February 21, 2020 at 4:14am
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??

February 21, 2020 at 11:29am
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.

February 22, 2020 at 12:17pm
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 ?
This link??
I actually want to know the names of all css elements
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.
that would be good i actually want to chamge the size of stuff and things according to my needs
Show more messages