Theme variables overview

GBC customization is based on variables. Theme variables are contained in the theme parts, and are set in the theme.scss.json file. They can be edited to change the look and feel of your applications.

Naming patterns

Variables that customize the UI components of the GBC are categorized by name spaces. Our naming patterns can indicate how those variables are used. Table 1 shows the name spaces used by GBC.

Table 1. Theme variable name spaces
Name space	Description
`theme-*`	This name space contains variables that allow you apply customization settings globally to the UI rather than to a specific widget. These variables are used across a theme, such as those that apply colors, layout, and so on. See Theme. Theme variables are used as the base value for other variables. For example, `theme-field-height-ratio` is used as the base value by various `gbc-Widget-` and `mt-*` variables setting widget height. See Theme variable inheritance. For examples of editing theme-wide variables, see Customize the sidebar and Display the Genero context menu.
`palette-*`	This name space contains general color palettes for the default customization. See Main color palettes.
`mt-*`	mt stands for Material Toolkit, based on material design concepts inspired by Google's material design (external link). This name space contains variables that help you customize the basic toolkit items and widgets using: Material color constant variables that define a range of color settings from light to dark to help you create a color theme for your brand or style. See Material color constants. Variables used by specific components, such as card, dialog, list, sidebar, and so on. For example, `mt-button-*` variables apply to all buttons in the application. See Material variables.
`gbc-Widget-`	This name space contains variables for specific GBC widgets or widget families, such as checkbox, message, progress bar, scrollbar, splitter, table, and so on. See Widgets specific variables. For examples of editing widget-specific variables, see Customize the chromebar and Change relog prompt.
`mdi-*`	mdi stands for Material Design Icons, based on Google's material design (external link) guidelines for icons. This name space contains variables that configure GBC fonts. See Gbc Fonts. For an example of editing Material Design Icons, see Change icons.
`html-*`	This name space defines variables for setting default HTML elements. See HTML defaults variables.
`gbc-navigation-*`	This name space defines variables for setting the swipe navigation style. See Swipe Navigation widget.
`responsive-*-width`	This name space defines variables for setting the maximum width for small and medium devices. See Responsive defaults variables.
`$z-index-*`	This name space defines variables for setting the stack order of layers. See Z-indexes.

Theme variable inheritance

GBC theme variables are interlinked and inherit default values from each. Often, the theme-* variables are used as the basis for other variables. Editing these higher-level variables has a "ripple down" effect on those variables that inherit their values.

For example, see Figure 1:

$theme-field-height-ratio has a default value of 0.7. This is used as the default value for:
- $gbc-DateEdit-field-height-ratio: Used to calculate the size of the DateEdit widget.
- $gbc-SliderWidget-field-height-ratio: Used to calculate the size of the Slider widget.
The default value of $theme-field-default-height is formed by multiplying $theme-field-height-ratio by 32px. This is used as the default value for:
- $mt-button-default-height: The height of all buttons in the application.
- $gbc-ButtonWidget-default-height: The height of standard buttons on a GBC form.
- $gbc-ButtonEditWidget-default-height: The height of editable buttons on a GBC form.

If you edit $theme-field-height-ratio, this impacts the entire "tree" of variables.

Figure: Inheritance of GBC theme variables