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>
}
 
Copy

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>
  )
}
 
Copy