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.

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

Last updated