Skip to main content

Theming

The theme for the AppKit integration in your dApp can be fully customized. Below 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