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.

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"
  }
}}/>

Last updated