getColorValue • tldraw Docs

Resolves a color style value to its actual CSS color string for a given theme and variant. If the color is not a default theme color, returns the color value as-is.

function getColorValue(
  colors: TLThemeColors,
  color: string | TLDefaultColorStyle,
  variant: keyof TLDefaultColor,
): string;

Example

import { getColorValue } from "tldraw";

const colors = editor.getCurrentTheme().colors[editor.getColorMode()];

// Get the solid variant of red
const redSolid = getColorValue(colors, "red", "solid"); // '#e03131'

// Get the fill variant of blue
const blueFill = getColorValue(colors, "blue", "fill"); // '#4465e9'

// Custom color passes through unchanged
const customColor = getColorValue(colors, "#ff0000", "solid"); // '#ff0000'

Parameters

Name	Description
`colors`	`TLThemeColors;` The color palette for the current color mode (e.g. `theme.colors[colorMode]`)
`color`	`string \| TLDefaultColorStyle;` The color style value to resolve
`variant`	`keyof TLDefaultColor;` Which variant of the color to return (solid, fill, pattern, etc.)

Returns

string;

The CSS color string for the specified color and variant