import React , { FC , useMemo } from 'react' ; import { Observable } from 'rxjs' ; import useObservable from 'react-use/lib/useObservable' ; import createCache from '@emotion/cache' ; import { EuiProvider } from '@elastic/eui' ; import { EUI_STYLES_GLOBAL } from '../../utils' ; import { CoreTheme } from './types' ; import { convertCoreTheme } from './convert_core_theme' ; const defaultTheme = { darkMode : false , } ; interface CoreThemeProviderProps { theme$ : Observable < CoreTheme > ; } const emotionCache = createCache ( { key : 'eui-styles' , container : document . querySelector ( `meta[name="${ EUI_STYLES_GLOBAL }"]` ) as HTMLElement , } ) ; internal export const CoreThemeProvider = ( { theme$ , children } ) => { const coreTheme = useObservable ( theme$ , defaultTheme ) ; const euiTheme = useMemo ( ( ) => convertCoreTheme ( coreTheme ) , [ coreTheme ] ) ; return ( < EuiProvider colorMode = { euiTheme . colorMode } theme = { euiTheme . euiThemeSystem } cache = { emotionCache } > { children } < /EuiProvider>); } ;