Theme Configuration

The Theme interface defines the structure for customizing the visual appearance of the betting system. It consists of four main sections: Font, Palette, Radius and OffsetTop.

The theme can be configured in the following ways:

1. Theme Presets (recommended for runtime switching): Define named presets (e.g. light, dark) in the back-office (SPA Config → Theme Presets) and switch between them at runtime with setThemePreset(name). See Theme Presets.
2. At application load: By providing theme options in bettingOptions through bettingLoader.load (AppInitOptions).
3. Dynamically at runtime (deprecated): By calling the updateThemeConfig method of the BettingAPI. This approach is deprecated — use Theme Presets instead.

Font

Defines the typography settings for the application.

Palette

Defines the color scheme for the interface, including primary, secondary, and accent colors, as well as text and notification colors.

Some widgets declare additional Palette apply only within their own scope and do not affect the overall SPA appearance.

Betslip widget specific theme.palette properties:

Example usage:

1
2
3
4
5
6

theme: {
  palette: {
    betslipPlaceBtnBg: '#1E90FF',
    betslipPlaceBtnText: '#FFFFFF'
  }
}

Radius

Defines the border radius settings for UI components.

OffsetTop

The offsetTop parameter is particularly useful when integrating the betting SPA into websites that have fixed headers or navigation bars. When set, it provides the necessary offset for sticky elements within the betting interface to account for the fixed header height.

Example scenarios where offsetTop is needed:

• Fixed navigation bars at the top of the page

• Sticky headers that remain visible during scrolling

Configuration example:

1
2
3
4
5
6

theme: {
  offsetTop: 64, // 64px offset for a fixed header
  palette: {
    // ... color configuration
  }
}

When offsetTop is properly configured, sticky elements within the betting interface will respect the offset and not be hidden behind fixed page elements.

Theme Presets

Theme Presets allow you to define multiple complete, named themes in the DATA.BET back office and switch between them at runtime with a single call - for example, when implementing a Light/Dark mode toggle. Instead of storing and re-applying palettes on your side, you keep one source of truth in the back-office and pass only the preset name.

Configure presets in the back-office under SPA Config → Theme Presets (guide). Each preset is a full theme with the same tokens described above (Font, Palette, Radius, OffsetTop). You name the presets yourself (e.g. light, dark, high-contrast).

Switch at runtime with setThemePreset(name):

1

bettingAPI.setThemePreset("dark");

The first preset you create becomes the default and is applied automatically on load; you can change which preset is the default in the back-office. Until your integration calls setThemePreset, the default preset is active.

Theme precedence

The final theme is resolved by merging several sources. Each source overrides the one above it, so the active preset always wins:

Theme config helper

Theme config helper designed to simplify the theme customization process. To access and use it, follow these steps:

1. Open the Demo Site: Navigate to the demo site using the following URL: https://demo-v2.data.bet

2. Enable the Helper via Console: Open your browser's developer console (usually by pressing F12). Then, paste and execute the following command:

   1	localStorage.setItem("isHelper", true);

3. Reload the Page: Refresh the demo site page to apply the changes. The Theme Config Helper should now be active.

Using this helper, you can easily configure and preview the theme in real-time and copy the ready-made theme configuration for use in your project.