Theming

The theme for the AppKit integration in your dApp can be fully customized.

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

The following list shows the theme variables you can override:

Variable	Description	Type
--apkt-font-family	Base font family	string
--apkt-accent	Color used for buttons, icons, labels, etc.	string
--apkt-color-mix	The color that blends in with the default colors	string
--apkt-color-mix-strength	The percentage on how much “—apkt-color-mix” should blend in	number
--apkt-font-size-master	The base pixel size for fonts.	string
--apkt-border-radius-master	The base border radius in pixels.	string
--apkt-z-index	The z-index of the modal.	number