Customization

info

Customization is a premium feature. Contact team@marblewallet.com to request access.

If you're interested in our fully white label solution, please reach out. The docs do not cover that section yet.

Marble SDK offers support for customizing the look and feel of the pre-built components.

Enabling customization

To enable customization, you just need to pass the customConfig object to the Marble constructor:

import { MarbleCustomConfig, MarbleStyleConfig } from "@marblexyz/common";
const customConfig: MarbleCustomConfig = {
  appName?: string;
  appLogoUrl?: string;
  style?: MarbleStyleConfig;
}

// Email team@marblewallet.com to get a client key
const marble = new Marble("<MARBLE_CLIENT_KEY>", {
  customConfig,
});

tip

Choosing a good appName and appLogoUrl is important. They will be displayed in the Marble Wallet UI.

note

Marble will show a "Powered by Marble" logo in the bottom right corner of the screen. If you want to remove it, please contact us at team@marblewallet.com to request access.

Style Customization

Marble also enables developers to programmatically customize the style of the MarbleStyleConfig object:

import { MarbleStyleConfig } from "@marblexyz/common";

const styleConfig: MarbleStyleConfig = {
  // Modal
  modalBorder?: string;
  dividerColor?: string;
  backgroundColor?: string;
  // Typography
  textColor?: string;
  secondaryTextColor?: string;
  errorTextColor?: string;
  infoTextColor?: string;
  // Accent
  primaryAccentColor?: string;
  secondaryAccentColor?: string;
  // Input
  inputTextColor?: string;
  inputBorderColor?: string;
  inputBackgroundColor?: string;
  inputPlaceholderColor?: string;
  inputFocusBorderColor?: string;
  inputErrorBorderColor?: string;
  // Primary Action Button
  primaryActionColor?: string;
  primaryActionBorderColor?: string;
  primaryActionColorHover?: string;
  primaryActionColorActive?: string;
  primaryActionTextColor?: string;
  // Secondary Action Button
  secondaryActionColor?: string;
  secondaryActionBorderColor?: string;
  secondaryActionColorHover?: string;
  secondaryActionColorActive?: string;
  secondaryActionTextColor?: string;
  // Icon Button
  iconButtonColor?: string;
  iconButtonColorHover?: string;
  iconbuttonBorderColor?: string;
  iconButtonColorActive?: string;
  iconButtonTextColor?: string;
  // Select
  selectBorderColor?: string;
  selectFocusBorderColor?: string;
  selectErrorBorderColor?: string;
  selectBackgroundColor?: string;
  selectTextColor?: string;
  // Ghost button
  ghostButtonColor?: string;
  ghostButtonColorHover?: string;
  ghostButtonColorActive?: string;
  ghostButtonBorderColor?: string;
  ghostButtonTextColor?: string;

  // Panel specific styles
  loginPanel?: {
    descriptionText?: string;
    showDescriptionText?: boolean;
  };
  signupPanel?: {
    descriptionText?: string;
    showDescriptionText?: boolean;
  };
  // Menu
  menu?: {
    color?: string;
    borderColor?: string;
    focusBorderColor?: string;
    errorBorderColor?: string;
    backgroundColor?: string;
  };
};

Customization roadmap

In the future, we plan to support more customization features, including:

• Component positioning.
• Change / hide certain types of labels.
• Typography.
• Adding / changing icons (buttons, close modal icon type).
• Sizing on width and height.

note

Do you need customization that goes beyond what is currently shown above or are in need of more flexibility? Email us at team@marblewallet.com and tell us more!