This procedure shows you how to use the theme.scss.json file to apply style changes.

Overview

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 at two places:

• in the root folder of your theme part
• in the root folder of your customization - note that this is the old way, not recommended anymore.

Color variables naming convention

Variables that define colors follow this naming convention:

{
  $mt-colorname[-intensity]
}

• colorname is the name of the color as defined in the material color palette.
• intensity (optional) is the number for the gradient. For example, mt-grey-200 defines an intensity of light grey. For more information on material color, go to Google design and navigate to the "Color palette" page.

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-right-sidebar-min-width"   : "720px",
  "theme-animation-duration"               : "0.7s",
  "theme-disable-ending-popup"             : true
}

Reference a color variable

You can reference a color variable setting from a .scss file by prefacing the color variable name with $. For example:

// in scss file
{
  color: $theme-primary-emphasis-background-color;
}
...