Ability to instantiate editor without theme
dimovpetar opened this issue · comments
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
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.
@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:
- Do you plan to make those icons SVGs, so that we can style them?
- Do you plan to support theming with CSS variables, not with styles?
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
@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