Theming
You are able to theme RatioKit in order to match your webpage
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;
};
};
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