Skip to main content

Theming

ThemeMode​

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

createWeb3Modal({
//...
themeMode: 'light'
})

themeVariables​

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

createWeb3Modal({
//...
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 familystring
--w3m-accentColor used for buttons, icons, labels, etc.string
--w3m-color-mixThe color that blends in with the default colorsstring
--w3m-color-mix-strengthThe percentage on how much "--w3m-color-mix" should blend innumber
--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