HOWTO: Customize Theme

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:

• Nuxeo (default)
• Dark
• Kawaii
• Light

Customization

All the resources for each theme are located on the /themes/{name} folder, where name is the name of the theme and have the following files:

• /themes/{name}/theme.html style definitions that allow customizing colors, fonts, or any other CSS properties for most elements used in the Web UI.

• /themes/{name}/preview.jpg preview image that is displayed on the themes chooser page.

• /themes/{name}/logo.png image used as application logo.

• /themes/{name}/background.png image used as background (optional, available for some themes only).

To add a new theme or customize one of the provided ones you can simply deploy and override theme resources as described in How to deploy additional Web UI resources.

Create a Theme

This example provides a walk-through on how to create a new theme and add it as a contribution to the Web UI. We will create our new theme called new-light theme, which is based on the light theme with some customizations.

Make a copy of the light folder on the /themes directory and name it new-light. Then make the following changes to it:

Edit the theme.html:

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

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

html {
  ... --nuxeo-badge-background: Tomato;
  ... --nuxeo-app-header-background: #cfd8dc;
  ... --nuxeo-sidebar-background: #58597a;
  ... --nuxeo-button-primary: Tomato;
  ...;
}

html {
  --nuxeo-page-background: url(themes/new-light/background.png) repeat;
}

And add a background.png image to /themes/new-light to use as background.

Now, to make the new theme avaliable, you need to add the new-light theme as a slot contribution, using the THEMES slot as follows:

<nuxeo-slot-content name="new-light-theme" slot="THEMES" order="50">
  <template>
    <nuxeo-theme name="new-light"></nuxeo-theme>
  </template>
</nuxeo-slot-content>

Where properties name="new-light" must match the name of the directory we created for the theme.

Furthermore, the name property is used to define the i18n label for the theme name based on the following convention:

"themes.{themeName}":"name of the theme"

For the current example, with search-name="assets", add the following entry to the messages.json file:

"themes.new-light":"New Light"

For more information about i18n translations, refer to Managing Translations