Configure Color Themes

---

Basics

For SEAL Operator, you can change or add color themes. By default, SEAL Operator uses the standard SEAL Systems theme.

Use the following steps to change or add color themes:

1. Change to the directory /opt/seal/seal-operator-ui.

2. Create the directory custom_themes if it does not exist yet.

3. Change to the new directory.

4. Create a new file themes.json if it does not exist yet.

5. Copy the following template to the file. This is the SEAL standard theme. You can then modify the colors.

   {
     "light-theme": {
       "primary": "#009DE0",
       "accent": "#005F9B",
       "text": {
         "300": "#E0E0E0",
         "400": "#BDBDBD",
         "500": "#9E9E9E",
         "600": "#757575",
         "700": "#616161",
         "800": "#424242",
         "A100": "#FFFFFF"
       },
       "background": "#FAFAFA",
       "components": {
         "toolbar": "#FFFFFF",
         "field": "#FFFFFF",
         "dialog": "#FFFFFF",
         "header": "#FFFFFF",
         "dropdown": "#FFFFFF",
         "card": "#FFFFFF",
         "item": {
           "default": "#FFFFFF",
           "focused": "#E1EFF7",
           "hovered": "#FAFAFA",
           "condensed": "#FAFAFA"
         },
         "gutter": "#FFFFFF",
         "collapsable-actions": "#FFFFFF",
         "default-button": "#FFFFFF",
         "parent-metadata": "#FFFFFF",
         "share-details": "#FFFFFF",
         "task-output": "#FFFFFF",
         "search": "#FFFFFF",
         "metadata-editor": "#FFFFFF",
         "document-metadata": "#FFFFFF",
         "document-preview": "#FFFFFF"
       }
     }
   }
   

6. If you only want to change a few of the colors it is sufficient to copy only for example the following template to the file. The rest is taken from the standard theme.

   {
     "light-theme": {
       "primary": "#009DE0",
       "accent": "#005F9B"
     }
   }
   

Multiple Themes

You can also add various themes to themes.json. The users then can choose between these themes in the themes settings.

{
  "my-first-theme": {
    "primary": "#AAAAAA",
    "accent": "#005F9B",
    "text": {
      "300": "#E0E0E0",
      "400": "#BDBDBD",
      "500": "#9E9E9E",
      "600": "#757575",
      "700": "#616161",
      "800": "#424242",
      "A100": "#FFFFFF"
    },
    "background": "#FAFAFA"
  },
  "my-second-theme": {
    "primary": "#BBBBBB",
    "accent": "#005F9B",
    "text": {
      "300": "#E0E0E0",
      "400": "#BDBDBD",
      "500": "#9E9E9E",
      "600": "#757575",
      "700": "#616161",
      "800": "#424242",
      "A100": "#FFFFFF"
    },
    "background": "#FAFAFA"
  }
}

If there are multiple themes in the themes.json file and a new user logs on for the first time, the first theme is selected by default.

Meaning of the Values

Define all colors in RGB-HEX format.

• primary: the main color of the application, used mainly as background for certain elements
• accent: a color used for highlighting elements, usually buttons and links
• text: colors applied to text based on the importance, with darker shades indicating higher emphasis and lighter tones for less critical information
• background: background color in panels
• components: colors used as background for components, for example toolbars and table rows

Where Different Colors from the Theme Are Used

components.toolbar

components.field

components.dialog

components.header

components.dropdown

components.card

components.item

components.gutter

components.collapsable-actions

components.default-button

components.parent-metadata

components.share-details

components.task-output

components.search

components.metadata-editor

components.document-metadata

components.document-preview

How to Translate the Names of the Custom Themes

To show nice theme names to the user in the themes settings you have to provide translations for the configured theme names. In the example above, these are my-first-theme and my-second-theme.

In the additional_languages folder you have to add a {{language}}-diff.json file for each supported language, for example en-diff.json, or edit them if they already exist.

In these files you have to add the names of the custom themes:

  {
  ...,
  "Themes": {
    ...,
    "my-first-theme": "A nice theme",
    "my-second-theme": "Another nice theme"
  },
  ...
}

For this, refer to Change an Existing Translation.

---