Theme Service
The theme
service offers utilities to interact with the OpenSearch Dashboards theme. EUI provides a light and dark theme object to supplement the OpenSearchDashboards-Charts baseTheme
. However, every instance of a Chart would need to pass down the correct EUI theme depending on OpenSearch Dashboards's light or dark mode. There are several ways you can use the theme
service to get the correct shared theme
and baseTheme
.
The current theme (light or dark) of OpenSearch Dashboards is typically taken into account for the functions below.
chartsDefaultBaseTheme
Default baseTheme
from @elastic/charts
(i.e. light).
chartsDefaultTheme
Default theme
from @elastic/eui
(i.e. light).
useChartsTheme
and useChartsBaseTheme
A React hook for simple fetching of the correct EUI theme
and baseTheme
.
import { npStart } from 'ui/new_platform';
import { Chart, Settings } from '@elastic/charts';
export const YourComponent = () => (
<Chart>
<Settings
theme={npStart.plugins.charts.theme.useChartsTheme()}
baseTheme={npStart.plugins.charts.theme.useChartsBaseTheme()}
/>
{/* ... */}
</Chart>
);
chartsTheme$
and chartsBaseTheme$
An Observable
of the current charts theme
and baseTheme
. Use this implementation for more flexible updates to the chart theme without full page refreshes.
import { npStart } from 'ui/new_platform';
import { EuiChartThemeType } from '@elastic/eui/src/themes/charts/themes';
import { Subscription, combineLatest } from 'rxjs';
import { Chart, Settings, Theme } from '@elastic/charts';
interface YourComponentProps {};
interface YourComponentState {
chartsTheme: EuiChartThemeType['theme'];
chartsBaseTheme: Theme;
}
export class YourComponent extends Component<YourComponentProps, YourComponentState> {
private subscriptions: Subscription[] = [];
public state = {
chartsTheme: npStart.plugins.charts.theme.chartsDefaultTheme,
chartsBaseTheme: npStart.plugins.charts.theme.chartsDefaultBaseTheme,
};
componentDidMount() {
this.subscription = combineLatest(
npStart.plugins.charts.theme.chartsTheme$,
npStart.plugins.charts.theme.chartsBaseTheme$
).subscribe(([chartsTheme, chartsBaseTheme]) =>
this.setState({ chartsTheme, chartsBaseTheme })
);
}
componentWillUnmount() {
if (this.subscription) {
this.subscription.unsubscribe();
}
}
public render() {
const { chartsBaseTheme, chartsTheme } = this.state;
return (
<Chart>
<Settings
theme={chartsTheme}
baseTheme={chartsBaseTheme}
/>
{/* ... */}
</Chart>
);
}
}
Why have theme
and baseTheme
?
The theme
prop is a recursive partial Theme
that overrides properties from the baseTheme
. This allows changes to the Theme
TS type in @elastic/charts
without having to update the @elastic/eui
themes for every <Chart />
.