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.
If you make a change to theme.scss.json, you must rebuild your customization project before the changes take effect.
- In the root folder of your theme part.
- In the root folder of your customization.
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
}