You can change how Shippo Shipping Elements looks in your site using the theme parameter when calling the init method.
Here are all supported theme values:
export interface Theme {
elementId?: string;
title?: string;
style?: string;
height?: string;
width?: string;
primaryColor?: string;
container?: {
backgroundColor?: string;
};
header?: {
backgroundColor?: string;
borderColor?: string;
color?: string;
hasBoxShadow?: boolean;
textAlign?: 'left' | 'right' | 'center';
};
footer?: {
backgroundColor?: string;
borderColor?: string;
hasBoxShadow?: boolean;
};
button?: {
primary: {
backgroundColor?: string;
activeBackgroundColor?: string;
hoverColor?: string;
color?: string;
borderRadius?: string;
borderColor?: string;
activeBorderColor?: string;
textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
disabledBackgroundColor?: string;
disabledBorderColor?: string;
disabledTextColor?: string;
};
secondary?: {
backgroundColor?: string;
activeBackgroundColor?: string;
color?: string;
borderRadius?: string;
borderColor?: string;
activeBorderColor?: string;
textTransform?: 'lowercase' | 'uppercase' | 'capitalize';
disabledBackgroundColor?: string;
disabledBorderColor?: string;
disabledTextColor?: string;
};
};
cards?: {
subHeaderColor?: string;
backgroundColor?: string;
borderRadius?: string;
borderColor?: string;
borderStyle?: string;
hoverBackgroundColor?: string;
activeBackgroundColor?: string;
};
inputs?: {
borderColor?: string;
borderActive?: string;
hoverColor?: string;
};
menu?: {
titleBackgroundColor?: string;
hoverColor?: string;
hoverBackgroundColor?: string;
};
}