# useTheme (https://docs.salla.dev/twilight/react/hooks/use-theme)



Use `useTheme` when a component needs the merchant's theme choices: brand colours, font, your own [theme settings](https://docs.salla.dev/twilight/react/guide/settings) or the text direction.

## Example [#example]

```tsx title="app/components/common/Badge.tsx"
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>
  );
}
```

## API [#api]

```ts
function useTheme(): UseThemeResult;
```

| Prop                    | Type                     | Description                                                                            |
| ----------------------- | ------------------------ | -------------------------------------------------------------------------------------- |
| `color`                 | `ThemeColor`             | Theme colours.                                                                         |
| `color.primary`         | `string`                 | Primary colour.                                                                        |
| `color.text`            | `string`                 | Text colour.                                                                           |
| `color.reverse_primary` | `string`                 | The reverse counterpart of the primary colour.                                         |
| `color.reverse_text`    | `string`                 | Text colour to use on top of the primary colour, such as on a primary-coloured button. |
| `color.is_dark`         | `boolean`                | Whether the theme is dark.                                                             |
| `font`                  | `ThemeFont \| undefined` | The selected font. Can be missing.                                                     |
| `settings`              | `ThemeSettings`          | The values of your theme settings.                                                     |
| `isRTL`                 | `boolean`                | `true` when the theme reads right to left.                                             |

## Gotchas [#gotchas]

* `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`](https://docs.salla.dev/twilight/react/hooks/use-translation) also returns `direction`, `isRTL` and `isLTR`.

## Next [#next]

* [Theme data](https://docs.salla.dev/twilight/react/data/theme): every field of the object this hook returns, with example values.
* [`useStore`](https://docs.salla.dev/twilight/react/hooks/use-store) reads the store's data.
* [Styling](https://docs.salla.dev/twilight/react/guide/styling) shows how to apply colours with CSS.