React Video Editor

Learn how to customize the Timeline component appearance with CSS custom properties and themes

The Timeline component uses CSS custom properties (CSS variables) for theming, making it easy to customize the appearance to match your application's design system.

CSS Custom Properties

The component uses the following CSS custom properties for theming:

:root {
  --background: /* Main container background */
  --surface: /* Content area background */
  --surface-elevated: /* Track handles background */
  --border: /* Border colors */
  --timeline-row: /* Track row backgrounds */
  --timeline-tick: /* Marker tick colors */
  --timeline-item-selected-border: /* Selected item borders */
  --interactive-hover: /* Hover states */
  --interactive-pressed: /* Active states */
  --primary-50: /* Drop target highlighting */
  --text-secondary: /* Marker labels */
  --text-disabled: /* Disabled text */
}

Default Theme Values

Light Theme

:root {
  --background: #ffffff;
  --surface: #f8fafc;
  --surface-elevated: #f1f5f9;
  --border: #e2e8f0;
  --timeline-row: #ffffff;
  --timeline-tick: #94a3b8;
  --timeline-item-selected-border: #3b82f6;
  --interactive-hover: #f1f5f9;
  --interactive-pressed: #e2e8f0;
  --primary-50: #eff6ff;
  --text-secondary: #64748b;
  --text-disabled: #94a3b8;
}

Dark Theme

[data-theme="dark"] {
  --background: #0f172a;
  --surface: #1e293b;
  --surface-elevated: #334155;
  --border: #475569;
  --timeline-row: #1e293b;
  --timeline-tick: #64748b;
  --timeline-item-selected-border: #3b82f6;
  --interactive-hover: #334155;
  --interactive-pressed: #475569;
  --primary-50: #1e3a8a;
  --text-secondary: #94a3b8;
  --text-disabled: #64748b;
}

Custom Themes

Creating a Custom Theme

You can create custom themes by overriding the CSS custom properties:

/* Custom purple theme */
[data-theme="purple"] {
  --background: #faf5ff;
  --surface: #f3e8ff;
  --surface-elevated: #e9d5ff;
  --border: #d8b4fe;
  --timeline-row: #faf5ff;
  --timeline-tick: #a855f7;
  --timeline-item-selected-border: #8b5cf6;
  --interactive-hover: #f3e8ff;
  --interactive-pressed: #e9d5ff;
  --primary-50: #faf5ff;
  --text-secondary: #7c3aed;
  --text-disabled: #a855f7;
}

High Contrast Theme

[data-theme="high-contrast"] {
  --background: #ffffff;
  --surface: #ffffff;
  --surface-elevated: #f0f0f0;
  --border: #000000;
  --timeline-row: #ffffff;
  --timeline-tick: #000000;
  --timeline-item-selected-border: #ff0000;
  --interactive-hover: #f0f0f0;
  --interactive-pressed: #e0e0e0;
  --primary-50: #ffff00;
  --text-secondary: #000000;
  --text-disabled: #666666;
}

Integration with Design Systems

Tailwind CSS Integration

:root {
  --background: theme('colors.white');
  --surface: theme('colors.slate.50');
  --surface-elevated: theme('colors.slate.100');
  --border: theme('colors.slate.200');
  --timeline-row: theme('colors.white');
  --timeline-tick: theme('colors.slate.400');
  --timeline-item-selected-border: theme('colors.blue.500');
  --interactive-hover: theme('colors.slate.100');
  --interactive-pressed: theme('colors.slate.200');
  --primary-50: theme('colors.blue.50');
  --text-secondary: theme('colors.slate.500');
  --text-disabled: theme('colors.slate.400');
}

Best Practices

Consistent Color Palette: Use a consistent color palette across your application
Accessibility: Ensure sufficient contrast ratios for text and interactive elements
Theme Testing: Test your themes in different lighting conditions
Performance: Use CSS custom properties for better performance than JavaScript theme switching
Fallbacks: Provide fallback values for older browsers that don't support CSS custom properties

Theming