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