Theme Variables

Theme variables are a new concept we're unveiling with the American Pharoah release. If you're familiar with CSS/SCSS/LESS variables, Theme Variables work in much the same way.

Variables offer an efficient mechanism for setting a value as a variable and being able to use that variable value as a CSS property in a Theme's Slate Style.

You'll find the Theme variables underneath the Styles that belong to a Theme.

Building a Theme Variable

Building a variable for your Theme typically starts by building a Slate Style that has a property that can be flexible. For our example, we'll create a Slate Style that utilizes a variable to change the color of the h1-h6 elements of our Slate elements.

We'll start by building our Slate Style:

Here we're setting the h1-h6 color property to leverage whatever value we input when we build our $defaultTextColor variable in the next step.

Note: You'll notice that we use the [chart] and the .centered-visual class quite often to target the actual chart elements that are being applied to a Slate.

Once you have a Slate Style built out to leverage a Variable, you can build the Variable itself.

Clicking "Add Variable" will bring up a modal for Variable detail input:

Input any value you'd like for the Variable value.

This quick and easy example only scratches the surface of the possibilities of Variables in your Themes! With some design and planning, you can modularize your Slate Styles with Variables to allow for a more efficient write once, change many places paradigm.