---
title: "useTheme"
description: "读写主题状态（颜色、圆角、图标、深色模式）并导出 CSS 变量或配置代码。"
seo_title: "useTheme"
seo_description: "Read and write Movk Nuxt theme state — color, neutral, radius, icon set and dark mode — and export the result as CSS variables or app.config code."
canonical_url: "https://nuxt.mhaibaraai.cn/docs/composables/use-theme"
---
# useTheme

> 读写主题状态（颜色、圆角、图标、深色模式）并导出 CSS 变量或配置代码。

## 简介

`useTheme` 暴露主题的响应式状态与导出方法，是 [`ThemePicker`](/docs/components/theme-picker) 组件的底层逻辑，可用于自定义主题面板或在业务逻辑中读写主题。

## 返回值

```ts
const {
  // 颜色
  color, primary, primaryColors, neutral, neutralColors,
  blackAsPrimary, setBlackAsPrimary,
  // 圆角 / 图标 / 模式
  radius, radiuses, icon, icons, mode, modes,
  // 注入与状态
  style, hasCSSChanges, hasConfigChanges,
  // 导出
  exportCSS, exportConfig, resetTheme
} = useTheme()
```

| 分组  | 成员                                     | 说明                                |
| --- | -------------------------------------- | --------------------------------- |
| 颜色  | `color` / `primary` / `primaryColors`  | 主色及可选项                            |
| 颜色  | `neutral` / `neutralColors`            | 中性色及可选项                           |
| 颜色  | `blackAsPrimary` / `setBlackAsPrimary` | 以黑色作为主色的开关                        |
| 圆角  | `radius` / `radiuses`                  | 当前圆角及可选档位                         |
| 图标  | `icon` / `icons`                       | 当前图标集及可选项                         |
| 模式  | `mode` / `modes`                       | 深色模式（`light`/`dark`/`system`）及可选项 |
| 注入  | `style`                                | 需注入到页面的 CSS 变量                    |
| 状态  | `hasCSSChanges` / `hasConfigChanges`   | 是否有相对默认的改动                        |

> \[\!TIP\]
> See: /docs/components/theme-picker
> 
> 开箱即用的可视化主题面板见 ThemePicker 组件。


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.