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 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.

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-chromebar-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;
}
...