Theming

You can customize the primary color of the DolphinCSV importer to match your product color scheme. To do this, pass the theme argument to your DolphinCSV importer SDK.

For now, the only color you can pass to the theme argument is the primary color. All other colors will be derived from the primary color. We will be adding more theming options soon!

React

index.jsx

import { useState } from "react";
import { DolphinCSVImporter } from "@dolphincsv/react-csv-importer";

function MyComponent() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Open Importer</button>

      <DolphinCSVImporter
        {/* ...other props */}
        theme={{
          colors: {
            primary: '#3388AA'
          }
        }}
      />
    </>
  )
}

Node

index.js

import { DolphinCSVImporter } from "@dolphincsv/csv-importer-js";

var importer = DolphinCSVImporter({
  {/* ...other properties */}
  theme: {
    colors: {
      primary: '#3388AA'
    }
  }
})

importer.launch()

Javascript

index.html

<script type="text/javascript">
  var importer = DolphinCSV.DolphinCSVImporter({
    // ...other properties
    theme: {
      colors: {
        primary: '#3388AA'
      }
    }
  })

  importer.launch()
</script>