useTheme
useThemeは、テーマを取得したりテーマを切り替えるための関数を返すカスタムフックです。
インポート
import { useTheme } from "@yamada-ui/react"
使い方
編集可能な例
const { theme } = useTheme() return <Text lineClamp={3}>{JSON.stringify(theme)}</Text>
テーマをもっと学びたい場合は、こちらをご覧ください。
テーマを切り替える
編集可能な例
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> </> )
テーマを切り替えるには、複数のテーマを用意する必要があります。詳しくは、こちらをご覧ください。
GitHubでこのページを編集する