Skip to main content

Theme Configuration

Volr SDK supports light, dark, and system themes. The theme affects all UI components including modals, buttons, and inputs.

Theme Modes​

Light Theme​

<VolrUIProvider
  config={{
    theme: 'light',
    // ... other config
  }}
/>

Dark Theme​

<VolrUIProvider
  config={{
    theme: 'dark',
    // ... other config
  }}
/>

Automatically follows the user's OS preference:

<VolrUIProvider
  config={{
    theme: 'system',
    // ... other config
  }}
/>

Theme Detection​

When using 'system' theme, Volr SDK detects the user's OS preference:

  • macOS/iOS: Uses system dark mode setting
  • Windows: Uses system theme preference
  • Linux: Uses system theme preference

Dynamic Theme Switching​

You can change the theme dynamically:

import { useVolrUI } from '@volr/react-ui';
import { useState } from 'react';

function ThemeToggle() {
  const { theme } = useVolrUI();
  const [currentTheme, setCurrentTheme] = useState<'light' | 'dark' | 'system'>('system');

  // Note: Theme is set at provider level
  // You'll need to re-render VolrUIProvider with new theme
  // or use a state management solution

  return (
    <select
      value={currentTheme}
      onChange={(e) => {
        const newTheme = e.target.value as 'light' | 'dark' | 'system';
        setCurrentTheme(newTheme);
        // Update VolrUIProvider config
      }}
    >
      <option value="light">Light</option>
      <option value="dark">Dark</option>
      <option value="system">System</option>
    </select>
  );
}

CSS Variables​

Volr SDK uses CSS variables for theming. You can override these:

:root {
  --volr-background: #ffffff;
  --volr-foreground: #111827;
  --volr-primary: #0066ff;
  --volr-accent: #0066ff;
}

[data-theme="dark"] {
  --volr-background: #111827;
  --volr-foreground: #ffffff;
  --volr-primary: #3b82f6;
  --volr-accent: #3b82f6;
}

See Style Customization for more details.

Best Practices​

1. Use System Theme by Default​

Let users use their preferred theme:

<VolrUIProvider
  config={{
    theme: 'system', // Recommended
    // ... other config
  }}
/>

2. Match Your App Theme​

If your app has a specific theme, match it:

// If your app is always dark
<VolrUIProvider
  config={{
    theme: 'dark',
    // ... other config
  }}
/>

3. Provide Theme Toggle​

Allow users to switch themes:

function App() {
  const [theme, setTheme] = useState<'light' | 'dark' | 'system'>('system');

  return (
    <VolrUIProvider
      config={{
        theme,
        // ... other config
      }}
    >
      <ThemeToggle theme={theme} onThemeChange={setTheme} />
      <YourApp />
    </VolrUIProvider>
  );
}

Next Steps​