Defining application colors with Restyle

Restyle provides a set of coordinated colors and the ability to choose a custom color for each individual application being restyled. However, there may be instances where an organization's own corporate colors do not align with the predefined set. In such cases, Restyle allows for the creation of a customization database which extends the standard application colors to all users of the organization.

For more information, see Restyle Configuration Store.

Follow the steps in the sections below to define your own application colors for use when restyling applications with the Restyle feature.

Prerequisites

  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.

Create the File Resource

Use HCL Domino Designer to create a file named app_color/colors.json under Resources > Files.

  1. In the Domino Designer workspace, open the restyle.nsf database.
  2. In the left pane of the database design, expand Resources and click Files.
  3. Click New File Resource.
  4. In the File Name field, enter app_color/colors.json.

Add Color Descriptions

We recommend that you use an editor that supports JSON syntax checking to create a file and then copy that file via the clipboard into HCL Domino Designer.

Create a text file named colors.json and structure the content as follows with one or more color descriptions:

{
    "version": "1.0.0",
    "My Green": {
        "description": "My green color.",
        "app.primary.color": "#3CB371",
        "app.secondary.color": "#FFDE00"
    }
}

Here's a breakdown of each field:

  • "version": Specifies the version of your color configuration file. It must be "1.0.0" for the current version of Notes.
  • "My Green": This is an example color name. You can choose any name, in any language. However, it is recommended to name them something other than the existing restyle colors.
  • "description": A brief explanation of the color. This is an optional field.
  • "app.primary.color": This is the primary color for your application, specified in HEX color code.
  • "app.secondary.color": This is the secondary color for your application, specified in HEX color code. It's rarely used in the existing restyle themes but is required. It can be defined the same as the app.primary.color.

Copy, Save, and Close the File Resource

After filling in your desired colors, copy the file back to the File Resource named app_color/colors.json in HCL Domino Designer.

  1. Select the entire file and copy to the clipboard.
  2. Open the app_color/colors.json file resource in HCL Domino Designer and paste the file contents into the editor.
  3. Click File > Save.
  4. Click File > Exit.

Verify your changes are available

  1. Using Notes, select a database template to restyle.
  2. Click File > Application > Restyle to display the restyle options.
  3. Your custom color should appear in the list of application colors.