Docs
Search
K

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"
}
}}/>
Last modified 2mo ago