Skip to main content

Customization

The Router OGA Swap/Bridge Widget offers extensive customization options to match your application's design and brand identity.

Theme Options​

Pre-configured Modes​

Choose from built-in themes:

  • light: Light theme with bright colors
  • dark: Dark theme with dark background
  • auto: Automatically adapts to user's system preference

In the SDK, set config.theme.mode.

import { BlinqWidget } from '@routerprotocol/xplore-widget';
import '@routerprotocol/xplore-widget/style.css';

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { mode: 'dark' },
    integrator: 'MyDApp',
  }}
/>;

Dark Mode Support​

The widget fully supports dark mode and can automatically adapt to your application's theme:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { mode: 'auto' },
    integrator: 'MyDApp',
  }}
/>;

Color Customization​

Primary Color​

Set your brand's primary color:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { primaryColor: '#7C3AED' },
    integrator: 'MyDApp',
  }}
/>;

Background Color​

Customize the background color:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { backgroundColor: '#1a1a1a' },
    integrator: 'MyDApp',
  }}
/>;

Text Colors​

Set the primary and secondary text colors:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { textColorPrimary: '#ffffff', textColorSecondary: '#cccccc' },
    integrator: 'MyDApp',
  }}
/>;

Complete Color Scheme​

Combine multiple color options:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      primaryColor: '#7C3AED',
      backgroundColor: '#1a1a1a',
      textColorPrimary: '#ffffff',
      textColorSecondary: '#cccccc',
      modalColor: '#111111',
    },
    integrator: 'MyDApp',
  }}
/>;

Border and Shape Customization​

Border Radius​

Customize the border radius for cards and buttons separately:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: { cardBorderRadius: '16px', buttonBorderRadius: '12px' },
    integrator: 'MyDApp',
  }}
/>;

Common border radius values:

  • 0px - Sharp corners
  • 8px - Slightly rounded
  • 12px - Medium rounded
  • 16px - Highly rounded
  • 24px - Very rounded

You can set different values for cards and buttons:

  • cardBorderRadius - Controls border radius for card elements
  • buttonBorderRadius - Controls border radius for buttons

Container Styling​

CSS Styling​

The widget ships default styles (@routerprotocol/xplore-widget/style.css). You can wrap the widget in your own container and style that container:

.widget-container {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  margin: 0 auto;
  background: #1a1a1a;
}

Responsive Design​

Make the widget responsive:

.widget-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .widget-container {
    max-width: 100%;
  }
}

Brand Integration​

Matching Your Brand Colors​

Use your brand's color palette:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      primaryColor: 'YOUR_BRAND_COLOR',
      backgroundColor: 'YOUR_BG_COLOR',
      textColorPrimary: 'YOUR_TEXT_COLOR',
      cardBorderRadius: 'YOUR_CARD_BORDER_RADIUS',
      buttonBorderRadius: 'YOUR_BUTTON_BORDER_RADIUS',
    },
    integrator: 'MyDApp',
  }}
/>;

Example: Router Protocol Branding​

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      primaryColor: '#7C3AED',
      backgroundColor: '#000000',
      textColorPrimary: '#ffffff',
      textColorSecondary: '#cccccc',
      cardBorderRadius: '12px',
      buttonBorderRadius: '8px',
    },
    integrator: 'MyDApp',
  }}
/>;

Advanced Customization​

Combining All Options​

Here's an example with all customization options:

<BlinqWidget
  config={{
    apiUrl: 'https://grpc-v2.routerprotocol.com',
    networkConfigUrl: '/api/networks',
    theme: {
      mode: 'dark',
      primaryColor: '#7C3AED',
      backgroundColor: '#1a1a1a',
      textColorPrimary: '#ffffff',
      textColorSecondary: '#cccccc',
      modalColor: '#111111',
      cardBorderRadius: '16px',
      buttonBorderRadius: '12px',
    },
    features: { showHeader: true },
    integrator: 'your-app',
  }}
/>;

Best Practices​

  1. Consistency: Match your application's design system
  2. Contrast: Ensure sufficient contrast for accessibility
  3. Responsive: Test on different screen sizes
  4. Brand Alignment: Use your brand colors consistently
  5. User Experience: Keep customization subtle and functional

Next Steps​