Colors in public-facing Slate pages, like applications, forms, and portals, are defined by CSS color variables, also known as CSS custom properties.
The default Slate color variables
Each variable name is followed by a six-character color code. You can change some or all of these code values to, for example, match your branding, or to comply with color contrast requirements.
You can override the following variables:
fw-body-text: Used on most pages for text. Defaults to black.fw-link-text: Hyperlink text. Defaults to blue.fw-active-text: Link hover color, and text color for search matches. Defaults to light blue.fw-success-text: Text color displayed after, for example, a successful registration. Defaults to bright green.fw-success-accent: Border shown on success messages. Defaults to dark green.fw-success-background: Background color shown on success messages. Defaults to light green.fw-error-background: Background color added when form fields are required or otherwise don't validate. Defaults to pink.fw-warning-accent: Border shown on a warning message such as an uploaded file that can't be processed. Defaults to orange.fw-warning-background: Background shown on a warning message. Defaults to yellow.fw-datepicker-text: Text color of days and months on a datepicker. Defaults to dark gray.fw-datepicker-background-active: Background added to active date on a datepicker. Defaults to dark gray.fw-datepicker-background-hover: Background added to hovered date on a datepicker. Defaults to light gray.fw-tab-text: Text color on tabs and subtabs. Defaults to dark gray.fw-muted-text: Text color of temporary messages such asloading.... Defaults to light gray.fw-input-border: Borders added to text boxes or selects. Defaults to medium gray.fw-suggest-background-hover: Background added to suggest results element that is hovered. Defaults to medium gray.fw-tab-background: Background color added to tabs and subtabs. Defaults to medium gray.fw-tab-background-hover: Background color added to tabs and subtabs on hover. Defaults to light gray.fw-tab-text-hover: Text color used on tabs and subtabs on hover. Defaults to Slate blue.fw-table-row-border: Border between rows in a table. Defaults to light gray.fw-dialog-footer-border: Border between the body and footer of a dialog box. Defaults to light gray.fw-dialog-header: Background color of header of a dialog box. Defaults to medium gray.fw-button-background: Background color of buttons on popups (other than default button like Submit). Defaults to medium gray.fw-button-default-background: Background color of default button on popups. Defaults to darker gray.
Overriding the default Slate color variables
You can either define color variable overrides in Database → Files → /shared/build.css
You can also create a new CSS file and link to it in /shared/build.xslt. Here’s an example of a new file in /shared called build_colors.css:
root {
--fw-body-text: #000000;
/* Code omitted for clarity */
}Linking to the file in /shared/build.xslt:
<!-- Code omitted for clarity -->
<head>
<link href="/shared/build_colors.css?v=20200415192888980" rel="stylesheet" />
<!-- Code omitted for clarity -->
</head>Globally overriding variables
Variables apply globally within the :root context.
Here’s an example of variables defined at the :root level:
:root {
--fw-body-text: #000000;
--fw-link-text: #0000ff;
--fw-active-text: #3399ff;
--fw-success-text: #00aa00;
--fw-success-accent: #529214;
--fw-success-background: #e6efc2;
--fw-error-background: #ffcccc;
--fw-warning-accent: #ffcc66;
--fw-warning-background: #ffffcc;
--fw-datepicker-text: #333333;
--fw-datepicker-background-active: #666666;
--fw-datepicker-background-hover: #f0f0f0;
--fw-tab-text: #666666;
--fw-muted-text: #808080;
--fw-input-border: #999999;
--fw-suggest-background-hover: #efefef;
--fw-tab-background: #f0f0f0;
--fw-tab-background-hover: #fafafa;
--fw-tab-text-hover: #00669e;
--fw-table-row-border: #cccccc;
--fw-dialog-footer-border: #eaeaea;
--fw-dialog-header: #dadada;
--fw-button-background: #dfdfdf;
--fw-button-default-background: #c6c6c6;
}Targeting variables in containers
If you don’t want a variable to apply globally, you can isolate it to a container.
For example, when you define a variable in form[data-fw-form], it applies only in Slate forms served in your Slate branding.
To override the variables in an embedded form (that is, outside your Slate branding), define them in the styles for that specific form or in the styles of the page in which it’s embedded.