[NEW] Theming Update: Major Visual Changes in Perspective

Yes.

A lot of users approached Perspective Styles form the beginning as a way to define broad-scope settings across components because Perspective themes were not fully developed and fleshed-out. This approach worked to move users along, but from a maintenance and adaptability perspective, this is the wrong approach.

Style settings and colors which are intended to be used throughout the project should be applied through a project’s theme, and Perspective Style Classes should be used in instances like one-offs, or when you want an appearance based on some property or state. In this way, Style Classes prevent you from needing to bind potentially dozens of individual style properties against a value.

In your case, you should provide an additional file of colors in the theme directory - themes/custom_colors.css with a color like --kg-light-grey: #e7dbdb(don’t add your color to the existing list of named colors) and make sure to import this file within the top-level theme files.

themes/light.css should look like this, as should the other themes you want to use your colors in:

@import "./light/index.css";
@import "./custom_colors.css";

Then, you can access your color anywhere on the project just as @PGriffith suggested: var(--kg-light-grey).

Binding the Style Class in use to the Alarm state is going to be a little trickier, but should be something like this:


Note that this binding is on the classes property, not style. In this example, “ActiveAlarm” is a Perspective Style Class at the top level of the Styles directory and houses style settings I want applied to components in the event a specified Alarm is in an active state.

9 Likes