Theming

Overview

You can customize the DolphinCSV importer to match your product's color scheme and typography using the Theming feature.

There are 2 ways you can apply a theme to your importer:

1. Create a theme from the dashboard, then apply it in the template details page, in the settings tab.
2. Pass a custom theme object to the DolphinCSV importer SDK.

warning

If your template is configured with a theme, and you pass a custom theme object to the SDK, the theme configured in the template will be ignored.

To pass a custom theme object to the SDK, pass an object to the theme property in the SDK as follows,

React

index.jsx

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

const themeObject = {
  colors: {
    primary: '#3388AA'
  }
  // Other theme properties
}

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

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

      <DolphinCSVImporter
        {/* ...other props */}
        theme={themeObject}
      />
    </>
  )
}

Node

index.js

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

var themeObject = {
  colors: {
    primary: '#3388AA'
  }
  // Other theme properties
}

var importer = DolphinCSVImporter({
  {/* ...other properties */}
  theme: themeObject
})

importer.launch()

Javascript

index.html

<script type="text/javascript">

  const themeObject = {
    colors: {
      primary: '#3388AA'
    }
    // Other theme properties
  }

  var importer = DolphinCSV.DolphinCSVImporter({
    // ...other properties
    theme: themeObject,
  })

  importer.launch()
</script>

Full list of theme options

The full list of theme object properties can be seen below. Use the theme creator to understand more about what each property affects.

type Theme = {
  // Colors need to be passed in as hex codes e.g. '#f123ab'
  colors?: {
    primary?: string;
    primaryText?: string;
    background?: string;
    headingText?: string;
    text?: string;

    border?: string;
    muted?: string;
    mutedForeground?: string;
    subtle?: string;

    danger?: string;
    dangerForeground?: string;

    tableHeaderBg?: string;
    tableHeaderText?: string;
    tableCellBg?: string;
    tableCellText?: string;
    tableGridLine?: string;
    discardedRowsBg?: string;
    discardedRowsForeground?: string;
  }

  // Radius options are passed as a string px value e.g. '4px'
  radius?: {
    button?: string;
    chip?: string;
    dropdown?: string;
  }

  typography?: {
    // Pass in the case-sensitive Google Font font name for heading text e.g. 'Open Sans'
    heading?: string;
    // Pass in the case-sensitive Google Font font name for body text e.g. 'PT Sans'
    body?: string;
    // Pass in either 's', 'm', or 'l'.
    // 's' sets the base font size to 14px, 'm' is the default and sets it to '16px', l sets it to '18px'
    size?: string;
  }
}