---
title: useTheme
description: "`useTheme` is a custom hook that returns a function for retrieving and switching themes."
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>
```

## Usage

```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
For more information about themes, please see [here](https://yamada-ui.com/docs/theming.md).
:::

### Switching Themes

```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
In order to switch themes, you need to prepare multiple themes. For more details, please check [here](https://yamada-ui.com/docs/theming/switching-themes.md).
:::