Importing a VSCode generated theme into Theia based application

Hi all,

I just want to create a simple browser based IDE. There will be some custom widgets and a custom theme. I am reading documentations for two days and i’m kinda lost in terminology.

I’ve created a widget using yo theia code generator. It looks like this:
image

Then, i’ve read that creating custom Theia themes now possible with creating a theme in VSCode and then importing it as a plugin. So i’ve created a theme using yo vscode.

They are working separately but i want to import the theme into the project that i’ve created the widget. This is where i’m lost.

  • How do i import the theme into existing project?
  • Can i use this ‘auto-generated for a widget’ Theia project as a fully functioning custom Browser IDE? (Add more widgets, themes, extensions etc.)

Thanks in advance!

My VSCode generate theme folder looks like this:
image

@fatihhtoker thank you for the discussion!

How do i import the theme into existing project?

You can package your custom theme as a plugin (vscode extension) and consume it in your application in the following ways:

  • as a default plugin meaning it is part of your application’s package.json (example).
  • you can host your plugin already packaged on github releases, or you can host it on the open-source marketplace open-vsx.

In order to consume the vscode theme, you will need to include plugin support in your application, by adding the necessary extensions. For an example you can look at our example-browser example including the start script which references the default plugins folder.

Can i use this ‘auto-generated for a widget’ Theia project as a fully functioning custom Browser IDE? (Add more widgets, themes, extensions etc.)

You can certainly use the auto-generated project (using yo code) to create a browser application (as it includes a browser-app) but you might want to re-organize the repo when adding additional custom @theia applications. You can modify the browser-app package.json to include the necessary extensions and plugins for your use-case.

Please let me know if anything is unclear or if you have additional questions.

I successfully managed to consume the theme. Thanks for the solution!