MoneyKit Connect Custom Theming

connect-theming.ts

// Import default moneyui theme from @moneykit/connect.
import MoneyKit, { moneyui, type Theme } from "@moneykit/connect";

// Theming Options:

// Option 1: By default Connect will use the standard moneyui theme. This default behavior is equivalent to:

const moneykitWithDefaultTheme = new MoneyKit({
  theme: moneyui,
});

// - Option 2: Modify the default theme with just the styles you wish to override.
// If you only need to change a few styles, this is your best option.

const tweakedTheme: Theme = {
  ...moneyui,
  colors: {
    ...moneyui.colors,
    accent: "#FF9400",
  }
};

const moneykitWithTweakedTheme = new MoneyKit({
  theme: tweakedTheme,
});

// - Option 3: Create your own complete theme object from scratch using the provided Theme type. 
// Useful when you want an entirely custom theme with control over all values. View the Theme type's
// definition for all available options.
const customTheme: Theme = {
  colors: {
    primaryBackground: {
      light: "#000000",
      dark: "#ffffff",
    },
    primaryForeground: {
      light: "#ffffff",
      dark: "#000000",
    },
    // Remaining colors
  },
  typography: {
    body: {
      size: "16px",
      lineHeight: "22px",
      letterSpacing: "0.01em",
      weight: 400,
    },
    // Remaining typography
  },
  spacing: {
    contentHorizontalInset: "32px",
    buttonHorizontalInset: "24px",
  },
  components: {
    textField: {
      height: "64px",
      borderRadius: "12px",
    },
    // Remaining components
  },
  screens: {
    finder: {
      title: "Select an Institution",
      subtitle: null,
      searchPlaceholder: "Institution Name",
      institutionCellBoxShadow: null,
      institutionCellBorderRadius: "20px",
      institutionCellBorder: {
        light: "1px solid #000000",
        dark: "1px solid #ffffff",
      },
      institutionCellSpacing: "16px",
      institutionCellBackgroundColor: {
        light: "#fff",
        dark: "#212124",
      },
    },
  },
  modal: {
    borderRadius: "26px",
    boxShadow: {
      light: "0px 6px 18px rgba(0, 0, 0, 0.2)",
      dark: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)",
    },
    overlayBackgroundColor: {
      light: "rgba(0, 0, 0, 0.5)",
      dark: "rgba(0, 0, 0, 0.75)",
    },
    overlayBackdropFilter: null,
  },
  popover: {
    borderRadius: "26px",
    boxShadow: {
      light: "0px 0px 80px rgba(0, 0, 0, 0.16)",
      dark: "inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 0 1px black, 0px 6px 18px rgba(0, 0, 0, 0.3)",
    },
  },
};

const moneykitWithCustomTheme = new MoneyKit({
  theme: customTheme,
});