How to use the @theme-ui/core.useThemeUI function in @theme-ui/core
To help you get started, we’ve selected a few @theme-ui/core examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
system-ui / theme-ui / packages / theme-provider / src / index.js View on Github 
export const ThemeProvider = ({
theme,
components,
children
}) => {
const outer = useThemeUI()
if (typeof outer.setColorMode === 'function') {
return jsx(CoreProvider, { theme },
jsx(MDXProvider, {
components,
children
})
)
}
return jsx(CoreProvider, { theme },
jsx(ColorModeProvider, null,
jsx(BodyStyles, { theme }),
jsx(MDXProvider, {
components,
childrenexport const ColorModeProvider = ({
children,
}) => {
const outer = useThemeUI()
const [colorMode, setColorMode] = useColorModeState(outer.theme)
const theme = applyColorMode(outer.theme || {}, colorMode)
if (theme.useCustomProperties !== false) {
theme.rawColors = {...theme.colors}
theme.colors = toCustomProperties(theme.colors, 'colors')
}
const context = {
...outer,
theme,
colorMode,
setColorMode,
}
return jsx(EmotionContext.Provider, { value: theme },@theme-ui/core
[](https://bundlephobia.com/package/@theme-ui/core)
