---
title: "useTheme"
description: "Read and write theme state (color, radius, icon set, dark mode) and export CSS variables or configuration code."
canonical_url: "https://nuxt.mhaibaraai.cn/en/docs/composables/use-theme"
---
# useTheme

> Read and write theme state (color, radius, icon set, dark mode) and export CSS variables or configuration code.

## Introduction

`useTheme` exposes the reactive theme state and export methods. It is the underlying logic for the [`ThemePicker`](https://nuxt.mhaibaraai.cn/docs/components/theme-picker) component and can be used to build custom theme panels or read/write theme values in business logic.

## Return Values

```ts
const {
  // Color
  color, primary, primaryColors, neutral, neutralColors,
  blackAsPrimary, setBlackAsPrimary,
  // Radius / Icon / Mode
  radius, radiuses, icon, icons, mode, modes,
  // Injection and state
  style, hasCSSChanges, hasConfigChanges,
  // Export
  exportCSS, exportConfig, resetTheme
} = useTheme()
```

| Group | Members | Description |
| --- | --- | --- |
| Color | `color` / `primary` / `primaryColors` | Primary color and available options |
| Color | `neutral` / `neutralColors` | Neutral color and available options |
| Color | `blackAsPrimary` / `setBlackAsPrimary` | Toggle for using black as the primary color |
| Radius | `radius` / `radiuses` | Current border radius and available presets |
| Icon | `icon` / `icons` | Current icon set and available options |
| Mode | `mode` / `modes` | Dark mode (`light`/`dark`/`system`) and available options |
| Injection | `style` | CSS variables to inject into the page |
| State | `hasCSSChanges` / `hasConfigChanges` | Whether there are changes relative to the defaults |

> [!TIP]
> See: /docs/components/theme-picker
> 
> For a ready-to-use visual theme panel, see the ThemePicker component.


## Sitemap

See the full [sitemap](https://nuxt.mhaibaraai.cn/sitemap.md) for all pages.