Skip to content

UI customization

UI customization through HySecure Gateway

To configure custom colors for the primary buttons in the workspace client, follow the steps below:

Configuration Steps on HySecure Gateway

Access the Configuration File:

  • Open the globalsetting.js file on the gateway.

Define Color Tags:

  • Use the following tags to set the colors for different button states. Ensure that each property does not contain spaces and strictly adheres to the specified hex format without alpha values.

Color Tags

  • Default Background Color:

    WORKSPACE_PRIMARY_BUTTON_BACKGROUND_DEFAULT=#< RGB >

  • Default Text Color:

    WORKSPACE_PRIMARY_BUTTON_TEXT_DEFAULT=#< RGB >

  • Pressed Background Color:

    WORKSPACE_PRIMARY_BUTTON_BACKGROUND_PRESSED=#< RGB >

  • Pressed Text Color:

    WORKSPACE_PRIMARY_BUTTON_TEXT_PRESSED=#< RGB >

  • Hover Background Color:

    WORKSPACE_PRIMARY_BUTTON_BACKGROUND_HOVER=#< RGB >

  • Hover Text Color:

    WORKSPACE_PRIMARY_BUTTON_TEXT_HOVER=#< RGB >

  • Disabled Background Color:

    WORKSPACE_PRIMARY_BUTTON_BACKGROUND_DISABLE=#< RGB >

  • Disabled Text Color:

    WORKSPACE_PRIMARY_BUTTON_TEXT_DISABLE=#< RGB >

Important

  • The RGB values must be in the format of a 6-character hex code (e.g., #RRGGBB).
  • Avoid using any alpha values, as they are not supported. For example, do not use formats like #RRGGBBAA.
  • Ensure that all color codes conform strictly to the specified format without any additional characters or spaces.

Recommended Color Palette Material UI Color Palette

E.g.:

WORKSPACE_PRIMARY_BUTTON_BACKGROUND_DEFAULT=#880E4F

WORKSPACE_PRIMARY_BUTTON_TEXT_DEFAULT=

WORKSPACE_PRIMARY_BUTTON_BACKGROUND_PRESSED=#9C27B0

WORKSPACE_PRIMARY_BUTTON_TEXT_PRESSED=

WORKSPACE_PRIMARY_BUTTON_BACKGROUND_HOVER=#D81B60

WORKSPACE_PRIMARY_BUTTON_TEXT_HOVER=#FFFF00

WORKSPACE_PRIMARY_BUTTON_BACKGROUND_DISABLE=#FF80AB

WORKSPACE_PRIMARY_BUTTON_TEXT_DISABLE=#212121