import React , { useContext , createContext } from 'react' ; type Colors = { [ key ] : string ; } ; type ContextType = { colors : { [ key ] : string ; } ; } ; const Context = createContext < ContextType > ( null ! ) ; export const ThemeProvider = ( { children } ) => { const colors = getRootStyles ( [ 'blue' , 'brightBlue' , 'green' , 'purple' , 'lavender' , 'red' , 'yellow' , ] ) ; return < Context . Provider value = { { colors } } children = { children } / > ; } ; export const useTheme = ( ) => { return useContext ( Context ) ; } ; /**
 * Utility
 */ function getRootStyles ( colors ) { return colors . reduce ( ( all , property ) => { return { ... all , [ property ] : window . getComputedStyle ( document . body ) . getPropertyValue ( `--${ property }` ) . trim ( ) , } ; } , { } ) ; }