useTheme

Use useTheme when a component needs the merchant's theme choices: brand colours, font, your own theme settings or the text direction.

ExampleCopy Anchor Link

import { useTheme } from '@salla.sa/twilight-theme-engine/hooks/useTheme';

export function Badge({ children }: { children: React.ReactNode }) {
  const { color, isRTL } = useTheme();
  return (
    <span
      dir={isRTL ? 'rtl' : 'ltr'}
      style={{ background: color.primary, color: color.reverse_text }}
    >
      {children}
    </span>
  );
}

APICopy Anchor Link

function useTheme(): UseThemeResult;

GotchasCopy Anchor Link

• font can be undefined, so check it before reading font.name.
• Works during server rendering and in the browser. The data comes from the provider at the root of the app.
• On a primary-coloured background, use reverse_text for the text so it stays readable.
• For the direction of the current language, useTranslation also returns direction, isRTL and isLTR.

NextCopy Anchor Link

• Theme data: every field of the object this hook returns, with example values.
• useStore reads the store's data.
• Styling shows how to apply colours with CSS.