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