Theme config

To change the stylings of the SPA, use method updateThemeConfig in the Betting API instance.

ThemeConfig interface:

interface ThemeConfig {
  fonts: {
    fontFamilyPrimary: string;
    fontFamilySecondary: string;
    fontSizeBase: string;
  };
  palette: {
    primaryColor: string;
    primaryAccent: string;
    secondaryColor: string;
    primaryText: string;
    primaryAccentText: string;
    secondaryText: string;
    infoColor: string;
    successColor: string;
    errorColor: string;
    warningColor: string;
  };
  radius: {
    radiusXxs: number;
    radiusXs: number;
    radiusS: number;
    radiusM: number;
    radiusL: number;
    radiusXl: number;
    radiusXxl: number;
  };
  offsetTop: number;
}

Example:

bettingAPI.updateThemeConfig({
  fonts: {
    fontFamilyPrimary: `Roboto, sans-serif`,
    fontFamilySecondary: `"Roboto Condensed", sans-serif`,
    fontSizeBase: '14px'
  },
  palette: {
    primaryText: "#ffffff",
    primaryColor: "#060c1f",
    secondaryText: "#a4a4a4",
    secondaryColor: "#141c33",
    primaryAccent: "#00bf9e",
    primaryAccentText: "#ffffff",
    infoColor: "#00acc0",
    successColor: "#127d0d",
    errorColor: "#ff0000",
    warningColor: "#ffb31a",
  },
  radius: {
    radiusXxs: 1,
    radiusXs: 2,
    radiusS: 4,
    radiusM: 8,
    radiusL: 12,
    radiusXl: 16,
    radiusXxl: 32,
  }, 
  offsetTop: 0
});

Info

Above are the default theme values. It is possible to change only the values you need

Warning

Palette supports only hex format for color. Fonts must be loaded on the page

Some palette properties:

fontBaseSize is used as base font size. Based on this variable, we generate several more internal variables with a certain multiplier

Example with fontSizeBase: 18px

primaryColor is used for the main background of the application.

Example with palette.primaryColor: #060c1f

primaryText is used for the color of important text, such as match headers or competitor names.

Example with palette.primaryText: #a4a4a4

primaryAccent is used for the color of accent elements, such as active tabs, active icons, and the background color of some elements like odd buttons.

Example with palette.primaryAccent: #00bf9e

primaryAccentText is used for the color of text of elements with primaryAccent background color. If the value is omitted, then the primaryText variable will be used instead.

Example with palette.primaryAccentText: #ffffff

secondaryColor is used for the background color of UI elements, except for the main background.

Example with palette.secondaryColor: #141c33

secondaryText is used for the text color of non-important or non-active UI elements, and also for the color of icons, such as the ‘Free Bet’ icon and the ‘Betslip is empty’ icon.

Example with palette.secondaryText: #a4a4a4

offsetTop is used for sticky categorizer and betslip. Allows you to solve a common problem with a fixed header on the site:

Example with offsetTop: 80