import React from "react" ; import { all } from "./themes" ; import { ThemeableElement , ThemeContext } from "./utils" ; const isWindowDefined = typeof window !== "undefined" ; /** Determine if the current browser is FireFox */ export const isFirefox = ( ) => { if ( isWindowDefined && window ?. navigator ?. userAgent ) { if ( window . navigator . userAgent . toLowerCase ( ) . includes ( "firefox" ) ) { return true ; } } return false ; } ; export interface AutoThemeProviderProps extends ThemeableElement < "div" > { /** Whether to automatically change the font and background color */ autoStyle ? : boolean ; /** Any React node children */ children : React . ReactNode ; } /**
 * Determine if the user has a "prefers-color-scheme" mode enabled in their browser.
 * This is helpful for detecting if a user prefers dark mode.
 */ const useDarkMode = ( ) => { const [ darkMode , setDarkMode ] = React . useState ( isWindowDefined && window ? window . matchMedia ( "(prefers-color-scheme: dark)" ) . matches : false ) ; React . useEffect ( ( ) => { if ( ! isWindowDefined ) { return ; } const mediaQuery = window . matchMedia ( "(prefers-color-scheme: dark)" ) ; /** Run when the user changes this setting. */ const changeDarkMode = ( ) => setDarkMode ( ! darkMode ) ; mediaQuery . addListener ( changeDarkMode ) ; return ( ) => { mediaQuery . removeListener ( changeDarkMode ) ; } ; } , [ darkMode ] ) ; return darkMode ; } ; /**
 * A theme provider that automatically detects a users browser and colorScheme.
 * Themes are set for each component using React Context.
 * It also sets the background color and text color to the correct color.
 */ export const AutoThemeProvider = ( { theme : propsTheme , colorScheme : propsColorScheme , autoStyle , children , ... html } ) => { const isDark = useDarkMode ( ) ; const colorScheme = propsColorScheme || ( isDark ? "dark" : "light" ) ; const theme = propsTheme || ( isFirefox ( ) ? "firefox" : "chrome" ) ; const style = { backgroundColor : all [ theme ] [ colorScheme ] . backgroundColor , color : all [ theme ] [ colorScheme ] . textColor , minHeight : "100%" , width : "100%" , } ; return ( < ThemeContext . Provider value = { { theme , colorScheme } } > < div style = { autoStyle ? style : undefined } { ... html } > { children } < /div> < /ThemeContext.Provider>); } ;