Setting style variables for a theme
In a theme file, you can set variable values that override the
default values that the base styles use. To identify the individual style variables that you
can override, browse through the various files in the collection of style global
variables. The global variables are defined in the files contained in the folder. Use the contents of these files as a reference for identifying
variables that you can set.
Note: Do not modify the global variable files directly. Set style
variables only in theme files.
The global variables generally follow the naming convention of
$gw-scope--section--property.
For example, the variable for setting the background color of buttons is
$gw-app--buttons--bg.
In the global variable files, variable settings have the !default suffix.
This suffix indicates that the setting is a default value that you can override in your theme
file. If you do not override the default value, then the theme uses the default value.
Note: If the setting does not have the
!default suffix, then it is a
hard-coded setting that you cannot override.For more complex themes, you can also include custom Sass code that is available to all themes. In the folder , place your custom code in the file customer.scss. This file is processed after all base styles and the global variables for the theme are set.
For example, in the file 4_platform_general.scss, the application
font for monospace type is defined as
follows:
$gw-app--font-family--monospace: Monaco, "Lucida Console", monospace !default;$gw-app--font-family--monospace: Courier;