Customizing themes with Restyle

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.

Prerequisites

HCL Domino Designer installed on your machine.
Understand the JSON (JavaScript Object Notation) format at a basic level.
A JSON-compatible editor.
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:

Create a directory to use as a destination for the theme and schema files.
Launch Domino Designer.
Open the local replica of restyle.nsf.
Navigate to Resources/Files and double-click the Files entry.
Select reserved/schema/theme-<version>.json and click Export. This is the "theme schema".
Select the directory created in step 1 and click Save to save the schema file.
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

With your JSON-capable editor, open the exported theme file and save as a new theme file, for example: my_custom_theme.json.
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.
Modify the theme document as needed.

Overriding an existing configuration

With your JSON-capable editor, open the exported theme file and "save as" a new theme file, for example: my_custom_theme.json.
Add the following property to the top level of the document: "include" : "<theme_name>"

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

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