Feature: Editor Themes

[adamgreenough]

Type of feature

✨ Feature

Current behavior

No response

Suggested feature

Ability to select editor themes for the editor and embeds or configure custom ones in file system

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[hatemhosny]

Hi @adamgreenough
Ability to select editor theme is planned.

However, configuring custom themes for code editors is much more involved. Considering there are 3 different code editors (Monaco, CodeMirror6 & CodeJar/Prism).

So probably the planned approach is selecting one of predefined themes for each code editor with fallback default theme for light and dark modes.

[hatemhosny]

Please let me know of preferred themes for any of these editors that you want to support.

[adamgreenough]

Being able to pick from predefined ones would be good! Or even just a blank file where we can paste custom CSS in to without worrying about updates overwriting it would solve it for me. :)

[adamgreenough]

Monaco themes: https://github.com/brijeshb42/monaco-themes/tree/master/themes
CodeMirror themes: https://codemirror.net/5/demo/theme.html
Prism themes: https://github.com/PrismJS/prism-themes/tree/master/themes

I'd love to be able to pick from the selection of these depending on the editor selected, especially that they carry through to the embeds so it can match a users site.

[hatemhosny]

Thank you @adamgreenough

Please note, that LiveCodes uses CodeMirror 6, not CodeMirror 5. This has been a complete incompatible re-write. So we need different themes for that.

[adamgreenough]

Got it! Looks like there are several pre-made CM6 themes available here: https://github.com/craftzdog/cm6-themes

[hatemhosny]

@adamgreenough
this has now been implemented in #483
the links you sent were indeed very helpful

This should be available in next release. However, you may try it on https://next.livecodes.io/?screen=editor-settings

Thank you ♥️