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).

Besides the background images /images/themes/{name}.png you can also add any images to /images/themes/ and reference them in your /styles/{name}-theme.html styles resources.

How to Customize a Theme

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

Without any customization the theme looks like this:

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

Change default font import from Roboto to Gabriela

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

Then change the --nuxeo-app-font accordingly

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

Change background to use a custom image

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

The image custom-background.jpg needs to be contributed to /images/themes/ in your bundle so it can be referenced in styles.

Change some colors

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

After customization the light theme will look like this:

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.

Note that we are making some improvements in themes and styling in general. The process to make contributions related to themes customization are subject to change until the release of a later Web UI version.