Guides
Theming
CSS variables for customization
Quick Setup
<CSVImporter
darkMode={true}
primaryColor="#8B5CF6"
/>
CSS Variables
<CSVImporter
customStyles={{
// Typography
'font-family': 'Inter, sans-serif',
'font-size': '14px',
'base-spacing': '1rem',
// Shape
'border-radius': '8px',
// Primary colors
'color-primary': '#3B82F6',
'color-primary-hover': '#2563EB',
// Secondary colors
'color-secondary': '#10B981',
'color-secondary-hover': '#059669',
// Tertiary colors
'color-tertiary': '#8B5CF6',
'color-tertiary-hover': '#7C3AED',
// Text colors
'color-text': '#111827',
'color-text-soft': '#6B7280',
'color-text-on-primary': '#FFFFFF',
'color-text-on-secondary': '#FFFFFF',
// Backgrounds
'color-background': '#FFFFFF',
'color-background-modal': '#F9FAFB',
'color-input-background': '#F3F4F6',
'color-input-background-soft': '#F9FAFB',
'color-background-menu-hover': '#F3F4F6',
// Borders
'color-border': '#E5E7EB',
// Misc
'color-importer-link': '#3B82F6',
'color-progress-bar': '#10B981'
}}
/>
Preset Themes
// Minimal
const minimal = {
'border-radius': '0px',
'color-primary': '#000000',
'color-border': '#000000'
};
// Gradient
const gradient = {
'border-radius': '16px',
'color-primary': '#667EEA',
'color-primary-hover': '#5A67D8',
'color-secondary': '#ED64A6'
};
// Corporate
const corporate = {
'font-family': 'Arial, sans-serif',
'border-radius': '4px',
'color-primary': '#0066CC',
'color-border': '#CCCCCC'
};