useTapTheme - Tappify Documentation

function useTapTheme(): {
  mode: "light" | "dark";
};

Returns the mode the host is drawing in, as { mode: 'light' | 'dark' }.

Returns

{
  mode: "light" | "dark";
}

mode

mode: "light" | "dark";

Remarks

Re-renders when the owner switches theme. The host’s CSS variables already follow the theme, so reach for this only where a component has to branch in code rather than restyle, such as a chart’s series colours. Throws TAP_OUTSIDE_HOST outside a mount.

Example

import { useTapTheme } from '@tappify/extension-sdk';

function SeriesLine() {
  const theme = useTapTheme();
  const stroke = theme.mode === 'dark' ? '#a5b4fc' : '#4f46e5';
  return <svg><line x1="0" y1="0" x2="40" y2="10" stroke={stroke} /></svg>;
}