import { EUI_CHARTS_THEME_DARK , EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme' ; import { createContext , useContext } from 'react' ; import { $Values } from 'utility-types' ; import { Theme , LIGHT_THEME , DARK_THEME , DEFAULT_CHART_MARGINS } from '@elastic/charts' ; import { mergePartial } from '@elastic/charts/src/utils/common' ; import { storybookParameters } from './parameters' ; internal export const ThemeId = Object . freeze ( { Light : 'light' as const , Dark : 'dark' as const , EUILight : 'eui-light' as const , EUIDark : 'eui-dark' as const , } ) ; internal export type ThemeId = $Values < typeof ThemeId > ; const ThemeContext = createContext < ThemeId > ( ThemeId . Light ) ; const BackgroundContext = createContext < string | undefined > ( undefined ) ; export const ThemeIdProvider = ThemeContext . Provider ; export const BackgroundIdProvider = BackgroundContext . Provider ; const themeMap = { [ ThemeId . Light ] : LIGHT_THEME , [ ThemeId . Dark ] : DARK_THEME , [ ThemeId . EUILight ] : mergePartial ( LIGHT_THEME , EUI_CHARTS_THEME_LIGHT . theme ) , [ ThemeId . EUIDark ] : mergePartial ( DARK_THEME , EUI_CHARTS_THEME_DARK . theme ) , } ; const getBackground = ( backgroundId ? ) => { if ( ! backgroundId ) { return undefined ; } const option = ( storybookParameters ?. background ?. options ?? [ ] ) . find ( ( { id } ) => id === backgroundId ) ; return option ?. background ?? option ?. color ; } ; export const useBaseTheme = ( ) : Theme => { const themeId = useContext ( ThemeContext ) ; const backgroundId = useContext ( BackgroundContext ) ; const theme = themeMap [ themeId ] ?? LIGHT_THEME ; const backgroundColor = getBackground ( backgroundId ) ; return mergePartial ( theme , { chartMargins : DEFAULT_CHART_MARGINS , background : { color : backgroundColor } , } ) ; } ;