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

# useTheme

> Hook to access and modify theme and modal position settings.

## Import

```tsx theme={null}
import { useTheme } from '@0xsequence/connect'
```

## Usage

```tsx theme={null}
import { useTheme } from '@0xsequence/connect'

function App() {
  const { theme, setTheme, position, setPosition } = useTheme()

  return (
    <div>
      <div>
        <h3>Theme Settings</h3>
        <button onClick={() => setTheme('light')}>Light Mode</button>
        <button onClick={() => setTheme('dark')}>Dark Mode</button>
      </div>

      <div>
        <h3>Modal Position</h3>
        <select
          value={position}
          onChange={(e) => setPosition(e.target.value)}
        >
          <option value="center">Center</option>
          <option value="top-right">Top Right</option>
          <option value="top-left">Top Left</option>
          <option value="bottom-right">Bottom Right</option>
          <option value="bottom-left">Bottom Left</option>
        </select>
      </div>
    </div>
  )
}
```

## Return Type

```tsx theme={null}
interface ThemeHookReturn {
  theme: 'light' | 'dark'
  setTheme: (theme: 'light' | 'dark') => void
  position: ModalPosition
  setPosition: (position: ModalPosition) => void
}

type ModalPosition =
  | 'center'
  | 'top-right'
  | 'top-left'
  | 'bottom-right'
  | 'bottom-left'
```

| Property      | Type                                 | Description                           |
| ------------- | ------------------------------------ | ------------------------------------- |
| `theme`       | `'light' \| 'dark'`                  | The current theme.                    |
| `setTheme`    | `(theme: 'light' \| 'dark') => void` | Sets the theme to light or dark mode. |
| `position`    | `ModalPosition`                      | The current modal placement.          |
| `setPosition` | `(position: ModalPosition) => void`  | Changes the modal position on screen. |