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

​
Wallet Buttons

Wallet buttons are components that allow users to connect their wallets to your dApp. They provide a simple and easy way to connect to the top 20 wallets, WalletConnect QR, and all the social logins. You can also call them directly using hooks. Please check the components and hooks documentation for more information.



Try Wallet Buttons

Was this page helpful?