In this article
You can find variables in the _variables.scss
Sass partials in the scss/framework/
and scss/theme/
folders.
We recommend adding new variables and redefining existing ones in the scss/theme/
folder, as this will allow you to easily update the framework styles in the future. For more information about Sass and how styles are managed in our Zendesk themes, please refer to the Theme styles article.
Usage
An example of Sass variables in action are those used to define the gray color palette:
//
// Gray scale
//
// These are the colors you will use the most and will make up the majority of your UI.
// They're often used for text, backgrounds and borders.
//
$color-gray-100: #F7FAFC !default;
$color-gray-200: #EDF2F7 !default;
$color-gray-300: #E2E8F0 !default;
$color-gray-400: #CBD5E0 !default;
$color-gray-500: #A0AEC0 !default;
$color-gray-600: #718096 !default;
$color-gray-700: #4A5568 !default;
$color-gray-800: #2D3748 !default;
$color-gray-900: #1A202C !default;
Using a different shade for $color-gray-600
could be achieved by adding the following line to your theme/_variables.scss
file and recompiling the Sass styles:
$color-gray-600: #656e7b;
Theme setting variables
When writing custom Sass or CSS you can reference theme settings by using the identifier
property from the manifest.json
file as a variable name. For example, use the $heading_color
variable to apply the color defined in the Heading Color setting in CSS:
.h1 {
color: $heading_color;
}
Theme assets can also be referenced using a variable name, which can be found in the Theming Center interface:
-
Click the Customize design icon (
) in the sidebar.
-
Click Customize on the theme you want to edit.
-
Click Edit code.
-
In the Assets section, click the asset file you want to use