Theming

The Responsive UI theming styles all aspects of the component visuals, using CSS.

Your application’s views are built without knowledge of the current theme. The current theme styles all of the elements within your application’s views automatically, freeing you from having to worry about coming up with color schemes.

Your application-level CSS should never hardcode colors since those colors may conflict with the Responsive UI theming, and might not even be visible in some of the theme color sets.

Available themes

Responsive UI supports 10 enterprise themes…

Pacific

Onyx

Contrast

Steel

Chocolate

Pear

Tangerine

Grape

Rose

Terminal

Open theming with CSS variables

Responsive UI uses CSS variables to provide all themed values. These CSS variables are mostly specify color values, but they also include settings for font, border radius, box shadows, etc.

The name for each CSS variable starts with two hyphens, an “–rui-” prefix, and describes the value it contains. For example, the themed value for the primary button background color can be found in the --rui-btn-primary-bg CSS variable and the value for button text font weight can be found in the --rui-btn-font-weight CSS variable.

To reference, say, the themed primary button background color, use this notation in your CSS:

var(--rui-btn-primary-bg)

The binding of the values from the CSS variables happens at runtime. This allows you to reference all themed colors as standalone values that you can then assign to any property in any element, including your own components or any third-party components you want to use that are not officially supported in Responsive UI.

This returns the value for just this one themed color, not an assignment of that color to a specific property. This is important, because it allows you to grab just the color value in isolation, which you can then use in any way you like.

You’ll typically reference these CSS variables in your own CSS classes like what’s shown below, mapping the CSS variable value to any property that takes the same data type. This example takes a specific themed color value — one that’s typically used as a background color — and uses that as a border color.

.my-component {
    border: 1px solid var(--rui-btn-primary-bg);
}

Whenever the theme changes, a new set of CSS variables for the selected theme is loaded into the DOM, automatically updating any CSS variable references like the one shown above. This allows you to reference our themed color values and apply them to elements in your application in a theme safe way.

Most of the themed values are color values. If you apply only a color value to text, you won’t get the correct font face, font size, font weight, etc. There are new CSS variables for these settings too, and there’s a good chance we’ll be adding more CSS variables over time too.

Using CSS variables for our theming also opens the ability for anyone to create new themes, including custom themes and FI-branded themes. We do not have a theme generator utility at this point, so custom theme creation would be a manual process, but it is possible.

CSS variable example in sample application

You can see an example of CSS variable usage in the Theming view and in the Data Density view in the sample application.

List of available CSS variables

This section lists the CSS variables that are available for you to reference in your applications.