Reflexjs
DocumentationBlocks LibraryGuidesGitHub
/
,

Hooks

The useTheme and useColorMode hooks.


useTheme

To access the context object directly in a component, use the useTheme hook.

import { useTheme } from "reflexjs"
export default function () {
const { theme } = useTheme()
return <p color={theme.colors.primary}>Example</p>
}

useColorMode

Use the useColorMode hook in your application to access the current color mode or to change the color mode.

import React from "react"
import { useColorMode } from "reflexjs"
export default function () {
const [colorMode, setColorMode] = useColorMode()
return (
<header>
<button
onClick={(e) => {
setColorMode(colorMode === "default" ? "dark" : "default")
}}
>
Toggle {colorMode === "default" ? "Dark" : "Light"}
</button>
</header>
)
}
The sx prop

© 2022 Reflexjs

DocumentationBlocks LibraryGuidesGitHub