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.

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
}