Customizing themes with Restyle

Restyle can utilize user-supplied themes.

These themes are stored in Restyle Configuration Store.

Restyle Themes

A Restyle theme is a JSON-formatted document containing configuration elements that control how Restyle updates the design elements of a Notes database. A JSON schema, describing the structure of a Restyle theme, is used to validate a theme document before Restyle uses it.


  1. HCL Domino Designer installed on your machine.
  2. Understand the JSON (JavaScript Object Notation) format at a basic level.
  3. A JSON-compatible editor.
  4. A local replica of restyle.nsf. For more information, see Restyle Configuration Store.

Exporting Themes from Restyle.nsf

The best way to create a custom theme is to start with an existing theme and modify it as needed. Export a theme and the theme schema from restyle.nsf by following these steps:

  1. Create a directory to use as a destination for the theme and schema files.
  2. Launch Domino Designer.
  3. Open the local replica of restyle.nsf.
  4. Navigate to Resources/Files and double-click the Files entry.
  5. Select reserved/schema/theme-<version>.json and click Export. This is the "theme schema".
  6. Select the directory created in step 1 and click Save to save the schema file.
  7. Select any document under reserved/theme to use as a starting theme and click "Export".
Note: The file names contain the sequence 2f instead of the '/'. Since you are not importing these files after changing, you can rename to remove the 2f if desired.

Creating a Customized Theme

There are two options possible when creating a new theme file. The first is to create a complete copy and modify all parameters, the second is to include an existing complete theme and override specific properties in the customized theme definition.

Creating a complete copy

  1. With your JSON-capable editor, open the exported theme file and save as a new theme file, for example: my_custom_theme.json.
  2. For best results, configure your editor to associate the theme schema with your new theme. This provides auto-complete functionality and validates the document before Restyle uses it.
  3. Modify the theme document as needed.
Overriding an existing configuration
  1. With your JSON-capable editor, open the exported theme file and "save as" a new theme file, for example: my_custom_theme.json.
  2. Add the following property to the top level of the document: "include" : "<theme_name>"
  3. Any properties defined in this file will override properties with the same name from the included file. Here is an example that overrides properties of the colorful_action_bar theme:
        "version": "1.0.0",
        "include": "colorful_action_bar",
        "elements": {
            "actionBar": {
                "size": {
                  "height": {
                    "units": "Exs",
                    "value": 4.75
                  "font": {
                    "typography": "Body 2"
                "background": {
                  "color": {
                    "$ref": "#/palette/app.primary.color"
                "border": {
                  "dropShadow": true,
                  "dropShadowWidth": 55,
                  "thickness": {
                    "bottom": 1,
                    "left": 2,
                    "right": 3,
                    "top": 4
                  "inner": {
                    "bottom": 5,
                    "left": 6,
                    "right": 7,
                    "top": 8
                  "outer": {
                    "bottom": 9,
                    "left": 10,
                    "right": 11,
                    "top": 12
                  "color": {
                    "$ref": "#/palette/background.light.primary"
                  "line": "Solid"
                "button": {
                  "heightStyle": "Default",
                  "heightAbsolute": 24,
                  "widthStyle": "Absolute",
                  "widthAbsolute": 145,
                  "margin": 24,
                  "displayBorder": "Never",
                  "internalMargins": 16,
                  "backgroundColor": {
                    "$ref": "#/palette/app.primary.color"
                  "font": {
                    "typography": "Button",
                    "color": {
                      "$ref": "#/palette/text.darkbg.secondary"

Verify your changes are available

  1. Ensure your local replica of restyle.nsf has replicated to the server copy.
  2. Using Nomad for web browsers, select a database template to restyle.
  3. Click File > Application > Restyle to display the restyle options.
  4. Your custom theme should appear in a dropdown under the built-in theme choices.