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

# Theming

The theme for the AppKit integration in your dApp can be fully customized.

## ThemeMode

By default `themeMode` option will be set to user system settings 'light' or 'dark'. But you can override it like this:

```ts theme={null}
createAppKit({
  //...
  themeMode: "light",
});
```

## themeVariables

By default `themeVariables` are undefined. You can set them like this:

```ts theme={null}
createAppKit({
  //...
  themeVariables: {
    "--apkt-color-mix": "#00BB7F",
    "--apkt-color-mix-strength": 40,
  },
});
```

The following list shows the theme variables you can override:

| Variable                      | Description                                                   | Type     |
| ----------------------------- | ------------------------------------------------------------- | -------- |
| `--apkt-font-family`          | Base font family                                              | `string` |
| `--apkt-accent`               | Color used for buttons, icons, labels, etc.                   | `string` |
| `--apkt-color-mix`            | The color that blends in with the default colors              | `string` |
| `--apkt-color-mix-strength`   | The percentage on how much "--apkt-color-mix" should blend in | `number` |
| `--apkt-font-size-master`     | The base pixel size for fonts.                                | `string` |
| `--apkt-border-radius-master` | The base border radius in pixels.                             | `string` |
| `--apkt-z-index`              | The z-index of the modal.                                     | `number` |

## Nuxt-specific theming

When working with theming in Nuxt, you can use the `useAppKitTheme` composable within `<client-only>` components:

```javascript theme={null}
<script setup lang="ts">
import { useAppKitTheme } from '@reown/appkit/vue'

const { setThemeMode, setThemeVariables } = useAppKitTheme()

function toggleTheme() {
  setThemeMode('dark')
}
</script>

<template>
  <client-only>
    <button @click="toggleTheme">Toggle Dark Mode</button>
  </client-only>
</template>
```