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.

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
}