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:

createAppKit({
  //...
  themeMode: "light",
});

themeVariables

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

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:

<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>

Fundamentals

Features

ThemeMode

themeVariables

Nuxt-specific theming

​ThemeMode

​themeVariables

​Nuxt-specific theming

ThemeMode

themeVariables

Nuxt-specific theming