> Documentation index: https://www.gooddata.ai/docs/gooddata-ui/llms.txt lists every page of these docs as Markdown.

# useTheme

> Read the current theme from ThemeProvider context, with companion hooks for loading state and dark-mode detection.

API reference: [useTheme()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.usetheme/index.md) (function), [useThemeIsLoading()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.usethemeisloading/index.md) (function), [useIsDarkTheme()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.useisdarktheme/index.md) (function)

`useTheme` returns the current theme from [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md). If you pass a theme, the hook returns that theme instead. The companion hooks `useThemeIsLoading`, `useThemeStatus`, and `useIsDarkTheme` report the loading state and whether the theme is dark. See [Apply theming](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/apply-theming/index.md) for setting up [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md).

## [Basic usage](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#basic-usage)

```tsx
import type { ITheme } from "@gooddata/sdk-model";
import { useTheme } from "@gooddata/sdk-ui-theme-provider";

function MyComponent({ theme: themeProp }: { theme?: ITheme }) {
    // Uses themeProp if defined, otherwise falls back to the context value
    const theme = useTheme(themeProp);

    const primaryColor = theme?.palette?.primary?.base ?? "#14b2a9";

    return <div style={{ color: primaryColor }}>Themed content</div>;
}
```

### [Wait for the theme to load](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#wait-for-the-theme-to-load)

`useThemeIsLoading` tells you whether [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) is still loading the theme from the backend:

```tsx
import { useTheme, useThemeIsLoading } from "@gooddata/sdk-ui-theme-provider";

function MyComponent() {
    const theme = useTheme();
    const isLoading = useThemeIsLoading();

    if (isLoading) {
        return <div>Loading theme...</div>;
    }

    return <div style={{ color: theme?.palette?.primary?.base }}>Ready</div>;
}
```

### [Detect a dark theme](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#detect-a-dark-theme)

`useIsDarkTheme` tells you whether the current theme is dark:

```tsx
import { useIsDarkTheme } from "@gooddata/sdk-ui-theme-provider";

function MyComponent() {
    const isDark = useIsDarkTheme();

    return <div className={isDark ? "dark-mode" : "light-mode"}>Content</div>;
}
```

## [Parameters](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#parameters)

| Parameter | Type | Description |
|-----------|------|-------------|
| `theme` | `ITheme \| undefined` | Optional theme override for `useTheme`. If defined, the hook returns it instead of the context value. |

`useThemeIsLoading`, `useThemeStatus`, and `useIsDarkTheme` take no parameters.

## [Return value](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#return-value)

- `useTheme`: `ITheme | undefined`
- `useThemeIsLoading`: `boolean | undefined`
- `useThemeStatus`: `"pending" | "loading" | "success" | undefined`
- `useIsDarkTheme`: `boolean`

## [Notes](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/hooks/use-theme/#notes)

- Without a [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) up the tree, `useTheme` returns `undefined`, so guard palette lookups with optional chaining or a fallback value.
- `useThemeStatus` tells apart `"pending"` (no load started), `"loading"` (the theme is being fetched), and `"success"` (the theme is resolved). Use it when `useThemeIsLoading` isn't precise enough.
- `useIsDarkTheme` returns `false` when there is no theme, so it's safe to call outside [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md).