Ability to instantiate editor without theme

[dimovpetar]

Describe the feature

Ability to instantiate editor without a theme, so that dynamic custom theme can be applied without interfering with the editor's default theme (textmate).

Use Case

We need to set a custom theme to the editor, that fits with the rest of the page and fulfills our product standards, Our custom theme is based on Less parameters, that can be configured by end users, This means that the theme cannot be build once and included in this repository, as the other themes are.

Proposed Solution

Since the editor already provides stable CSS classes and can be styled like:

.ace_editor {
	font-family: "Monaco";
}

we just need to turn off all the active styles of the editor's default theme. Something like:

myEditor.setTheme("None");

Other Information

We are using the editor as part of the OpenUI5 project. Example can be seen here https://openui5nightly.hana.ondemand.com/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.sample.CodeEditor

Acknowledgements

• I may be able to implement this feature request
• This feature might incur a breaking change

ACE version used

1.31.1

[nightwing]

you can achieve this by using

editor.container.classList.remove(editor.renderer.theme.cssClass)

We probably could add myEditor.setTheme(null) as an alias for this, but it is unclear what to do with the .ace_dark class which can be required based on rules that you are adding instead of the theme.

[dimovpetar]

@nightwing I see that this class brings different icons. We would definitely benefit if those icons are brighter on dark themes. So it would be a good to also have control over this class. Then only setTheme(null) will not be enough. What about more parameters, or different approach, like:

editor.registerTheme({ name: "myTheme", isDark: true, css: ??? });
editor.setTheme("myTheme");

Also these pop up in my mind:

1. Do you plan to make those icons SVGs, so that we can style them?
2. Do you plan to support theming with CSS variables, not with styles?

[nightwing]

Turns out it is already possible to do editor.setTheme({cssClass: "myClass", isDark: true, cssText: "" }).

for svg icons we have editor.setOption("useSvgGutterIcons", true), not sure when/if it will become the default

we have not considered using css variables, but it may be useful as it would allow to not use long class names for tokens

[dimovpetar]

@nightwing that's great!

Is it possible to fix the documentation, so that it is clear that we can use editor.setTheme({cssClass: "myClass", isDark: true, cssText: "" })?
Currently, it says string | Theme, but Theme is not defined https://ace.c9.io/api/classes/src_editor.Editor.html#setTheme