Docs
  • What We Do
  • Supported Countries, Payment Methods, and Cryptocurrencies
  • Getting Started
  • Integration Guides
    • API
      • Required Headers
      • Create a User
      • Assign a Deposit Address
      • KYC
      • Link and Verify a Bank Account
        • Re-link Bank Account
        • Update Bank Account
        • Delete Bank Account
      • Transaction Limits
      • Buy Crypto (ACH)
      • Transaction Monitoring
      • Transaction History
    • React Native
      • Installation
      • Session Token and Wallet Signing
      • Preset Order Details
      • Example
      • Reference
      • Release History
      • User experience
        • Sign up
        • Sign in
        • Buy crypto
        • Settings & activity
    • React JS (Beta)
      • Installation
      • Session Token and Wallet Signing
      • Preset Orders
      • Callbacks
      • Theming
      • Example
      • Reference
      • Release History
  • API Reference
    • Endpoints
      • Auth
        • Crypto Wallet
        • Email OTP
        • SMS OTP
      • Activity
      • Bank
      • Client
      • Config
      • Crypto
      • Users
      • Wallets
      • Webhook Registrations
    • Custom Headers
    • Error Codes
    • Types Glossary
    • Postman
    • Open API Specification
    • Webhooks
  • Design Reference
    • UI/UX Starter kit
    • UI Requirements
  • Guides
    • Sandbox Testing
    • User Authentication
    • Link a new Signing Wallet to an Existing User
    • Plaid Bank Linking
      • Plaid OAuth Support
    • Client Dashboard (Alpha)
  • User Support Reference
    • User Account Flags
      • KYC Review
      • Transaction Processing
      • NSFs and Returned Payments
      • Fraud
    • Transactional Emails
Powered by GitBook
On this page
  • Custom theming
  • Extending the default theme

Was this helpful?

  1. Integration Guides
  2. React JS (Beta)

Theming

You are able to theme RatioKit in order to match your webpage

Custom theming

Here are all the possible values that you can set to theme RatioKit to whatever you would like.

Type
Value type
Example values

colors

string

"#dedbef" or "rgb(222, 219, 239, 1.0)" or other valid CSS color value

fonts

string

"Comic Sans MS, sans-serif"

fontWeights

number

400 or 700 or other valid CSS font weight value

fontSizes

number or string

12 or "12px" or "1rem" or other valid CSS size value

lineHeights

number or string

1.5 or "150%" or other valid CSS value

radii

number or string

4 or "4px" or other valid CSS value

sizes

number or string

4 or "4px" or other valid CSS value

borderWidths

number or string

4 or "4px" or other valid CSS value

borderStyles

string

"solid" or "dashed" or other valid CSS value

shadows

string

"none" or "0 0 0 2px #ff0000" or other valid CSS value

export type RatioTheme = {
  colors: {
    buyWithRatioButtonText: string;
    buyWithRatioButtonBackground: string;
    buyWithRatioButtonHoverText: string;
    buyWithRatioButtonActiveText: string;
    buyWithRatioButtonActiveBackground: string;
    buyWithRatioButtonHoverBackground: string;
    buyWithRatioButtonDisabledBackground: string;
    buyWithRatioButtonDisabledText: string;
    buyWithRatioButtonDisabledBorder: string;

    ratioButtonText: string;
    ratioButtonHoverText: string;
    ratioButtonActiveText: string;
    ratioButtonBackground: string;
    ratioButtonActiveBackground: string;
    ratioButtonHoverBackground: string;
    ratioButtonDisabledBackground: string;
    ratioButtonDisabledText: string;
    ratioButtonDisabledBorder: string;

    ratioSecondaryButtonText: string;
    ratioSecondaryButtonBackground: string;
    ratioSecondaryButtonHoverText: string;
    ratioSecondaryButtonActiveText: string;
    ratioSecondaryButtonActiveBackground: string;
    ratioSecondaryButtonHoverBackground: string;
    ratioSecondaryButtonBorder: string;

    ratioPageHeaderText: string;
    ratioDialogBackground: string;
    ratioBodyText: string;
    ratioErrorText: string;
    ratioInputFieldBackground: string;
    ratioInputFieldText: string;
    ratioInputFieldPlaceholderText: string;
    ratioInputFieldBorder: string;
    ratioInputFieldDisabledBackground: string;
    ratioLinkText: string;
    ratioLinkHoverText: string;
    ratioLinkActiveText: string;
    ratioBuyCryptoInfoMessageBackground: string;
    ratioBuyCryptoInfoMessageWarningBackground: string;
    ratioBuyCryptoInfoMessageErrorBackground: string;
    ratioBuyCryptoInfoMessageText: string;
    ratioMutedText: string;

    ratioFeeBadgeText: string;
    ratioFeeBadgeBackground: string;

    ratioInstantInformationBackground: string;

    ratioToggleOffBackground: string;
    ratioToggleOnBackground: string;
    ratioToggleSwitchBackground: string;
    ratioToggleSwitchBorder: string;

    ratioCheckBoxBackground: string;
    ratioCheckboxBorder: string;
    ratioCheckboxCheck: string;
    ratioCheckboxFocusedBorder: string;

    ratioDisclaimerBoxBackground: string;
    ratioDisclaimerBoxText: string;

    ratioScrollBarThumb: string;
    ratioScrollBarTrack: string;

    ratioSuccessCardBackground: string;
    ratioSuccessCardText: string;
  };
  fonts: {
    buyWithRatioButtonText: string;
    ratioButtonText: string;
    header: string;
    smallHeader: string;
    body: string;
    tinyBody: string;
    inputButton: string;
    inputField: string;
    textLink: string;
  };
  fontWeights: {
    buyWithRatioButtonText: number;
    ratioButtonText: number;
    header: number;
    smallHeader: number;
    body: number;
    tinyBody: number;
    inputButton: number;
    inputField: number;
    textLink: number;
  };
  fontSizes: {
    buyWithRatioButtonText: number | string;
    ratioButtonText: number | string;
    header: number | string;
    smallHeader: number | string;
    body: number | string;
    tinyBody: number | string;
    inputButton: number | string;
    inputField: number | string;
    textLink: number | string;
  };
  lineHeights: {
    buyWithRatioButtonText: number | string;
    ratioButtonText: number | string;
    header: number | string;
    smallHeader: number | string;
    body: number | string;
    tinyBody: number | string;
    inputButton: number | string;
    inputField: number | string;
    textLink: number | string;
  };
  radii: {
    buyWithRatioButtonRadius: number | string;
    ratioButtonBorderRadius: number | string;
    ratioDialogBorderRadius: number | string;
    ratioInputFieldBorderRadius: number | string;
    ratioFeeBadgeBorderRadius: number | string;
    ratioInstantInformationBorderRadius: number | string;
    ratioCheckboxBorderRadius: number | string;
    ratioDisclaimerBoxBorderRadius: number | string;
    ratioSuccessCardBorderRadius: number | string;
  };
  sizes: {
    buyWithRatioButtonHeight: number | string;
    ratioButtonHeight: number | string;
    ratioInputFieldHeight: number | string;
  };
  borderWidths: {
    buyWithRatioButtonDisabledBorderWidth: number | string;
    ratioButtonDisabledBorderWidth: number | string;
    ratioInputFieldBorderWidth: number | string;
    ratioToggleSwitchBorderWidth: number | string;
    ratioCheckboxBorderWidth: number | string;
    ratioSecondaryButtonBorderWidth: number | string;
  };
  borderStyles: {
    buyWithRatioButtonDisabledBorderStyle: string;
    ratioButtonDisabledBorderStyle: string;
    ratioInputFieldBorderStyle: string;
    ratioToggleSwitchBorderStyle: string;
    ratioCheckboxBorderStyle: string;
    ratioSecondaryButtonBorderStyle: string;
  };
  shadows: {
    ratioInputFieldBoxShadow: string;
    ratioInputFieldBoxShadowFocus: string;
    ratioInputFieldBoxShadowDisabled: string;
  };
};

Extending the default theme

You do not have to set every value listed above. You are able to pass in a small subset of the values and the default values will be used for the rest.

Example:

<RatioButton theme={{
  colors: {
    ratioDialogBackground: "#dedbef"
  }
}}/>
PreviousCallbacksNextExample

Last updated 1 year ago

Was this helpful?