Theme

Change the theme of Connect Wallet UI to "light" or "dark" mode, to match the color theme of your app.

The default value is "dark".

import { ConnectWallet } from "@thirdweb-dev/react";

function App() {
  return (
    <ConnectWallet
      theme="dark"
    />
  );
}

You can also create a custom theme by passing an object. To do this, you can use darkTheme or lightTheme functions to use light / dark theme as base and override it

import { darkTheme, lightTheme } from "@thirdweb-dev/react";

<ConnectWallet
  theme={darkTheme({
    fontFamily: "Inter, sans-serif",
    colors: {
      modalBg: "#000000",
      accentText: "red",
      // ... etc
    },
  })}
/>;