theme.scss.json file

The theme.scss.json file contains a list of theme settings. Changing a theme setting is an easy way to modify the appearance of the user interface.

Important: Changes made to theme.scss.json require a rebuild of the customization project before changes take effect. Run grunt to rebuild your project.

Syntax

Understanding this customization requires some knowledge of JSON file syntax. The syntax of each theme setting consists of a variable_name, followed by a colon (:) and then the variable_value. Variable names and values are in double quotes. Theme styles are separated by commas.

"variable_name"   :   "variable_value",

The variable_name is a unique identifier used throughout the Genero Web Client for JavaScript (GWC-JS) project to set theme styles, for example the UI window's primary color is referenced by the variable gbc-primary-background-color. These variables are standard theme variables and should not be subject to change.
The variable_value can be a color, a number, or a variable, depending on the style. If the value is defined by a variable, for example $vname, “vname” is an existing variable name in the GWC-JS project.

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 http://www.google.com/design and navigate to the "Color palette" page.

Example of customized theme styles

The theme.scss.json file contains the list of styles as shown in the example. See the table Table 1 for a description of the variables.

{
  "gbc-font-size-ratio"    : "0.9",
  "gbc-margin-ratio"       : "0.6",
  "gbc-field-height-ratio" : "0.7",
  "gbc-radiobutton-size"   : "14px",
  "gbc-checkbox-size"      : "14px",

  "gbc-primary-background-color"         : "$mt-grey-50",
  "gbc-secondary-background-color"       : "$mt-white",
  "gbc-field-background-color"           : "$mt-white",
  "gbc-field-disabled-background"        : "rgba(0,0,0,0.04)",
  "gbc-primary-color"                    : "$mt-blue-700",
  "gbc-primary-medium-color"             : "$mt-blue-500",
  "gbc-primary-light-color"              : "$mt-blue-100",
  "gbc-secondary-color"                  : "$mt-grey-600",
  "gbc-disabled-color"                   : "$mt-grey-400",
  "gbc-separator-color"                  : "$mt-grey-400",
  "gbc-header-color"                     : "$mt-grey-100",
  "gbc-message-color"                    : "$mt-grey-800",
  "gbc-error-color"                      : "$mt-red-800",
  "gbc-sidebar-always-visible-min-width" : "1400px",
  "gbc-sidebar-default-width"            : "300px",
  "gbc-animation-duration"               : "0.7s"
}

Table 1. theme.scss.json
Variable name	Description
`gbc-font-size-ratio`	The font size adjustment ratio in relation to Droid Sans font family sizes. For example, if the browser's available font for the `<body>` element is Times (12px), size of letters are adjusted by multiplying `gbc-font-size-ratio` by font size. In our example, they display at 10.8 pixels high, (0.9 × 12).
`gbc-margin-ratio`	Ratio applied to the space between fields (padding) calculated in relation to the width of the fields' container.
`gbc-field-height-ratio`	Ratio applied to the field height calculated in relation to the height of the fields' container.
`gbc-radiobutton-size`	Size of the radio button in pixels.
`gbc-checkbox-size`	Size of the checkbox in pixels.
`gbc-primary-background-color`	Window primary background color.
`gbc-secondary-background-color`	Window/containers (group, drop-down menu) secondary color.
`gbc-field-background-color`	Widget background (bg) color.
`gbc-field-disabled-background`	Widget disabled background color.
`gbc-primary-color`	Button/widget color gradient for dark intensity.
`gbc-primary-medium-color`	Button/widget color gradient for normal intensity.
`gbc-primary-light-color`	Button/widget color gradient for light intensity.
`gbc-secondary-color`	Widget (`RADIOGROUP`, `CHECKBOX`) border color.
`gbc-disabled-color`	Widget disabled color.
`gbc-separator-color`	Toolbar separator color.
`gbc-header-color`	Table header background color.
`gbc-message-color`	Message background color.
`gbc-error-color`	Error message background color.
`gbc-sidebar-always-visible-min-width`	Browser window width size (in pixels) for the side bar to appear. Use this setting to hide the side bar. See Display or hide the side bar.
`gbc-sidebar-default-width`	Default size of side bar in pixels.
`gbc-animation-duration`	Animation duration (in seconds), such as the speed of Product identification window pop-down appearance.

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

color: $gbc-primary-medium-color;

See Widget scss file.