useTheme

useTheme is a custom hook that returns a function for retrieving and switching themes.

Import

import { useTheme } from "@yamada-ui/react"

Copied!

Usage

Editable example

const { theme } = useTheme()

return <Text lineClamp={3}>{JSON.stringify(theme)}</Text>

Copied!

If you want to learn more about the theme, please check here.

Switching Themes

Editable example

const { themeScheme, changeThemeScheme } = useTheme()

return (
  <>
    <Text>The current scheme is "{themeScheme}"</Text>

    <Wrap mt="md" gap="md">
      <Button onClick={() => changeThemeScheme("base")}>Base Theme</Button>

      <Button colorScheme="pink" onClick={() => changeThemeScheme("pink")}>
        Pink Theme
      </Button>

      <Button colorScheme="purple" onClick={() => changeThemeScheme("purple")}>
        Purple Theme
      </Button>

      <Button colorScheme="green" onClick={() => changeThemeScheme("green")}>
        Green Theme
      </Button>
    </Wrap>
  </>
)

Copied!

In order to switch themes, you need to prepare multiple themes. For more details, please check here.

Edit this page on GitHub

PrevioususeSnacks NextuseTimeout