Skip to main content

Theming

You can fully customize the theme for the AppKit integration in your Web3 app. Here are some examples.

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: {
'--w3m-color-mix': '#00BB7F',
'--w3m-color-mix-strength': 40
}
})

The following list shows the theme variables you can override:

VariableDescriptionType
--w3m-font-familyBase font family
string
--w3m-accentColor used for buttons, icons, labels, etc.
string
--w3m-color-mixThe color that blends in with the default colors
string
--w3m-color-mix-strengthThe percentage on how much "--w3m-color-mix" should blend in
number
--w3m-font-size-masterThe base pixel size for fonts.
string
--w3m-border-radius-masterThe base border radius in pixels.
string
--w3m-z-indexThe z-index of the modal.
number