HOWTO: Customize Theme

Themes

Nuxeo Web UI provides several themes to change the look and feel of the UI. For the moment, they mostly provide color schemes applied to UI elements and a background image for some themes.

The available themes are:

• default
• dark
• light
• garden
• kawaii

Customization

In the current version it's not possible to contribute new themes, however the existing ones can be overridden with a contribution.

To customize one of the provided themes you can simply deploy and override theme resources as described in How to deploy additional Web UI resources.

Taking resources/web/nuxeo.war/ui/ as our base path, these are the available resources for each theme:

• /styles/{name}-theme.html style definitions that allow customizing colors, fonts, or any other CSS properties for most elements used in the Web UI.
• /images/themes/{name}-theme.jpg preview image that is displayed on the themes chooser page.
• /images/themes/{name}.png image used as background (available for some themes only).

How to Customize a Theme

This example provides an walk-through on how to override the light theme in Web UI.

×

Make a local copy of the theme /styles/light-theme.html then make the following changes to it:

<link href="https://fonts.googleapis.com/css?family=Gabriela" rel="stylesheet">

<style is="custom-style">
  ...
  :root {
    --nuxeo-app-font: 'Gabriela', Arial, sans-serif;
    ...
   }
   ...
</style>

  html, body {
    ...
    background: url(../images/themes/custom-background.jpg) repeat;
    ...
  }

  :root {
    ...
    --nuxeo-badge-background: Tomato;
    ...
    --nuxeo-header-background: #CFD8DC;
    ...
    --nuxeo-sidebar-background: #58597a;
    ...
    --nuxeo-button-primary: Tomato;
    ...
  }

×

Finally you just need to contribute the preview image (that appears in the Themes page in the Web UI) with the same name as the theme being overridden, in this case /images/themes/light-theme.jpg.