SourceCodeEditor - Custom Font Color


I’m using the SourceCodeEditor with a dark background:

$cuba-sourcecodeeditor-background-color: #111111;

I would like to know if it’s possible to customize the font color also (for Java Mode).

Thank you,



As the SourceCodeEditor based on the AceEditror it supports themes. So, this means that you can’t just change text color using CSS/SCSS. You need to change the entire theme so that it contains all necessary rules for the current language support.

I’d suggest you download ace-builds archive and grab themes from it since CUBA Platform contains only textmate, chrome and eclipse themes which are sutable for a light UI.

You need to place theme files under modules/web/web/VAADIN/resources/ace directory.

Pay attention that CUBA PLatform uses AceEditor v.1.1.9, so you need to download the proper version of ace-builds.

Here the direct download link for ace-builds v1.1.9:


I guess this will be less of a problem when you move Cuba Studio to the IntelliJ platform.

Hello Gleb,

Thanks a lot for the information.

I chose the “theme-ambiance” and placed the “.js” file at the web/web/VAADIN/resources/ace directory.

How do I inform my sourceCodeEditor to use this theme?

You need to unwrap a CUBA component to a Vaadin component and use the setTheme method:

private SourceCodeEditor codeEditor;
CubaSourceCodeEditor aceEditor = codeEditor.unwrap(CubaSourceCodeEditor.class);
1 Like

Hello Gleb,

It’s working!

Thank you

Is this still the method to change the Ace theme? Is there any way have the Ace theme respond to the general app theme? Example: hover using the standard Ace theme and hover-dark using ambiance?


We have no direct support for Ace themes. You can either follow my recommendations above or provide custom styles in every theme extension. For instance, you can investigate corresponding theme-*.js files to get an idea of what color to use and what class name to style.