Skip to content


Built-in themes#

Themes can be loaded with the --theme option. Multiple themes can be combined. Built-in themes can be loaded using their name, custom theme files can be loaded using their path.

Available themes (full color scheme):

Creating a custom theme#

Creating a custom theme is as simple as writing a tiny css file that will override the default css variables defined in default.scss :

:root {
    --color-accent: red;

This will change the default accent color to red. Variables can also be overridden for a specific subset of elements, for example :

.panel-container {
    --color-accent: blue;

This will change the default accent color to blue for all elements in panel widgets.


Theme files are reloaded automatically when they are modified.


If you want to use the SCSS syntax to write your theme, follow the Running from sources instructions, create a .scss file in src/scss/themes/ and run npm run watch-css. The theme will be watched and compiled automatically to a css file located in app/assets/themes/ (css files in this directory can be selected from the theme option by their name, without .css suffix).