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(
  theme: TLDefaultColorTheme,
  color: TLDefaultColorStyle,
  variant: keyof TLDefaultColorThemeColor,
): string;

Example

import { getColorValue, getDefaultColorTheme } from "@tldraw/tlschema";

const theme = getDefaultColorTheme({ isDarkMode: false });

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

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

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

Parameters

Name	Description
`theme`	`TLDefaultColorTheme;` The color theme to use for resolution
`color`	`TLDefaultColorStyle;` The color style value to resolve
`variant`	`keyof TLDefaultColorThemeColor;` Which variant of the color to return (solid, fill, pattern, etc.)

Returns

string;

The CSS color string for the specified color and variant