Appearance¶
Customize how card tools look without changing what they display or how they behave.
You can change individual styles, make colors respond to entity values, reuse color palettes, or apply color filters to visual elements.
Choose what you want to change¶
| I want to... | Use |
|---|---|
| Change colors, fonts, strokes, opacity, or other visual properties | Styling |
| Change colors based on an entity value or state | Color stops |
| Reuse a predefined set of colors | Palettes |
| Modify colors using filters | Color filters |
Styling¶
Use styles to control the normal appearance of a tool.
Depending on the tool, this can include properties such as:
- fill and stroke colors
- line width and opacity
- font size and weight
- text alignment
- visibility and other SVG or CSS properties
Color stops¶
Color stops make a tool change color according to an entity value or state.
They can be used for discrete ranges, smooth transitions, gradients, and other value-based coloring.
Palettes¶
Palettes provide reusable color collections.
Use them when several tools or cards should share the same colors without repeating those colors throughout the configuration.
Color filters¶
Color filters modify the rendered colors of supported visual elements.
They can be used for effects such as changing brightness, saturation, hue, or other color characteristics.
Appearance on tool pages¶
Each Card Tool page shows the appearance options that are most useful for that specific tool.
For example, the Circle page shows how to change its fill and outline, while the Icon page shows how to change its icon color.
The shared concepts themselves are documented here only once.