Wafer Connect

Themes

Wafer is highly customizable. You can create simple or complex themes to match your branding.

The themes can be customized in the following way:

<script>
  import { configureChains, createConfig } from "@wagmi/core";
  import { mainnet } from "@wagmi/core/chains";
  import { publicProvider } from "@wagmi/core/providers/public";
  import ConnectButton, {
      dark,
      getDefaultConnectors,
  } from "wafer-connect";

  const { chains, publicClient } = configureChains(
    [mainnet],
    [publicProvider()]
  );

  const { connectors, wallets } = getDefaultConnectors({
    appName: "example",
    projectId: "...",
    chains,
  });

  createConfig({ connectors, publicClient });

  const theme =  {
      ...dark,
      "--wafer-button-background-color": "rgb(69, 19, 91)",
      "--wafer-button-hover-color": "rgb(69, 30, 111)",
      "--wafer-secondary-button-background-color": "rgb(0, 0, 91)",
      "--wafer-secondary-button-hover-color": "rgb(0, 0, 111)",
      "--wafer-dialog-background-color": "rgba(69, 30, 111, 0.8)",
      "--wafer-menu-background-color": "rgb(69, 30, 111)",
    };
</script>

<header>
  <div />
  <ConnectButton {chains} {theme} {connectors} {wallets} />
</header>

<style>
  header {
    display: flex;
    justify-content: space-between;
    padding: 8px;
  }
</style>

The complete list of customizable theme options.

{
  "--wafer-avatar-radius": string;
  "--wafer-border-radius": string;
  "--wafer-button-height": string;
  "--wafer-button-z-index": string;
  "--wafer-dialog-width": string;
  "--wafer-dialog-blur": string;
  "--wafer-error-height": string;
  "--wafer-secondary-button-height": string;
  "--wafer-button-background-color": string;
  "--wafer-button-text-color": string;
  "--wafer-button-hover-color": string;
  "--wafer-button-border": string;
  "--wafer-secondary-button-background-color": string;
  "--wafer-secondary-button-text-color": string;
  "--wafer-secondary-button-hover-color": string;
  "--wafer-secondary-button-border": string;
  "--wafer-error-background-color": string;
  "--wafer-error-hover-color": string;
  "--wafer-error-text-color": string;
  "--wafer-dialog-background-color": string;
  "--wafer-dialog-text-color": string;
  "--wafer-menu-background-color": string;
  "--wafer-menu-text-color": string;
  "--wafer-color-scheme": string;
}