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. From frontend (highest priority)

a. Customize your importer by passing the theme option from frontend

// usage example in vanilla JavaScript
var importButton = document.getElementById("import-data-button");
importButton.onclick = function () {
  useCsvPlugin({
    importerKey: "your-importer-key",
    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"
          }
        }
      }
    }
  });
};

2. From the importer settings in the admin panel

a. 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.

b. 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.

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"
      }
    }
  }
}

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"
      }
    }
  }
}