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

# useTheme

## Overview

A hook to get the classes for a given key and kwargs. Uses computeds for caching.

If the resolved slot entry declares `composes`, the referenced slots are resolved
first (recursively) and their classes prepended to the result. See the module
description for composition semantics and the meta-key naming convention.

## Signature

`useTheme(componentName, props, context, keyFn)`

### Parameters

| Name | Type | Required | Description |
| --- | --- | --- | --- |
| <span id="param-componentName">componentName</span> | `string` | yes | The name of the component. |
| <span id="param-props">props</span> | [ThemeProps](/v3/reference/api/js/use/useTheme/types/ThemeProps.md) | yes | The reactive or computed props to pass to the class function. |
| <span id="param-context">context</span> | `any` | no | The context to pass if the config or config.class is a function. |
| <span id="param-keyFn">keyFn</span> | `(key: string, kwargs: any) => string` | no | A function to modify a key based on kwargs. |

### Returns

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

A function that returns the classes for a given key and kwargs.

## Source

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