Skip to main content

Style Customization

Customize Volr SDK component styles using CSS variables and custom CSS.

CSS Variables​

Volr SDK uses CSS variables for theming. Override these to customize styles:

:root {
  /* Colors */
  --volr-accent-color: #0066ff;
  --volr-primary-color: #0066ff;
  --volr-background: #ffffff;
  --volr-foreground: #111827;
  
  /* Typography */
  --volr-font-family: inherit;
  
  /* Spacing */
  --volr-border-radius: 0.5rem;
}

Shadow DOM​

Volr SDK components use Shadow DOM for style isolation. This means:

  • Your app's CSS won't affect Volr components
  • Volr components won't affect your app
  • You need to use CSS variables or inject styles into Shadow DOM

Customizing Colors​

Accent Color​

:root {
  --volr-accent-color: #0066ff;
}

Or use the accentColor prop:

<VolrUIProvider
  config={{
    accentColor: '#0066ff',
    // ... other config
  }}
/>

Theme Colors​

:root {
  --volr-background: #ffffff;
  --volr-foreground: #111827;
}

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

Custom Fonts​

Set custom font family:

:root {
  --volr-font-family: 'Inter', sans-serif;
}

Or use the customFont CSS variable:

:root {
  --volr-custom-font: 'Inter', sans-serif;
}

Border Radius​

Customize border radius:

:root {
  --volr-border-radius: 0.5rem; /* Default */
}

Style Override​

For advanced customization, you can inject styles into Shadow DOM:

import { useEffect } from 'react';

function CustomStyles() {
  useEffect(() => {
    // Find Volr modal root
    const modalRoot = document.getElementById('volr-modal-root');
    if (modalRoot) {
      // Inject custom styles
      const style = document.createElement('style');
      style.textContent = `
        :host {
          --volr-accent-color: #0066ff;
        }
      `;
      modalRoot.shadowRoot?.appendChild(style);
    }
  }, []);

  return null;
}

Component-Specific Styles​

PaymentModal​

/* PaymentModal specific styles */
:root {
  --volr-payment-modal-width: 400px;
  --volr-payment-modal-border-radius: 1rem;
}

SigninModal​

/* SigninModal specific styles */
:root {
  --volr-signin-modal-width: 400px;
  --volr-signin-modal-border-radius: 1rem;
}

Best Practices​

1. Use CSS Variables​

Prefer CSS variables over direct style injection:

/* Good */
:root {
  --volr-accent-color: #0066ff;
}

/* Avoid */
.volr-button {
  background-color: #0066ff; /* Won't work due to Shadow DOM */
}

2. Test Across Themes​

Test custom styles in both light and dark themes:

:root {
  --volr-accent-color: #0066ff;
}

[data-theme="dark"] {
  --volr-accent-color: #3b82f6; /* Lighter for dark theme */
}

3. Maintain Contrast​

Ensure sufficient contrast for accessibility:

:root {
  --volr-foreground: #111827; /* Dark text on light background */
}

[data-theme="dark"] {
  --volr-foreground: #ffffff; /* Light text on dark background */
}

Complete Example​

/* styles.css */
:root {
  /* Colors */
  --volr-accent-color: #0066ff;
  --volr-primary-color: #0066ff;
  --volr-background: #ffffff;
  --volr-foreground: #111827;
  
  /* Typography */
  --volr-font-family: 'Inter', -apple-system, sans-serif;
  
  /* Spacing */
  --volr-border-radius: 0.5rem;
}

[data-theme="dark"] {
  --volr-background: #111827;
  --volr-foreground: #ffffff;
  --volr-accent-color: #3b82f6;
}
import './styles.css';
import { VolrUIProvider } from '@volr/react-ui';

function App() {
  return (
    <VolrUIProvider
      config={{
        accentColor: '#0066ff',
        theme: 'system',
        // ... other config
      }}
    >
      <YourApp />
    </VolrUIProvider>
  );
}

Next Steps​