Skip to content

UI customization

UI customization through HySecure Gateway

To configure custom colors for the primary buttons in the workspace client, follow 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 Note

  • 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.

Tip

Recommended Color Palette Material UI Color Palette

Example

    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