Theme management

From BetgamesTV
Jump to navigation Jump to search

With theme manager partners now can update iframe theme styles in live time from their application.

How it works

Iframe is created with theme manager enabled.

Iframe initiates and emits "themeEditorReady" using post messages to tell partner application that iframe is ready to accept theme style changes. Note that content is not disaplyed until iframe receives first theme styles to avoid flashing unstyled changes. If no theme styles has been passed then iframe will load in 10 seconds anyway.

Partner application should sets initial styles, can be an empty object "{}".

Iframe sets initial theme styles and displays content.


With betgames.js

Enable theme manager

  • Parameter should be added:
_bt.push(['theme_editor', '1'])

Usage

  • For initial load:
BetGames.onThemeEditorReady(() => {
    BetGames.setThemeStyles(stylesObject);
});
  • Further usage:
BetGames.setThemeStyles(stylesObject);

Without betgames.js

Enable theme manager

Parameter "theme_editor=1" should be appended to login link.

Usage

  • For initial load:
const sendThemeStyles = (stylesObject) => {
    const iframe = document.querySelector('iframe');
 
    iframe.contentWindow.postMessage(JSON.stringify({
        type: 'setThemeStyles',
        payload: {
            themeData: stylesObject,
        },
    }), '*');
};
 
window.addEventListener('message', function (event) {
    if (event.data.indexOf('themeEditorReady') !== -1) {
        sendThemeStyles(stylesObject);
    }
}, false);
  • Further usage:
sendThemeStyles(stylesObject);

Theme styles object format

Simple key-value object, where "key" is css variable name and "value" is css variable value, e.g.:

const stylesObject = {
    '--primary': '#f8ad1b',
    '--body': '#eee',
    '--body-text': '#1b1b1b',
    '--odd-item-text': 'var(--body-text)',
    ...
}

CSS variables list

All possible CSS theming options

:root {
    /* Main */
    /**
     * betslip border and single type label background color
     * selected odd value changed bacground color
     * live game timer round line color
     * screen odd background color
     * screen odds panel item background color
     * top notification message border color (shuffle deck message)
     * game messages won combinations text
     * top navigation text color
     * game navigation active item text and border color
     * favourite toggle star color
     * promotions counter background color
     * recent bets, bet history Speedy 7 bonus amount won background
     * Speedy 7 selected option border and shadow color
     * Speedy 7 bonus indicator 4 cards border color, reached bonus background color
     * mobile betslip button background color
     */
    --primary: #f8ad1b;
    /**
     * pagination active page border color
     * betslip amount input focused border and shadow color
     * betslip border and combination type label background color
     * betslip combo selection text (+Add one more bet) color, combo game link hover color
     * betslip subscription draws count hovered select shadow color, hovered select options background color
     * screen odds panel hovered scrollbar color
     * odd item dropdown selection cancel button text color
     * recent bet link to bet history, subscription details page color
     * reports focused filters border color
     * reports pages link to video archive, subscription detail page, back button text color
     * datepicker selected date and hovered date background color
     * how to play page active and hovered bottons border and text color
     */
    --secondary: #308ec8;
    /**
     * notification message bet success background color
     */
    --success: #86b514;
    /**
     * reports page cards winner border color
     * recent bets, bet history won amount text color
     * top won amounts text color
     * recent bets, bet history Speedy 7 result choices tick icon color
     */
    --success-text: #690;
    /**
     * notification warning message background color (place bet wasn't success)
     * selected odd bet will be accepted for next round message text and left border color
     * maintenance background color for game information header and lobby item
     * combination odd was returned "minus" icon color (recent bets, bet history)
     */
    --warning: #f68500;
    /**
     * combination bet lost icon color
     */
    --error: #d60000;
 
 
    /**
     * general light color on dark content
     */
    --text-light: #fff;
    /**
     * general dark color on light content
     */
    --text-dark: #1b1b1b;
    /**
     * text color on primary background color
     */
    --text-on-primary: var(--text-dark);
    /**
     * text color on secondary background color
     */
    --text-on-secondary: var(--text-light);
    /**
     * text color on success background color
     */
    --text-on-success: var(--text-light);
    /**
     * text color on warning background color
     */
    --text-on-warning: var(--text-light);
    /*
     * neutral text color:
     *   empty betslip,
     *   tax info,
     *   empty promotions,
     *   empty reports,
     *   reports mobile table labels,
     *   subscription details page header date and draws info,
     *   datepicker timezone label,
     *   video archive page video not available text, date text
     */
    --text-alternate: #8d8d8d;
    /**
     * main font
     */
    --font-main: Open Sans, sans-serif;
    /**
     * condensed font
     */
    --font-condensed: Open Sans Condensed, sans-serif;
 
 
    /* Generic elements */
    /**
     * body background color
     */
    --body: #eee;
    /**
     * body text color
     *   on dark theme switch to var(--text-light)
     */
    --body-text: var(--text-dark);
    /**
     * borders color, 90% transparency of black color
     *   creates like light grey color
     *   on dark theme probably switch to transparent white: rgba(255, 255, 255, 0.1);
     */
    --border: rgba(0, 0, 0, 0.1);
    /**
     * active/hovered text color for tab bar item (odds tabs, bet history tabs)
     */
    --tabs-default-text: var(--secondary);
    /**
     * shadow color with 90% transparency, same as border color
     */
    --shadow-color: rgba(0, 0, 0, 0.1);
    /**
     * pagination buttons
     * amount input
     * amount buttons
     * numpad block and buttons
     * place bet button
     * betslip notification
     * live label and draw code
     * Speedy 7 in recent bets, bet history bonus amount won block
     * Speedy 7 bonus indicator block
     * cards with white backgruond (game messages, results, video archive, odd item, selected odd, recent bets, GUI)
     * 6+ poker screen cards
     * betslip subscription draws count and opened state
     */
    --border-radius-xs: 2px;
    /**
     * betslip selected odd value background when value has changed
     * game information block
     * 6+ poker screen cards block
     * GUI poker table cards block
     * screen odd buttons card layout block
     * screen odds panel
     * video qualities selection block
     * lobby live label
     * odd item dropdown confirm button
     * promotions block
     * reports filters
     * reports mobile table item
     * datepicker block
     * how to play game selection buttons
     */
    --border-radius-sm: 4px;
    /**
     * betslip block
     * betslip type label bottom right corder
     * odds list block
     * recent bets block
     * reports desktop table
     */
    --panel-border-radius: 4px;
    /**
     * panels configurable margins
     * odds list
     * betslip
     * recent bets
     */
    --panel-margin: 7px;
    /**
     * dialog block background color
     *   used in promotions and datepicker
     */
    --dialog: var(--odd-item);
    /**
     * dialog block text
     */
    --dialog-text: var(--odd-item-text);
    /**
     * dialog header background color
     *   usually should be a bit darker than background (or lighter on dark theme)
     */
    --dialog-header: #e6e6e6;
    /**
     * input background color used in:
     *   amount input
     *   report filter input
     *   subscription number of draws selection
     */
    --input: var(--body);
    /**
     * input text color
     */
    --input-text: var(--body-text);
    /**
     * input border color, 85% transparent black
     *   usually darker than main border color
     *   same idea as with --border variable
     */
    --input-border: rgba(0, 0, 0, 0.15);
    /**
     * buttons background color
     * betslip amount buttons
     * betslip numpad buttons
     * odd item dropdown confirm button
     * pagination buttons
     * how to play game select button
     */
    --button: #fff;
    /**
     * button text color
     */
    --button-text: var(--body-text);
    /**
     * hovered button background color
     */
    --button-hover: var(--button);
    /**
     * hovered button text color
     */
    --button-hover-text: var(--button-text);
 
 
    /* Navigation */
    /**
     * top navigation background color
     * game information background color
     * mobile betslip button color
     * notification dot for static betslip button
     * Speedy 7 footer color
     */
    --navigation: #1b1b1b;
    /**
     * navigation text color
     */
    --navigation-text: var(--text-light);
    /**
     * game navigation background color
     * game messages background color
     */
    --game-navigation: var(--navigation);
    /**
     * game navigation text color
     * game messages text color
     */
    --game-navigation-text: var(--navigation-text);
    /**
     * game navigation active item background color
     */
    --game-navigation-active: transparent;
    /**
     * game navigation active item text and bottom border color
     * 6+ Poker game info button color
     */
    --game-navigation-active-text: var(--primary);
    /**
     * game navigation LIVE label text color
     */
    --game-navigation-live: #ff4d4d;
 
 
    /* Odds tabs */
    /**
     * odd item background color
     */
    --odd-item: #fff;
    /**
     * odd item text color
     */
    --odd-item-text: var(--body-text);
    /**
     * active odd item background color
     */
    --odd-item-active: #e4f0f8;
    /**
     * active odd item text color
     */
    --odd-item-active-text: var(--odd-item-text);
    /**
     * hovered odd item background color
     *   same color as --odd-item-active and with 60% transparency
     */
    --odd-item-hover: rgba(228, 240, 248, 0.6);
    /**
     * hovered odd item text color
     */
    --odd-item-hover-text: var(--odd-item-text);
    /**
     * disabled odd item background color
     */
    --odd-item-disabled: var(--odd-item);
    /**
     * disabled odd item text color
     */
    --odd-item-disabled-text: var(--odd-item-text);
    /**
     * odd item dropdown background color
     */
    --odd-item-dropdown: var(--odd-item);
 
 
    /* Betslip */
    /**
     * betslip background color
     *   by default used same color as odd item background color
     */
    --betslip: var(--odd-item);
    /**
     * betslip text color
     */
    --betslip-text: var(--odd-item-text);
    /**
     * place bet button background color
     */
    --place-bet-button: var(--secondary);
    /**
     * place bet button text color
     */
    --place-bet-button-text: var(--text-on-secondary);
    /**
     * hovered place bet button background color
     *   color shouldn't be very different from --place-bet-button because uses same text color
     */
    --place-bet-button-hover: var(--place-bet-button);
 
 
    /* Recent bets */
    /**
     * recent bets background color
     *   by default used same color as odd item background color with 60% transparency
     */
    --recent-bets: rgba(255, 255, 255, 0.6);
    /**
     * recent bets text color
     */
    --recent-bets-text: var(--body-text);
 
 
    /* Last results */
    /**
     * last results background color
     */
    --last-results: var(--odd-item);
    /**
     * last results text color
     */
    --last-results-text: var(--odd-item-text);
 
 
    /* Promotions */
    /**
     * promotion title text color
     */
    --promotion-title: #4bba45;
 
 
    /* Reports */
    /**
     * reports (bet history, results) table row, mobile item background color
     *   by default used same color as odd item background color
     */
    --reports: var(--odd-item);
    /**
     * reports item text color
     */
    --reports-text: var(--odd-item-text);
    /**
     * reports item hover background color
     *   by default used same color as odd item hover background color
     */
    --reports-hover: var(--odd-item-hover);
    /**
     * reports item hover background color
     */
    --reports-hover-text: var(--odd-item-hover-text);
 
 
    /* Lobby */
    /**
     * lobby page background color
     */
    --lobby: var(--border);
    /**
     * lobby page text color
     */
    --lobby-text: var(--text-light);
    /**
     * lobby item text color
     */
    --lobby-item: #0a2b61;
 
 
    /* Displays */
    /**
     * uncomment to hide elements
     */
    /*--top-navigation-display: none;*/
    /*--games-navigation-display: none;*/
    /*--video-archive-back-button: none;*/
    /*--dealers-navigation-item: none;*/
    /*--top-won-amounts-display: none;*/
}