---
url: "https://vueda.dev/v3/reference/api/js/use/useTheme.md"
title: "use/useTheme"
---

# use/useTheme

## Overview

Resolves and caches component theme classes from the base theme, project overrides, and inherited and local overrides.

Slot entries may declare `composes: ['_MetaKey.slot', ...]` to compose classes from other entries before
their own classes. Underscore-prefixed entries (`_ButtonBase`, `_ButtonGhost`, etc.) are the convention
for shared scaffolding consumed by visually-related leaf components. Composition is resolved at lookup
time against the merged override theme, so `setTheme`, `overrideTheme`, or `useThemeOverride` on a meta key propagates to
every leaf that composes from it. Override semantics for `composes` are replace (override list wins
entirely); own `class` values still combine default + override as in non-composing entries.

## Properties

### THEME_OVERRIDE_PROPS {#THEME_OVERRIDE_PROPS}

Vue component props definition for components that accept a theme override prop.
Spread into component options to allow callers to supply a partial theme object that
is merged with the component's default theme.

@vueda-spread props

Type: `object`

Source: `client/lib/use/useTheme.js:43`

## Methods

- [useTheme](/v3/reference/api/js/use/useTheme/functions/useTheme.md) - A hook to get the classes for a given key and kwargs.
- [useThemeOverride](/v3/reference/api/js/use/useTheme/functions/useThemeOverride.md) - Merge a theme object with another theme object and provide the result for child components.

## Types

### [clearThemeOverrides](/v3/reference/api/js/use/useTheme/types/clearThemeOverrides.md)

### [getTheme](/v3/reference/api/js/use/useTheme/types/getTheme.md)

### [mergeTheme](/v3/reference/api/js/use/useTheme/types/mergeTheme.md)

### [overrideTheme](/v3/reference/api/js/use/useTheme/types/overrideTheme.md)

### [patchTheme](/v3/reference/api/js/use/useTheme/types/patchTheme.md)

### [setClassMerger](/v3/reference/api/js/use/useTheme/types/setClassMerger.md)

### [setTheme](/v3/reference/api/js/use/useTheme/types/setTheme.md)

### [CombinedClassesArgument](/v3/reference/api/js/use/useTheme/types/CombinedClassesArgument.md)

`CombinedClassesArgument = string | string[] | string[][] | object | Ref | Ref | UnwrapNestedRefs`

### [ComponentTheme](/v3/reference/api/js/use/useTheme/types/ComponentTheme.md)

`ComponentTheme = object`

### [ThemeObject](/v3/reference/api/js/use/useTheme/types/ThemeObject.md)

`ThemeObject = object`

### [ThemeProps](/v3/reference/api/js/use/useTheme/types/ThemeProps.md)

`ThemeProps = UnwrapNestedRefs | ComputedRef`

### [ThemeRawProps](/v3/reference/api/js/use/useTheme/types/ThemeRawProps.md)

| Name | Type | Description |
| --- | --- | --- |
| themeOverride | ThemeObject |  |

### [UseThemeReturnFunction](/v3/reference/api/js/use/useTheme/types/UseThemeReturnFunction.md)

`UseThemeReturnFunction = (key: string, kwargs: UnwrapNestedRefs) => string & object`

## Source

`client/lib/use/useTheme.js:1`