SourceCodeEditor - Custom Font Color

Support
#1

Hello,

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,

Claudio

#3

Hi,

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: https://github.com/ajaxorg/ace-builds/archive/v1.1.9.zip.

Regards,
Gleb

#5

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

#6

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?

#7

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

@Inject
private SourceCodeEditor codeEditor;
...
CubaSourceCodeEditor aceEditor = codeEditor.unwrap(CubaSourceCodeEditor.class);
aceEditor.setTheme(AceTheme.ambiance);
1 Like
#8

Hello Gleb,

It’s working!

Thank you

#9

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?

#10

Hi,

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.

Regards,
Gleb