# Function ThemeProvider

ThemeProvider(props): null | ReactElement< any, any >

Theme provider, which allows you to adjust the look and feel of child components.

Components not wrapped in a theme provider use the current theme from the connected Fusion instance by default.

# Parameters

Parameter Type Description
props ThemeProviderProps Theme provider props

# Returns

null | ReactElement< any, any >

A Theme Provider component

# Example

Example of a theme provider, which changes the colors and font of the nested indicator chart:

<ThemeProvider
  theme={{
    chart: {
      backgroundColor: '#333333',
      textColor: 'orange',
      secondaryTextColor: 'purple',
    },
    typography: {
      fontFamily: 'impact',
    },
  }}
>
  <IndicatorChart {...chartOptions} />
</ThemeProvider>

Indicator chart with custom theme settings:

For comparison, indicator chart with default theme settings:

# See

ThemeSettings and IndicatorChart