Theming and Styling

The Reeflow SDK provides a flexible theming system that allows you to customize the appearance of all components. You can use built-in themes, create custom themes, or apply CSS customizations.

Built-in themes

The SDK includes two professionally designed themes:

Default

A warm, modern theme with earthy tones and subtle contrast.

<reeflow-provider auth-token="your-token" theme="default">
  <!-- components -->
</reeflow-provider>

The default theme features:

• Warm terracotta primary color (#c96442)
• Soft beige secondary and accent tones
• Professional and approachable aesthetic
• Suitable for most business applications

Ocean

A calming theme inspired by aquatic blues and teals.

<reeflow-provider auth-token="your-token" theme="ocean">
  <!-- components -->
</reeflow-provider>

The ocean theme features:

• Cool blues and cyan tones
• Serene, calming aesthetic
• Marine-inspired color palette
• Ideal for data-focused dashboards

Theme modes

All themes support three color scheme modes:

Auto (default)

Automatically adapts to the user’s system preference:

<reeflow-provider auth-token="your-token" theme-mode="auto">
  <!-- components -->
</reeflow-provider>

The SDK detects the user’s operating system preference (light or dark mode) and applies the appropriate color scheme automatically.

Light

Forces light mode regardless of system preference:

<reeflow-provider auth-token="your-token" theme-mode="light">
  <!-- components -->
</reeflow-provider>

Dark

Forces dark mode regardless of system preference:

<reeflow-provider auth-token="your-token" theme-mode="dark">
  <!-- components -->
</reeflow-provider>

Component-level theming

While the Provider component sets the default theme for all children, individual components can override the theme:

<reeflow-provider auth-token="your-token" theme="default">
  <!-- Uses default theme -->
  <reeflow-bar-chart>...</reeflow-bar-chart>

  <!-- Overrides with ocean theme -->
  <reeflow-table theme="ocean">...</reeflow-table>

  <!-- Overrides with ocean theme in dark mode -->
  <reeflow-line-chart theme="ocean" theme-mode="dark">
    ...
  </reeflow-line-chart>
</reeflow-provider>

This allows for maximum flexibility when mixing components with different visual styles.

Dynamic theme switching

You can change themes at runtime programmatically:

React

Using React state to control the theme:

import { useState } from 'react';
import { ReeflowProvider } from '@reeflow/react';

function Dashboard() {
  const [theme, setTheme] = useState('default');
  const [themeMode, setThemeMode] = useState<'auto' | 'light' | 'dark'>('auto');

  return (
    <>
      <select value={theme} onChange={(e) => setTheme(e.target.value)}>
        <option value="default">Default</option>
        <option value="ocean">Ocean</option>
      </select>

      <select value={themeMode} onChange={(e) => setThemeMode(e.target.value as any)}>
        <option value="auto">Auto</option>
        <option value="light">Light</option>
        <option value="dark">Dark</option>
      </select>

      <ReeflowProvider authToken="your-token" theme={theme} themeMode={themeMode}>
        {/* Your dashboard components */}
      </ReeflowProvider>
    </>
  );
}

Vanilla JS / HTML

Using JavaScript to access the provider element:

const provider = document.querySelector('reeflow-provider');

// Change theme
provider.theme = 'ocean';

// Change theme mode
provider.themeMode = 'dark';

Example: Theme switcher UI

<select id="theme-selector">
  <option value="default">Default</option>
  <option value="ocean">Ocean</option>
</select>

<select id="mode-selector">
  <option value="auto">Auto</option>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

<script>
  const provider = document.querySelector('reeflow-provider');

  document.getElementById('theme-selector').addEventListener('change', (e) => {
    provider.theme = e.target.value;
  });

  document.getElementById('mode-selector').addEventListener('change', (e) => {
    provider.themeMode = e.target.value;
  });
</script>

CSS customization

For fine-grained control over component appearance, use CSS custom properties (CSS variables) and CSS Parts.

CSS variables

CSS variables are the primary way to customize the SDK’s appearance. All components use these variables for colors, spacing, typography, and other visual properties.

Background Colors

Variable	Description	Default (Light)
--reeflow-bg-primary	Primary background color for main areas	#ffffff
--reeflow-bg-secondary	Secondary background for headers and sections	#f8fafc
--reeflow-bg-hover	Background color for hover states	#f8fafc

Text Colors

Variable	Description	Default (Light)
--reeflow-text-primary	Primary text color for main content	#374151
--reeflow-text-secondary	Secondary text for less prominent content	#6b7280
--reeflow-text-error	Text color for error messages	#dc2626

Border Colors

Variable	Description	Default (Light)
--reeflow-border-color	Border color for all components	#e2e8f0

Accent Colors

Variable	Description	Default (Light)
--reeflow-accent-primary	Primary accent for interactive elements	#3b82f6
--reeflow-accent-primary-hover	Accent color for hover states	#2563eb

Chart Colors

Variable	Description	Default (Light)
--reeflow-chart-color-1	First data series color	#3b82f6 (blue)
--reeflow-chart-color-2	Second data series color	#8b5cf6 (purple)
--reeflow-chart-color-3	Third data series color	#ec4899 (pink)
--reeflow-chart-color-4	Fourth data series color	#f59e0b (amber)
--reeflow-chart-color-5	Fifth data series color	#10b981 (green)
--reeflow-chart-color-6	Sixth data series color	#06b6d4 (cyan)
--reeflow-chart-color-7	Seventh data series color	#f43f5e (rose)
--reeflow-chart-color-8	Eighth data series color	#6366f1 (indigo)
--reeflow-chart-grid-color	Chart grid line color	#e5e7eb
--reeflow-chart-axis-color	Chart axis line and label color	#9ca3af
--reeflow-chart-text-color	Chart text elements	#374151
--reeflow-chart-tooltip-bg	Tooltip background color	#ffffff
--reeflow-chart-tooltip-border	Tooltip border color	#e5e7eb
--reeflow-chart-tooltip-text	Tooltip text color	#374151

Spacing & Layout

Variable	Description	Default
--reeflow-border-radius	Standard border radius for containers	8px
--reeflow-border-radius-sm	Small border radius for buttons	4px

Animation

Variable	Description	Default
--reeflow-transition	Standard transition timing	all 0.2s ease-in-out

Usage Examples

Override variables for a single component:

reeflow-table {
  --reeflow-bg-primary: #f5f5f5;
  --reeflow-text-primary: #000000;
  --reeflow-accent-primary: #ff6600;
  --reeflow-border-radius: 12px;
}

Define custom variables globally for consistency:

:root {
  --reeflow-accent-primary: #0066cc;
  --reeflow-border-color: #e0e0e0;
  --reeflow-border-radius: 8px;
}

Customize chart colors:

reeflow-bar-chart {
  --reeflow-chart-color-1: #ff6b6b;
  --reeflow-chart-color-2: #4ecdc4;
  --reeflow-chart-color-3: #45b7d1;
  --reeflow-chart-grid-color: #f0f0f0;
  --reeflow-chart-tooltip-bg: #1a1a1a;
  --reeflow-chart-tooltip-text: #ffffff;
}

Apply brand colors across multiple components:

:root {
  --reeflow-accent-primary: #7c3aed;
  --reeflow-accent-primary-hover: #6d28d9;
  --reeflow-chart-color-1: #7c3aed;
  --reeflow-chart-color-2: #06b6d4;
  --reeflow-chart-color-3: #f59e0b;
}

reeflow-table::part(container),
reeflow-bar-chart::part(container) {
  border: 1px solid var(--reeflow-border-color);
  border-radius: var(--reeflow-border-radius);
}

Tip

All themes override these variables with their own color palettes. When you set a theme on the Provider, these default values are replaced with theme-specific values. You can still override individual variables to customize a theme.

CSS Parts

All components expose CSS Parts for styling specific elements. Use CSS Parts when you need to style structural aspects that CSS variables don’t cover (like adding shadows, gradients, or complex layouts).

See the SDK Reference for a complete list of available parts for each component.

Example:

/* Style table container */
reeflow-table::part(container) {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Style table title */
reeflow-table::part(title) {
  color: #1a1a1a;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 16px;
}

/* Style header cells */
reeflow-table::part(header-cell) {
  background: #f5f5f5;
  padding: 14px 16px;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.5px;
}

/* Style chart container */
reeflow-bar-chart::part(container) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 24px;
  border-radius: 16px;
}

Responsive design

Components are responsive by default, but you can enhance their behavior with CSS:

/* Stack components vertically on mobile */
@media (max-width: 768px) {
  reeflow-bar-chart::part(container) {
    margin-bottom: 24px;
  }
}

/* Adjust chart heights for different screen sizes */
reeflow-bar-chart {
  height: 300px;
}

@media (min-width: 768px) {
  reeflow-bar-chart {
    height: 400px;
  }
}

@media (min-width: 1200px) {
  reeflow-bar-chart {
    height: 500px;
  }
}

Accessibility

The built-in themes follow accessibility best practices:

• Color contrast: All themes meet WCAG AA standards for text contrast
• Focus indicators: Clear visual focus indicators for keyboard navigation
• Screen reader support: Semantic HTML with appropriate ARIA attributes
• Keyboard navigation: Full keyboard support for interactive elements

When creating custom styles, ensure you maintain these accessibility standards:

/* Maintain focus indicators */
reeflow-table::part(header-cell):focus-visible {
  outline: 2px solid #0066cc;
  outline-offset: 2px;
}

/* Ensure sufficient contrast */
reeflow-table::part(cell) {
  color: #1a1a1a; /* High contrast text */
  background: white;
}

reeflow-table::part(row):hover {
  background: #f5f5f5; /* Subtle hover state */
}

Best practices

Use the built-in themes

Start with a built-in theme and customize only what you need. The themes are professionally designed and accessible.

Test in both light and dark modes

Always test your customizations in both light and dark modes:

// Test theme modes programmatically
const provider = document.querySelector('reeflow-provider');

// Test light mode
provider.themeMode = 'light';
// Verify appearance

// Test dark mode
provider.themeMode = 'dark';
// Verify appearance

Limit component-level overrides

Prefer setting themes at the Provider level. Too many component-level overrides can create an inconsistent user experience.

Use CSS variables for consistency

When customizing multiple components, define CSS variables at a higher level:

:root {
  --reeflow-primary-color: #0066cc;
  --reeflow-border-color: #e0e0e0;
  --reeflow-border-radius: 8px;
}

reeflow-table::part(container),
reeflow-bar-chart::part(container) {
  border: 1px solid var(--reeflow-border-color);
  border-radius: var(--reeflow-border-radius);
}

Maintain responsive behavior

Ensure your custom styles work well on all screen sizes:

@media (max-width: 768px) {
  reeflow-bar-chart {
    /* Reduce height on mobile */
    height: 250px;
  }
}