import React , { createContext , useContext } from 'react' ; import { ThemeProvider , Theme , PartialTheme , getTheme , mergeThemes , mergeStyles } from '@fluentui/react' ; import { mergeThemes as mergeNorthstarThemes , Provider , teamsTheme } from '@fluentui/react-northstar' ; import { lightTheme } from './themes' ; /**
 * Props for  FluentThemeProvider .
 *
 *  public export interface FluentThemeProviderProps { /** Children to be themed. */ children : React . ReactNode ; /** Theme for components. Defaults to a light theme if not provided. */ fluentTheme ? : PartialTheme | Theme ; defaultValue rtl ? : boolean ; } const wrapper = mergeStyles ( { height : '100%' , width : '100%' , overflow : 'auto' } ) ; const defaultTheme = mergeThemes ( getTheme ( ) , lightTheme ) ; /** Theme context for library's react components */ const ThemeContext = createContext < Theme > ( defaultTheme ) ; const initialFluentNorthstarTheme = mergeNorthstarThemes ( teamsTheme , { componentVariables : { ChatMessage : { linkColor : undefined , linkColorMine : undefined } } , componentStyles : { ChatMessage : { root : { lineHeight : '1.4286' } } } , fontFaces : [ ] , siteVariables : { bodyPadding : undefined , bodyFontSize : undefined , bodyFontFamily : undefined , bodyBackground : undefined , bodyColor : undefined , bodyLineHeight : undefined } } ) ; remarks public export const FluentThemeProvider = ( props ) : JSX . Element => { const { fluentTheme , rtl , children } = props ; let fluentUITheme = mergeThemes ( defaultTheme , fluentTheme ) ; fluentUITheme = mergeThemes ( fluentUITheme , { rtl } ) ; const fluentNorthstarTheme = mergeNorthstarThemes ( initialFluentNorthstarTheme , { componentVariables : { Chat : { backgroundColor : fluentUITheme . palette . white } , ChatMessage : { authorColor : fluentUITheme . palette . neutralPrimary , contentColor : fluentUITheme . palette . neutralPrimary , backgroundColor : fluentUITheme . palette . neutralLighter , backgroundColorMine : fluentUITheme . palette . themeLight } } , componentStyles : { ChatMessage : { timestamp : { WebkitTextFillColor : fluentUITheme . palette . neutralSecondary } } } } ) ; return ( < ThemeContext . Provider value = { fluentUITheme } > < ThemeProvider theme = { fluentUITheme } className = { wrapper } > < Provider theme = { fluentNorthstarTheme } className = { wrapper } rtl = { rtl } > { children } < /Provider> < /ThemeProvider> < /ThemeContext.Provider>); } ; public export const useTheme = ( ) : Theme => useContext ( ThemeContext ) ;