import React from "react" ; import makeClass from "clsx" ; import { Element } from "@design-systems/utils" ; export const colorSchemes = [ "light" , "dark" ] as const ; export type ColorScheme = typeof colorSchemes [ number ] ; export const themes = [ "chrome" , "firefox" ] as const ; export type Theme = typeof themes [ number ] ; const isWindowDefined = typeof window !== "undefined" ; example export interface Themeable { /** Light or Dark mode. */ colorScheme ? : ColorScheme ; /** Supported browser themes.  */ theme ? : Theme ; } export type ThemeableElement < T extends keyof JSX . IntrinsicElements > = Element < T > & Themeable ; export const ThemeContext = React . createContext < Themeable > ( { theme : "chrome" , colorScheme : "light" , } ) ; /**
 * 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 React Context provider for devtools-ds themes */ export const ThemeProvider = ( { children , ... value } ) => { const wrappedTheme = React . useContext ( ThemeContext ) ; return ( < ThemeContext . Provider value = { { ... wrappedTheme , ... value } } > { children } < /ThemeContext.Provider>); } ; param props param styles example export const useTheme = ( props , styles = { } ) => { const themeContext = React . useContext ( ThemeContext ) ; const currentTheme = props . theme || themeContext . theme || "chrome" ; const currentColorScheme = props . colorScheme || themeContext . colorScheme || "light" ; const themeClass = makeClass ( styles [ currentTheme ] , styles [ currentColorScheme ] ) ; return { currentColorScheme , currentTheme , themeClass , } ; } ; interface BasicTheme { [ key ] : string ; } interface LightDarkTheme { /** The light version of the theme */ light : BasicTheme ; /** The dark version of the theme */ dark : BasicTheme ; } type CustomTheme = BasicTheme | LightDarkTheme ; export type ComponentTheme = Required < Record < "chrome" , CustomTheme > > & Partial < Record < Theme , CustomTheme > > ;