-
Couldn't load subscription status.
- Fork 2
Custom themes
Samuel Pastva edited this page Aug 15, 2018
·
2 revisions
To create a custom theme, you need to extend the Theme interface and then register the theme so that Ace can use it. This can be typically done inside a singleton, since Theme should not have any internal state anyway:
object CustomTheme : Theme {
// Theme ID is used by Ace to identify the theme.
override val id: String = "ace/theme/custom_theme"
// CSS class is added by Ace to the editor when the theme is active.
override val cssClass: String = "custom_theme"
override val isDark: Boolean = false
override val cssString: String = """
/* This is where you define CSS rules for your theme. */
/* Always make sure to restrict all rules to cssClass. */
$cssClass .ace_cursor {
color: #bababa;
}
...
"""
init {
// Utility method which registers this theme within Ace.
// (make sure to call this once all properties are initialised)
this.register()
}
}
Once the theme is registered, apply the theme by calling editor.setTheme(CustomTheme.id).
A simple theme inspired by the IntelliJ Darcula theme is shown in the demo module.
Remember that you can also define the CSS rules using some Kotlin DSL library, such as Aza-Kotlin-CSS.