How to easily change the overall theme in CUBA application?

Question

I was wondering how easy it is to replicate the CUBA studio theme into my application? For example, by default it is using the halo theme but was wondering if there were other themes as well.

Answer 1

To make CUBA look like CUBA Studio:

1. Create theme extension for halo using action "Create theme extension" from Project Properties section
2. Go to IDE
3. Find files in modules/web/themes/halo
4. Open halo-ext-defaults.scss
5. Add overrides for valo variables:

$v-background-color: #333333;
$v-panel-background-color: #333333;

$v-textfield-background-color: #252526;
$v-textfield-background-color--readonly: #333333;

$v-font-size: 13px;
$v-font-weight: 400;

$v-border: 1px solid #1E1E1E;

$v-layout-margin-top: 6px;
$v-layout-margin-right: 6px;
$v-layout-margin-bottom: 6px;

$v-layout-margin-left: 6px;    
$v-focus-color: #679ED2;

$v-link-text-decoration: none;    
$v-panel-border: 0 solid transparent;
$v-notification-title-color: #252526;

$cuba-scrollbars-style-enabled: true;

7. Restart your application

Some components cannot be styled with this variables to look like Studio components because Studio theme contains custom CSS for Buttons/Combobox/etc.

Answer 2

This manual contains the detailed explanation of how to customize the default theme of CUBA applications. If changing colors is enough (see the Modifying common parameters section of the manual) it is not time consuming.