Theme Provider
The Theme Provider component allows you to customize the visual style of your dashboards by applying a theme (see Create Custom Themes).
To be able to use the Theme Provider component, set up the backend
and workspace
properties in your application (see Connecting to a GoodData platform Analytical Backend or Connecting to a GoodData.CN Analytical Backend).
NOTE: Always use the Theme Provider component in the root of your application. A theme is applied globally to everything on a page. When you wrap one visual component with a ThemeProvider
element, everything else will also be themed despite not being wrapped with the ThemeProvider
element.
Using the Theme Provider component with backend and workspace providers
When using the Theme Provider component with backend and workspace providers, you do not need to specify any additional props for your Theme Provider.
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>
Using the Theme Provider component without backend and workspace providers
When using the Theme Provider component without backend and workspace providers, you have to pass the backend
and workspace
props to your Theme Provider.
import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";
<ThemeProvider backend={backend} workspace="your-workspace-id">
<Application {...}>
</ThemeProvider>
Using the Theme Provider component with a custom theme
You can create properties of a custom theme and pass the theme to the ThemeProvider
element that you added to your application (for all available properties, see the declaration of ITheme).
import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";
<ThemeProvider theme={customTheme}>
<Application {...}/>
</ThemeProvider>
import { ITheme } from "@gooddata/sdk-backend-spi";
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)",
},
};
Example
import { ThemeProvider } from "@gooddata/sdk-ui-theme-provider";
<div>
<ThemeProvider>
<BubbleHoverTrigger>
<Button
tagName="span"
value="Hover over this link..."
className="gd-button-link"
/>
<Bubble className="bubble-primary">
This is bubble content.
<br />
<Button value="Click here!" className="gd-button-positive" />
</Bubble>
</BubbleHoverTrigger>
</ThemeProvider>
</div>