theme.scss.json file

The theme.scss.json file contains a list of theme styles. Changing a theme style is an easy way to modify the user interface.

Note:

If you make a change to theme.scss.json, you must rebuild your customization project before the changes take effect.

You can use this file in two places:

In the root folder of your theme part.
In the root folder of your customization.

Note:

It is recommended that you use the file in the theme part, rather than in the root folder of the customization, unless you want the file to apply across all themes.

You can render your gICAPI webcomponents with settings used in the GBC, by calling the gICAPI.UseGbcThemeVariables() method and passing the theme variables in your theme.scss.json you want to use. For more information, refer to the gICAPI.UseGbcThemeVariables() page in the Genero Business Development Language User Guide

For details about the theme variables in theme.scss.json, see Theme variables reference.

Defining colors

To define colors for the UI, you can employ various methods. The following table illustrates different formats for assigning colors, such as using RGB values, hex codes, and references to other theme variables, which can be applied to variables like $ui-primary-color, $ui-background-color, and $ui-field-color.


Color definition	Description
`"rgb(255, 111, 0)"`	A shade of amber expressed using the RGB formula.
`"white"`	Standard HTML color name.
`"#dcdcdc"`	Hex value for a light grey color.
`"$mt-dark-grey"`	Reference to a Material color constants variable.
`"color.adjust(ui−background−color,lightness: +7%)"`	The `color.adjust` function in SCSS manipulates colors by adjusting properties like lightness, saturation, and hue; here, the background color's lightness is adjusted to 7% lighter. Any SCSS function can be used. For more information on SCSS functions, refer to the Sass website.

Example of customized theme styles

// in theme.scss.json
{
 
  "theme-font-size-ratio"                  : "0.9",
  "theme-margin-ratio"                     : "0.6",
  "theme-field-height-ratio"               : "0.7",
  "theme-radiobutton-size"                 : "14px",
  "theme-checkbox-size"                    : "14px",

  "theme-primary-background-color"         : "$mt-grey-50",
  "theme-secondary-background-color"       : "$mt-white",
  "theme-field-background-color"           : "$mt-white",
  "theme-field-disabled-background-color"  : "rgba(0,0,0,0.04)",
  "theme-primary-color"                    : "$mt-blue-700",
  "theme-primary-emphasis-background-color": "$mt-blue-500",
  "theme-primary-faded-background-color"   : "$mt-blue-100",
  "theme-secondary-color"                  : "$mt-grey-600",
  "theme-disabled-color"                   : "$mt-grey-400",
  "theme-separator-color"                  : "$mt-grey-400",
  "theme-header-color"                     : "$mt-grey-100",
  "theme-message-color"                    : "$mt-grey-800",
  "theme-error-background-color"           : "$mt-red-800",
  "theme-sidebar-always-visible-min-width" : "1400px",
  "theme-sidebar-default-width"            : "300px",
  "theme-toggle-chromebar-min-width"       : "720px",
  "theme-animation-duration"               : "0.7s",
  "theme-disable-ending-popup"             : true
}