A design's brand colors show up in many places: words, a gradient, an outline, a shadow, list markers. getUsedColors
lists every color a text box draws, and replaceColors swaps one color for another everywhere in the box with one
call. Use them to show a design's palette, or to recolor a whole design from a new palette.
List the colors a box draws
headline.getUsedColors();
// { textColors: ["#5e2dc1", "#ff7903"], strokeColors: ["#ff7903"], shadowColors: ["rgba(27, 17, 48, 0.3)"] }
| Field | Lists |
|---|---|
textColors |
The letters' colors: run and paragraph colors, a gradient fill's two colors, and list marker colors |
strokeColors |
Outline colors. An outline color with no outline width is not drawn, so it is not listed. |
shadowColors |
The drop shadow's color |
Each color is listed once, in one spelling: opaque colors as "#rrggbb", translucent ones as "rgba(r, g, b, a)".
Only colors on screen are listed: under a gradient or image fill, the letters' own colors are hidden, so they are left
out.
Replace colors
const result = headline.replaceColors([
{ replaceColor: "#5e2dc1", newColor: "#0f766e" },
{ replaceColor: "#ff7903", newColor: "#f43f5e" },
]);
replaceColormatches the color in any CSS spelling:"#FFF","white"and"rgb(255, 255, 255)"are the same color.- It matches the color at any opacity, and each place keeps its own opacity. A shadow in
rgba(94, 45, 193, 0.3)recolored to#0f766ebecomesrgba(15, 118, 110, 0.3). AnewColorwith its own opacity is used as given. - It reaches every place the box holds the color: run and paragraph colors (under a fill too), a gradient's two colors, outlines, list markers (a shape marker's fill and its mark) and the shadow.
- Each place changes at most once, so one call can swap two colors:
#000to#fffand#fffto#000at once. - The box lays itself out and redraws, and the call is one undo step when anything changed.
The result counts what changed:
| Field | Is |
|---|---|
replacedCount |
Every place that changed, in all |
textColorReplacements |
Letter colors: runs, paragraphs, gradient colors and list markers |
strokeColorReplacements |
Outline colors |
shadowColorReplacements |
Shadow colors (0 or 1: a box has at most one shadow) |
replacements |
For each replacement that changed something: { oldColor, newColor, count } |
Limit: Paragraph backgrounds and borders (
backgroundColor,borderColor) are not included in the lists or the replacements.
Recolor a whole design
Each box has its own colors, so call replaceColors on each box. Each box's call is its own undo step.
const palette = [
{ replaceColor: "#5e2dc1", newColor: "#0f766e" },
{ replaceColor: "#ff7903", newColor: "#f43f5e" },
];
// Konva
for (const box of rt.manager.boxes()) box.replaceColors(palette);
// Plain canvas
for (const box of rt.boxes()) box.replaceColors(palette);