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

# Apply theming

> Apply custom themes to GoodData.UI dashboards and visualizations by wrapping your app in ThemeProvider.

API reference: [ThemeProvider()](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) (function)

To apply theming in GoodData.UI, wrap your application in the [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) component. It loads the theme selected in your workspace, or a theme you pass in, and applies it to your dashboards and visualizations (see [Create custom themes](https://www.gooddata.ai/docs/cloud/customize-appearance/create-custom-themes/)).

To load a theme from your workspace, [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) needs a `backend` and a `workspace` — either from the surrounding providers or from its own props (see [Integrate into an existing application](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/backend-setup/index.md)).

> **Warning:**
> Always place [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) at the root of your application. A theme is applied globally to everything on the page: when you wrap one visual component in [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md), everything else on the page is themed too, even though it is not wrapped.

## [Use ThemeProvider with backend and workspace providers](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/apply-theming/#use-themeprovider-with-backend-and-workspace-providers)

When [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) is rendered inside [`BackendProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.backendprovider/index.md) and [`WorkspaceProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.workspaceprovider/index.md), you do not need to pass it any additional props.

```tsx
import { BackendProvider, WorkspaceProvider } from "@gooddata/sdk-ui";
import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";

<BackendProvider backend={backend}>
    <WorkspaceProvider workspace="your-workspace-id">
        <ThemeProvider>
            <Application />
        </ThemeProvider>
    </WorkspaceProvider>
</BackendProvider>
```

## [Use ThemeProvider without backend and workspace providers](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/apply-theming/#use-themeprovider-without-backend-and-workspace-providers)

Without [`BackendProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.backendprovider/index.md) and [`WorkspaceProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui/sdk-ui.workspaceprovider/index.md) in the tree, pass the `backend` and `workspace` props to [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) directly.

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

<ThemeProvider backend={backend} workspace="your-workspace-id">
    <Application />
</ThemeProvider>
```

## [Use ThemeProvider with a custom theme](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/apply-theming/#use-themeprovider-with-a-custom-theme)

You can define a custom theme and pass it to [`ThemeProvider`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.themeprovider/index.md) through the `theme` prop; the provider then uses it instead of loading one from the workspace. For all available properties, see the [`ITheme`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.itheme/index.md) interface (beta) in the API reference.

Usage:

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

<ThemeProvider theme={customTheme}>
    <Application />
</ThemeProvider>
```

Declaration:

```ts
import type { ITheme } from "@gooddata/sdk-model";

export const customTheme: ITheme = {
  button: {
    borderRadius: "15",
    dropShadow: true,
    textCapitalization: true,
  },
  modal: {
    borderColor: "#1b4096",
    borderRadius: "5",
    borderWidth: "2",
    dropShadow: false,
    outsideBackgroundColor: "#e8cda2",
    title: {
      color: "#1b4096",
      lineColor: "#000",
    },
  },
  palette: {
    error: {
      base: "#ff2e5f",
    },
    primary: {
      base: "#eba12a",
    },
    success: {
      base: "#13ed4d",
    },
    warning: {
      base: "#ddff19",
    },
  },
  tooltip: {
    backgroundColor: "#101050",
    color: "#fff",
  },
  typography: {
    font:
      "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-regular-webfont.ttf)",
    fontBold:
      "url(https://cdn.jsdelivr.net/npm/roboto-font@0.1.0/fonts/Roboto/roboto-bold-webfont.ttf)",
  },
};
```

## [Props](https://www.gooddata.ai/docs/gooddata-ui/latest/integrations/embedding/apply-theming/#props)

| Prop | Type | Required | Description | Inherited from |
|------|------|----------|-------------|----------------|
| [`backend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropsbackend) | [`IAnalyticalBackend`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-backend-spi/sdk-backend-spi.ianalyticalbackend/index.md) | No | Analytical backend, from which the ThemeProvider will obtain selected theme object. | — |
| [`children`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropschildren) | `ReactNode` | No | React children | — |
| [`enableComplementaryPalette`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropsenablecomplementarypalette) | `boolean` | No | Flag determining whether the complementary palette is enabled or not. | — |
| [`modifier`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropsmodifier) | [`ThemeModifier`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.thememodifier/index.md) | No | If provided it is called with loaded theme to allow its modification according to the app needs. | — |
| [`removeGlobalStylesOnUnmout`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropsremoveglobalstylesonunmout) | `boolean` | No | Should ThemeProvider remove global styles during the unmount phase? | — |
| [`theme`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropstheme) | [`ITheme`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-model/sdk-model.itheme/index.md) | No | Theme that will be used if defined. | — |
| [`workspace`](https://www.gooddata.ai/docs/gooddata-ui/latest/api-reference/sdk-ui-theme-provider/sdk-ui-theme-provider.ithemeproviderprops/index.md#ithemeproviderpropsworkspace) | `string` | No | Identifier of analytical workspace, from which the ThemeProvider will obtain the selected theme identifier | — |