> ## Documentation Index
> Fetch the complete documentation index at: https://sunpeak.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# useTheme

> Get the current color theme.

<Badge color="yellow">sunpeak API</Badge>

## Overview

The `useTheme` hook returns the host's current theme. It is a convenience wrapper around `useHostContext`.

<Card horizontal title="Wraps onhostcontextchanged" icon="cube" href="/mcp-apps/app/event-handlers/onhostcontextchanged">
  MCP Apps SDK reference
</Card>

## Import

```tsx theme={null}
import { useTheme } from 'sunpeak';
```

## Signature

```tsx theme={null}
function useTheme(): McpUiTheme
```

The return type is [`McpUiTheme`](/mcp-apps/types/core-types#mcpuitheme).

## Returns

<ResponseField name="return" type="'light' | 'dark'">
  The current theme. Defaults to `'light'` when unavailable.
</ResponseField>

## Usage

```tsx theme={null}
import { useTheme } from 'sunpeak';

function MyResource() {
  const theme = useTheme();

  return (
    <div className={theme === 'dark' ? 'bg-black text-white' : 'bg-white text-black'}>
      ...
    </div>
  );
}
```