---
title: useTheme
description: "`useTheme`は、テーマを取得したりテーマを切り替えるための関数を返すカスタムフックです。"
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-theme
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-usetheme--basic
---

```tsx
const { theme } = useTheme()

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

## 使い方

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

```tsx
import { useTheme } from "@/components/ui"
```

```tsx
import { useTheme } from "@workspaces/ui"
```

```tsx
const { themeScheme, changeThemeScheme } = useTheme()
```

:::note
テーマについて詳しくは、[こちら](https://yamada-ui.com/docs/theming.md)をご覧ください。
:::

### テーマを切り替える

```tsx
const { themeScheme, changeThemeScheme } = useTheme()

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

    <Wrap gap="md" alignItems="center">
      <Badge colorScheme="primary">Primary</Badge>
      <Badge colorScheme="secondary">Secondary</Badge>
      <Tag colorScheme="primary">Primary</Tag>
      <Tag colorScheme="secondary">Secondary</Tag>
    </Wrap>

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

      <Button colorScheme="red" onClick={() => changeThemeScheme("red")}>
        Red Theme
      </Button>

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

      <Button colorScheme="blue" onClick={() => changeThemeScheme("blue")}>
        Blue Theme
      </Button>
    </Wrap>
  </VStack>
)
```

:::warning
テーマを切り替えるには、複数のテーマを用意する必要があります。詳しくは、[こちら](https://yamada-ui.com/docs/theming/switching-themes.md)をご覧ください。
:::