TLTheme

A theme definition containing shared properties and color/font palettes for both light and dark modes.

To remove palette colors from themes, augment TLRemovedDefaultThemeColors. UI colors (text, background, negativeSpace, solid, cursor, noteBorder) are always required.

interface TLTheme {}

Example

const myTheme: TLTheme = {
  id: 'custom',
  fontSize: 16,
  lineHeight: 1.35,
  strokeWidth: 2,
  fonts: DEFAULT_THEME.fonts,
  colors: {
    light: { ... },
    dark: { ... },
  },
}
editor.updateTheme(myTheme)

Properties

colors: {
  dark: TLThemeColors;
  light: TLThemeColors;
};

Font definitions. Individual fonts may be absent if removed by a custom theme.

fonts: TLThemeFonts;

Base font size in pixels. Shape font sizes are derived by multiplying this value.

fontSize: number;

Unique identifier for this theme. Used as the key in the theme registry.

id: TLThemeId;

Base line height multiplier.

lineHeight: number;

Base stroke width in pixels. Shape stroke widths are derived by multiplying this value.

strokeWidth: number;