Skip to main content

Theme Your Importer

Upgrade to the Scale plan to theme your Importer with custom colors and styles.

You can customize your importer by two ways

1. Customize your importer by editing the theme JSON object

You can edit each CSS property in the Customize Theme modal, Save and check the Importer preview to view your changes.

Edit theme modal

2. Customize your importer by pasting an existing theme JSON object

In case you already have an existing theme or if you prefer to copy the default theme JSON object, edit it and paste it in the textarea input in the Customize Theme modal, Save and check the Importer preview to view your changes.

Paste Existing theme modal
tip

Use the same CSS properties in the default theme if you are pasting an existing theme JSON object.

Example custom theme

{
"global": {
"backgroundColor": "#212327",
"primaryTextColor": "#c2c3c3",
"secondaryTextColor": "#ffffff",
"successColor": "#c2c3c3",
"warningColor": "#c2c3c3"
},
"buttons": {
"primary": {
"backgroundColor": "#00D1AF",
"color": "#002d3d",
"border": "1px solid transparent",
"borderRadius": "1px",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
":hover": {
"backgroundColor": "#00D1AF",
"color": "#002d3d"
}
},
"secondary": {
"backgroundColor": "#d9ccff",
"border": "1px solid #ece6ff",
"color": "#002d3d",
"borderRadius": "1px",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
":hover": {
"backgroundColor": "#794cff",
"color": "#c2c3c3"
}
}
}
}
Custom Theme, Getting Started Step
Custom Theme, Upload File Step
tip

CSS accepted color values are: Hexadecimal colors, RGB colors and RGBA colors.

UseCSV Default Theme

{
"global": {
"backgroundColor": "#FFFFFF",
"primaryTextColor": "#3182CE",
"secondaryTextColor": "#A0AEC0",
"successColor": "#38A169",
"warningColor": "#C53030"
},
"buttons": {
"primary": {
"backgroundColor": "#3182CE",
"color": "#FFFFFF",
"border": "none",
"borderRadius": "0.375rem",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
":hover": {
"backgroundColor": "#2f679c",
"color": "#FFFFFF"
}
},
"secondary": {
"backgroundColor": "#FFFFFF",
"color": "#214464",
"border": "1px solid #EDF2F7",
"borderRadius": "0.375rem",
"boxShadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
":hover": {
"backgroundColor": "#F7FAFC",
"color": "#214464"
}
}
}
}
Default Theme, Getting Started Step
Default Theme, Upload File Step