MadCap Flare (v 2019) now supports the use of variables (also known as custom properties) in the css. This is a great enhancement, as it allows users to keep their documentation look-and-feel consistent. It also saves time, since you can use an attribute variable in several styles and define it only once (in the root selector).

The use of variables is particularly relevant in the following scenarios:

• For keeping the branding color palette consistent. This applies to templates and themes (which opens up plenty of possibilities, like defining dark/light themes or for improving accessibility to the content for people with visual impairments) and also to link states (focus, hover, etc)
• You can also use color variables for keeping headers and other elements consistent. For example, if you want to apply the same color to all your headers and title styles (that not necessarily need to be defined as „H“)
• Variables can be used in attributes that need to be consistent and are shared by several styles. Some examples are the font size or font family for the body, p, li, div and spans styles.

You can create the variables and apply them from the stylesheet editor. However, I recommend using the text editor, as it is a faster way that allows you to perform search & replace.

To Create a Variable and Apply it to a Style

1. Open the css with the text editor.
2. Identify which attributes are used in several styles and should be kept consistent.
3. create a root selector as follows:
   • :root {}
4. Create a variable and add a double hyphen upfront. Example: a variable for the branding color #e73030
   • root {—BrandingColor: #e73030;}
5. Search for all occurrences of the branding color that should be kept consistent and replace them with the variable. Be careful not to replace the variable definition in the root with another variable — there must be at least one instance of the HEX value in the css, for obvious reasons 🙂 Example:
   • H1 {color: var(—BrandingColor);
   • Instructions {color: var(—BrandingColor);

Now, every time the branding color changes, you just need to update the value once in the variable stored in the root selector.