Skip to Content
On this page

This guide shows you how to make the SDK’s wallet UI match your app.

Change the Colors#

Set theme.themes.light.colors and theme.themes.dark.colors. Supply only the colors you want to change; the SDK keeps its defaults for the rest.

import type { WalletConnectKitConfig } from "@dogeos/dogeos-sdk"
 
const dogeConfig: WalletConnectKitConfig = {
  clientId: "YOUR_DOGEOS_CLIENT_ID",
  theme: {
    defaultTheme: "dark",
    themes: {
      light: { colors: { primary: { DEFAULT: "#fcd436" } } },
      dark: { colors: { primary: { DEFAULT: "#fcd436" }, background: "#0d0d0d" } },
    },
  },
}

See ThemeConfig for the color keys and the SDK’s defaults.

Follow Your App’s Light or Dark Mode#

Set theme.defaultTheme to "light" or "dark" from your app’s current mode, and update it when the mode changes. The SDK passes the mode on to the embedded wallet too.

"use client"
 
import { useMemo, type ReactNode } from "react"
import { WalletConnectProvider, type WalletConnectKitConfig } from "@dogeos/dogeos-sdk"
 
export function DogeOSProvider({ mode, children }: { mode: "light" | "dark"; children: ReactNode }) {
  const dogeConfig = useMemo<WalletConnectKitConfig>(
    () => ({ clientId: "YOUR_DOGEOS_CLIENT_ID", theme: { defaultTheme: mode } }),
    [mode]
  )
 
  return <WalletConnectProvider config={dogeConfig}>{children}</WalletConnectProvider>
}

Fit the Wallet Into Your Layout#

Size and place WalletConnectEmbed with its className and style props; see Show the Wallet Inline. Don’t target the SDK’s internal class names, because they can change in any release.

The SDK demo  shows a theme toggle and an inline wallet panel.