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