Styling & Themes

Rhumby widgets support three built-in themes and custom theme configuration through your dashboard.

Built-in Themes

Light Theme (Default)

Clean, bright design for standard websites.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="light">
</script>

White background
Dark text
Blue accents
Best for: Most websites

Dark Theme

High contrast design for dark-mode websites.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="dark">
</script>

Dark slate background
Light text
Gold accents
Best for: Dark-mode sites, evening racing live results

Auto Theme

Automatically matches user's system preference.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="auto">
</script>

Detects prefers-color-scheme media query
Switches between light and dark automatically
Best for: Sites with dark mode toggle

Custom Themes

Create custom themes in your dashboard to match your brand.

Creating a Custom Theme

Go to Dashboard → Embed Tokens
Select your token or create a new one
Click Custom Theme
Configure colors, fonts, and spacing
Save and deploy

Custom Theme Options

You can customize:

Primary color - Accent color for interactive elements
Background color - Widget background
Text color - Primary text
Border color - Widget borders and dividers
Font family - Typography (Google Fonts supported)
Border radius - Roundness of corners
Spacing - Padding and margins

Example Custom Theme

{
  "colors": {
    "primary": "#004876",
    "background": "#ffffff",
    "text": "#0f172a",
    "border": "#e2e8f0",
    "accent": "#f59e0b"
  },
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "fontSize": "14px"
  },
  "spacing": {
    "borderRadius": "8px",
    "padding": "16px"
  }
}

This theme is saved to your token and applied automatically when the widget loads.

Widget Container Styling

The widget inherits the width of its container. Wrap it in a styled div:

<div style="max-width: 600px; margin: 0 auto;">
  <script src="https://rhumby.com/embed.js"
    data-token="emb_abc123"
    data-event="friday-night-spring-2026"
    data-view="standings">
  </script>
</div>

Recommended Container Widths

Standings: 400-800px
Results: 500-900px
Schedule: 400-700px
Registration: 400-600px

Typography

Widgets use system fonts by default:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

To use a custom font:

Load it in your page's <head>:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Configure it in your custom theme (dashboard)

CSS Custom Properties

You can customize widget colors and fonts using CSS custom properties (variables) directly on the widget element or its parent container.

Available CSS Variables

--rhumby-primary: #2563eb;           /* Primary accent color */
--rhumby-primary-hover: #1d4ed8;     /* Primary hover state */
--rhumby-bg: #ffffff;                 /* Widget background */
--rhumby-bg-secondary: #f8fafc;       /* Alternating rows, secondary elements */
--rhumby-text: #1e293b;               /* Primary text color */
--rhumby-text-secondary: #64748b;     /* Muted text (labels, timestamps) */
--rhumby-border: #e2e8f0;             /* Borders and dividers */
--rhumby-font: system-ui, sans-serif; /* Font family */

Usage Examples

Inline styles:

<script src="https://rhumby.com/embed.js"
  data-token="emb_xxx"
  data-event="friday-night-spring-2026"
  data-view="standings"
  style="
    --rhumby-primary: #dc2626;
    --rhumby-bg: #0f172a;
    --rhumby-text: #f8fafc;
  ">
</script>

Container styles:

<div class="custom-widget-container">
  <script src="https://rhumby.com/embed.js"
    data-token="emb_xxx"
    data-event="friday-night-spring-2026"
    data-view="standings">
  </script>
</div>

<style>
  .custom-widget-container {
    --rhumby-primary: #047857;
    --rhumby-primary-hover: #065f46;
    --rhumby-bg: #ecfdf5;
    --rhumby-bg-secondary: #d1fae5;
    --rhumby-text: #064e3b;
    --rhumby-text-secondary: #059669;
    --rhumby-border: #a7f3d0;
  }
</style>

Programmatic API:

<div id="standings-widget"></div>

<script src="https://rhumby.com/embed.js"></script>
<script>
  const widget = window.Rhumby.init({
    target: '#standings-widget',
    token: 'emb_xxx',
    event: 'friday-night-spring-2026',
    view: 'standings'
  });
  
  // Apply styles to the container
  document.getElementById('standings-widget').style.cssText = `
    --rhumby-primary: #8b5cf6;
    --rhumby-bg: #faf5ff;
    --rhumby-text: #3b0764;
  `;
</script>

Brand Color Examples

Yacht Club Classic (Navy & Gold):

--rhumby-primary: #1e3a8a;
--rhumby-primary-hover: #1e40af;
--rhumby-bg: #f8fafc;
--rhumby-text: #0f172a;
--rhumby-border: #cbd5e1;

Tropical Regatta (Teal & Coral):

--rhumby-primary: #0d9488;
--rhumby-primary-hover: #0f766e;
--rhumby-bg: #f0fdfa;
--rhumby-bg-secondary: #ccfbf1;
--rhumby-text: #134e4a;

Dark Mode (Slate & Blue):

--rhumby-primary: #3b82f6;
--rhumby-primary-hover: #2563eb;
--rhumby-bg: #0f172a;
--rhumby-bg-secondary: #1e293b;
--rhumby-text: #f1f5f9;
--rhumby-text-secondary: #94a3b8;
--rhumby-border: #334155;

Shadow DOM Isolation

Widgets render in a shadow DOM, which means:

Your site's CSS won't affect the widget
The widget's CSS won't affect your site
No style conflicts or namespace collisions

CSS custom properties (variables) work across shadow DOM boundaries, allowing you to customize the widget without breaking isolation.

Accessibility

All themes meet WCAG 2.1 AA contrast requirements:

Light theme: 4.5:1 minimum contrast
Dark theme: 4.5:1 minimum contrast
Custom themes: Validated on save

Widgets also include:

ARIA labels for screen readers
Keyboard navigation support
Focus indicators
Semantic HTML structure

Browser Compatibility

Themes work in all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers

Test your custom theme on both desktop and mobile before deploying. The dashboard includes a live preview tool.

Best Practices

Match Your Brand

Use colors that complement your existing design:

Primary: Your club's logo color
Background: Match your site's content background
Text: High contrast with background (minimum 4.5:1)

Keep It Readable

Don't use low-contrast colors
Stick to 14px+ font sizes
Maintain adequate spacing
Test on mobile screens

Consider Context

Light theme: Most websites, daytime viewing
Dark theme: Dark-mode sites, evening races
Auto theme: Sites with dark mode toggle

Custom fonts may increase load time. Stick to system fonts or widely-cached Google Fonts for best performance.

Next Steps

Create embed tokens with custom themes
Configure widgets with all available options

Styling & Themes

Rhumby widgets support three built-in themes and custom theme configuration through your dashboard.

Built-in Themes

Light Theme (Default)

Clean, bright design for standard websites.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="light">
</script>

White background
Dark text
Blue accents
Best for: Most websites

Dark Theme

High contrast design for dark-mode websites.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="dark">
</script>

Dark slate background
Light text
Gold accents
Best for: Dark-mode sites, evening racing live results

Auto Theme

Automatically matches user's system preference.

<script src="https://rhumby.com/embed.js"
  data-token="emb_abc123"
  data-event="friday-night-spring-2026"
  data-view="standings"
  data-theme="auto">
</script>

Detects prefers-color-scheme media query
Switches between light and dark automatically
Best for: Sites with dark mode toggle

Custom Themes

Create custom themes in your dashboard to match your brand.

Creating a Custom Theme

Go to Dashboard → Embed Tokens
Select your token or create a new one
Click Custom Theme
Configure colors, fonts, and spacing
Save and deploy

Custom Theme Options

You can customize:

Primary color - Accent color for interactive elements
Background color - Widget background
Text color - Primary text
Border color - Widget borders and dividers
Font family - Typography (Google Fonts supported)
Border radius - Roundness of corners
Spacing - Padding and margins

Example Custom Theme

{
  "colors": {
    "primary": "#004876",
    "background": "#ffffff",
    "text": "#0f172a",
    "border": "#e2e8f0",
    "accent": "#f59e0b"
  },
  "typography": {
    "fontFamily": "Inter, sans-serif",
    "fontSize": "14px"
  },
  "spacing": {
    "borderRadius": "8px",
    "padding": "16px"
  }
}

This theme is saved to your token and applied automatically when the widget loads.

Widget Container Styling

The widget inherits the width of its container. Wrap it in a styled div:

<div style="max-width: 600px; margin: 0 auto;">
  <script src="https://rhumby.com/embed.js"
    data-token="emb_abc123"
    data-event="friday-night-spring-2026"
    data-view="standings">
  </script>
</div>

Recommended Container Widths

Standings: 400-800px
Results: 500-900px
Schedule: 400-700px
Registration: 400-600px

Typography

Widgets use system fonts by default:

-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif

To use a custom font:

Load it in your page's <head>:

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

Configure it in your custom theme (dashboard)

CSS Custom Properties

You can customize widget colors and fonts using CSS custom properties (variables) directly on the widget element or its parent container.

Available CSS Variables

--rhumby-primary: #2563eb;           /* Primary accent color */
--rhumby-primary-hover: #1d4ed8;     /* Primary hover state */
--rhumby-bg: #ffffff;                 /* Widget background */
--rhumby-bg-secondary: #f8fafc;       /* Alternating rows, secondary elements */
--rhumby-text: #1e293b;               /* Primary text color */
--rhumby-text-secondary: #64748b;     /* Muted text (labels, timestamps) */
--rhumby-border: #e2e8f0;             /* Borders and dividers */
--rhumby-font: system-ui, sans-serif; /* Font family */

Usage Examples

Inline styles:

<script src="https://rhumby.com/embed.js"
  data-token="emb_xxx"
  data-event="friday-night-spring-2026"
  data-view="standings"
  style="
    --rhumby-primary: #dc2626;
    --rhumby-bg: #0f172a;
    --rhumby-text: #f8fafc;
  ">
</script>

Container styles:

<div class="custom-widget-container">
  <script src="https://rhumby.com/embed.js"
    data-token="emb_xxx"
    data-event="friday-night-spring-2026"
    data-view="standings">
  </script>
</div>

<style>
  .custom-widget-container {
    --rhumby-primary: #047857;
    --rhumby-primary-hover: #065f46;
    --rhumby-bg: #ecfdf5;
    --rhumby-bg-secondary: #d1fae5;
    --rhumby-text: #064e3b;
    --rhumby-text-secondary: #059669;
    --rhumby-border: #a7f3d0;
  }
</style>

Programmatic API:

<div id="standings-widget"></div>

<script src="https://rhumby.com/embed.js"></script>
<script>
  const widget = window.Rhumby.init({
    target: '#standings-widget',
    token: 'emb_xxx',
    event: 'friday-night-spring-2026',
    view: 'standings'
  });
  
  // Apply styles to the container
  document.getElementById('standings-widget').style.cssText = `
    --rhumby-primary: #8b5cf6;
    --rhumby-bg: #faf5ff;
    --rhumby-text: #3b0764;
  `;
</script>

Brand Color Examples

Yacht Club Classic (Navy & Gold):

--rhumby-primary: #1e3a8a;
--rhumby-primary-hover: #1e40af;
--rhumby-bg: #f8fafc;
--rhumby-text: #0f172a;
--rhumby-border: #cbd5e1;

Tropical Regatta (Teal & Coral):

--rhumby-primary: #0d9488;
--rhumby-primary-hover: #0f766e;
--rhumby-bg: #f0fdfa;
--rhumby-bg-secondary: #ccfbf1;
--rhumby-text: #134e4a;

Dark Mode (Slate & Blue):

--rhumby-primary: #3b82f6;
--rhumby-primary-hover: #2563eb;
--rhumby-bg: #0f172a;
--rhumby-bg-secondary: #1e293b;
--rhumby-text: #f1f5f9;
--rhumby-text-secondary: #94a3b8;
--rhumby-border: #334155;

Shadow DOM Isolation

Widgets render in a shadow DOM, which means:

Your site's CSS won't affect the widget
The widget's CSS won't affect your site
No style conflicts or namespace collisions

CSS custom properties (variables) work across shadow DOM boundaries, allowing you to customize the widget without breaking isolation.

Accessibility

All themes meet WCAG 2.1 AA contrast requirements:

Light theme: 4.5:1 minimum contrast
Dark theme: 4.5:1 minimum contrast
Custom themes: Validated on save

Widgets also include:

ARIA labels for screen readers
Keyboard navigation support
Focus indicators
Semantic HTML structure

Browser Compatibility

Themes work in all modern browsers:

Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers

Test your custom theme on both desktop and mobile before deploying. The dashboard includes a live preview tool.

Best Practices

Match Your Brand

Use colors that complement your existing design:

Primary: Your club's logo color
Background: Match your site's content background
Text: High contrast with background (minimum 4.5:1)

Keep It Readable

Don't use low-contrast colors
Stick to 14px+ font sizes
Maintain adequate spacing
Test on mobile screens

Consider Context

Light theme: Most websites, daytime viewing
Dark theme: Dark-mode sites, evening races
Auto theme: Sites with dark mode toggle

Custom fonts may increase load time. Stick to system fonts or widely-cached Google Fonts for best performance.

Next Steps

Create embed tokens with custom themes
Configure widgets with all available options

Styling & Themes

On this page

Styling & Themes

On this page