Theme management
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
Theme manager is always enabled.
Iframe sends themeEditorReady via post messages to notify the partner application that it is ready to accept theme style changes.
Partner application should set initial styles, which can be an empty object {} then iframe applies initial theme styles and displays content. Previous values not present in themeData are removed, e.g. value {} resets theme styling.
Theme example
Custom CSS:
[data-theme="light"] {
--body: #ffffff;
--secondary: #ff7100;
--navigation: #ffffff;
--navigation-text: var(--text-dark);
--tabs-default-text: var(--secondary);
--lobby-item: #ff7100;
--lobby-item-text: var(--text-light);
--lobby: #ffffff;
--lobby-text: #000000;
}
[data-theme="dark"] {
--body: #181a22;
--secondary: #ff7100;
--navigation: #22272f;
--navigation-text: var(--text-light);
--tabs-default-text: #ffffff;
--lobby-item: #ff7100;
--lobby-item-text: var(--text-light);
--lobby: #181a22;
--lobby-text: #ffffff;
--input: #181a22;
--button: #181a22;
--input-text: #ffffff;
--odd-item: #22272f;
--odd-item-text: var(--text-light);
--text-dark: #ffffff;
--odd-item-hover: #fd82202e;
--odd-item-active: var(--secondary);
}
With “betgames.js” script
<div id="<IFRAME_HTML_CONTAINER_ID>"></div>
<script type="text/javascript">
const clientUrl = '<IFRAME_CLIENT_SERVER>';
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `${clientUrl}/public/betgames.js?${Date.now()}`;
script.onload = function () {
window.BetGames.setup({
// ...setup params
});
let currentTheme = 'light';
// For initial load
window.BetGames.onThemeEditorReady(() => {
// Set initial theme
window.BetGames.setTheme({
theme: currentTheme,
});
});
document.querySelector('#toggle-theme-button').addEventListener('click', () => {
// Toggle theme variable
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// Toggle theme
window.BetGames.setTheme({
theme: currentTheme,
});
});
};
document.head.appendChild(script);
</script>
Without “betgames.js” script
<div id="iframe-content"></div>
<script type="text/javascript">
const iframe = document.createElement('iframe');
iframe.setAttribute('name', 'betgames_iframe');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read');
iframe.setAttribute('src', `${clientUrl}/auth?${QUERY_PARAMS.toString()}`);
iframe.style.display = 'block';
iframe.style.width = '100%';
document.getElementById('iframe-content').appendChild(iframe);
let currentTheme = 'light';
const sendTheme = (theme) => {
iframe.contentWindow.postMessage(JSON.stringify({
type: 'setThemeStyles',
payload: {
theme,
},
}), '*');
};
window.addEventListener('message', (message) => {
try {
const parsedData = JSON.parse(message.data);
switch (parsedData.type) {
// ... other events
case 'themeEditorReady': {
sendTheme(currentTheme);
break;
}
}
} catch (e) {}
});
document.querySelector('#toggle-theme-button').addEventListener('click', () => {
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
sendTheme(currentTheme);
});
</script>
Theme styling examples
With “betgames.js” script
<div id="<IFRAME_HTML_CONTAINER_ID>"></div>
<script type="text/javascript">
const clientUrl = '<IFRAME_CLIENT_SERVER>';
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = `${clientUrl}/public/betgames.js?${Date.now()}`;
script.onload = function () {
window.BetGames.setup({
// ...setup params
});
let currentTheme = 'light';
const themeVariables = {
light: {
'--body': '#ffffff',
'--secondary': '#ff7100',
'--navigation': '#ffffff',
'--navigation-text': 'var(--text-dark)',
'--tabs-default-text': 'var(--secondary)',
'--lobby-item': '#ff7100',
'--lobby-item-text': 'var(--text-light)',
'--lobby': '#ffffff',
'--lobby-text': '#000000',
},
dark: {
'--body': '#181a22',
'--secondary': '#ff7100',
'--navigation': '#22272f',
'--navigation-text': 'var(--text-light)',
'--tabs-default-text': '#ffffff',
'--lobby-item': '#ff7100',
'--lobby-item-text': 'var(--text-light)',
'--lobby': '#181a22',
'--lobby-text': '#ffffff',
'--input': '#181a22',
'--button': '#181a22',
'--input-text': '#ffffff',
'--odd-item': '#22272f',
'--odd-item-text': 'var(--text-light)',
'--text-dark': '#ffffff',
'--odd-item-hover': '#fd82202e',
'--odd-item-active': 'var(--secondary)',
},
};
// For initial load
window.BetGames.onThemeEditorReady(() => {
// 1. Set default theme...
window.BetGames.setTheme({
theme: currentTheme,
});
// 2. ...or set theme styles, e.g. custom main colors, element colors, ...
window.BetGames.setTheme({
themeData: themeVariables[currentTheme],
});
// 3. ...or set theme styles, same as point 2.
window.BetGames.setThemeStyles(themeVariables[currentTheme]);
// 4. ...or set theme and theme styles
window.BetGames.setTheme({
theme: currentTheme,
themeData: themeVariables[currentTheme],
});
});
document.querySelector('#toggle-theme-button').addEventListener('click', () => {
// Toggle theme variable
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
// 1. Default theme toggling...
window.BetGames.setTheme({
theme: currentTheme,
});
// 2. ...or toggle theme and custom colors for each theme
window.BetGames.setTheme({
theme: currentTheme,
themeData: themeVariables[currentTheme],
});
});
};
document.head.appendChild(script);
</script>
Without betgames.js
<div id="iframe-content"></div>
<script type="text/javascript">
const iframe = document.createElement('iframe');
iframe.setAttribute('name', 'betgames_iframe');
iframe.setAttribute('frameborder', '0');
iframe.setAttribute('scrolling', 'no');
iframe.setAttribute('allow', 'autoplay; fullscreen; encrypted-media; clipboard-write; clipboard-read');
iframe.setAttribute('src', `${clientUrl}/auth?${QUERY_PARAMS.toString()}`);
iframe.style.display = 'block';
iframe.style.width = '100%';
document.getElementById('iframe-content').appendChild(iframe);
let currentTheme = 'light';
const themeVariables = {
light: {
'--body': '#ffffff',
'--secondary': '#ff7100',
'--navigation': '#ffffff',
'--navigation-text': 'var(--text-dark)',
'--tabs-default-text': 'var(--secondary)',
'--lobby-item': '#ff7100',
'--lobby-item-text': 'var(--text-light)',
'--lobby': '#ffffff',
'--lobby-text': '#000000',
},
dark: {
'--body': '#181a22',
'--secondary': '#ff7100',
'--navigation': '#22272f',
'--navigation-text': 'var(--text-light)',
'--tabs-default-text': '#ffffff',
'--lobby-item': '#ff7100',
'--lobby-item-text': 'var(--text-light)',
'--lobby': '#181a22',
'--lobby-text': '#ffffff',
'--input': '#181a22',
'--button': '#181a22',
'--input-text': '#ffffff',
'--odd-item': '#22272f',
'--odd-item-text': 'var(--text-light)',
'--text-dark': '#ffffff',
'--odd-item-hover': '#fd82202e',
'--odd-item-active': 'var(--secondary)',
},
};
const sendThemeStyles = (theme, stylesObject) => {
iframe.contentWindow.postMessage(JSON.stringify({
type: 'setThemeStyles',
payload: {
theme,
themeData: stylesObject,
},
}), '*');
};
window.addEventListener('message', (message) => {
try {
const parsedData = JSON.parse(message.data);
switch (parsedData.type) {
// ... other events
case 'themeEditorReady': {
sendThemeStyles(currentTheme, themeVariables[currentTheme]);
break;
}
}
} catch (e) {}
});
document.querySelector('#toggle-theme-button').addEventListener('click', () => {
currentTheme = currentTheme === 'light' ? 'dark' : 'light';
sendThemeStyles(currentTheme, themeVariables[currentTheme]);
});
</script>
All possible CSS theming options
Current CSS variables for light theme:
:root {
/* Theming */
--theme: light; /* default light */
/* Main */
--primary: #f8ad1b;
--secondary: #007bff;
--success: #86b514;
--success-text: #690;
--warning: #f68500;
--error: #d60000;
/* Text */
--text-light: #fff;
--text-dark: #1b1b1b;
--text-on-primary: var(--text-dark);
--text-on-secondary: var(--text-light);
--text-on-success: var(--text-light);
--text-on-warning: var(--text-light);
--text-on-error: var(--text-light);
--text-alternate: #8d8d8d;
--won-message: #86b514;
/* Generic elements */
--body: #eee;
--body-text: var(--text-dark);
--card: #fff;
--card-text: var(--body-text);
--border: rgba(0, 0, 0, 0.1);
--border-static: #e6e6e6;
--tabs-default: var(--body);
--tabs-default-text: var(--secondary);
--shadow-color: rgba(0, 0, 0, 0.1);
--dialog: var(--odd-item);
--dialog-text: var(--odd-item-text);
--dialog-header: rgb(229.5, 229.5, 229.5);
--input: var(--body);
--input-text: var(--body-text);
--input-border: rgba(0, 0, 0, 0.15);
--button: #fff;
--button-text: var(--body-text);
--button-hover: var(--button);
--button-hover-text: var(--button-text);
--ripple-color: #000;
--ripple-opacity: 0.2;
--timer-stroke: #0ff;
--stats-even-row: rgb(239.25, 239.25, 239.25);
/* Elements */
/* Navigation */
--navigation: #1b1b1b;
--navigation-text: var(--text-light);
--navigation-lobby-text: var(--primary);
/* Odds tabs */
--odd-item: var(--card);
--odd-item-text: var(--card-text);
--odd-item-active: rgb(221.85, 237.84, 255);
--odd-item-active-text: var(--odd-item-text);
--odd-item-hover: rgba(221.85, 237.84, 255, 0.6);
--odd-item-hover-text: var(--odd-item-text);
--odd-item-disabled: var(--odd-item);
--odd-item-disabled-text: var(--odd-item-text);
--odd-item-dropdown: var(--odd-item);
--odd-item-border: #d8d8d8;
--odd-item-highlight: var(--secondary);
/* Betslip */
--betslip: var(--odd-item);
--betslip-text: var(--odd-item-text);
--place-bet-button: var(--secondary);
--place-bet-button-text: var(--text-on-secondary);
--place-bet-button-hover: var(--place-bet-button);
/* Recent bets */
--recent-bets: rgba(255, 255, 255, 0.6);
--recent-bets-text: var(--body-text);
/* Last results */
--last-results: var(--odd-item);
--last-results-text: var(--odd-item-text);
/* Reports */
--reports: var(--odd-item);
--reports-text: var(--odd-item-text);
--reports-hover: var(--odd-item-hover);
--reports-hover-text: var(--odd-item-hover-text);
/* Lobby */
--lobby: #1b1b1b;
--lobby-text: var(--text-light);
--lobby-item: #0a2b61;
--lobby-item-text: var(--lobby-text);
--lobby-item-hover: var(--secondary);
--lobby-item-hover-text: var(--text-on-secondary);
/* Chat */
--chat-nickname-outgoing: var(--success-text);
--chat-nickname-incoming: var(--warning);
--chat-action-button: #8d8d8d;
--chat-submit-button: var(--text-dark);
--chat-submit-button-text: var(--text-light);
--chat-mention-background: var(--warning);
/* Skyward game */
--skywardgame-high-multiplier-text: #3de462;
--skywardgame-high-multiplier: rgba(70, 255, 111, 0.15);
--skywardgame-high-multiplier-shadow: rgba(61, 228, 98, 0.4);
--skywardgame-medium-multiplier-text: #f05ef2;
--skywardgame-medium-multiplier: rgba(240, 94, 242, 0.15);
--skywardgame-medium-multiplier-shadow: rgba(240, 94, 242, 0.4);
--skywardgame-low-multiplier-text: #4ecbfd;
--skywardgame-low-multiplier: rgba(5, 131, 242, 0.15);
--skywardgame-low-multiplier-shadow: rgba(78, 203, 253, 0.4);
--skywardgame-flew-color: #ff3030;
--skywardgame-flew-shadow: rgba(255, 48, 48, 0.3);
--skywardgame-last-results-background: rgba(255, 255, 255, 0.05);
--skywardgame-last-results-background-expanded: #000;
--skywardgame-last-results-action-button: rgba(255, 255, 255, 0.1);
--skywardgame-cancel-button: #ff4d4d;
--skywardgame-cashout-button: linear-gradient(180deg, #f8ad1b, rgb(240.1276595745, 161.1382978723, 7.3723404255));
--skywardgame-betslip-actions: transparent;
/* Free bet */
--free-bet: #86b514;
--free-bet-text: var(--text-light);
--free-bet-light: #caff49;
--free-bet-claim-gradient: linear-gradient(270deg, #86b514, rgba(172, 235, 19, 0.8), rgba(134, 176, 32, 0.8));
--free-bet-banner-gradient: linear-gradient(0deg, #6d9017 0%, #a3e20c 90%);
--free-bet-banner-text: var(--text-light);
/* Radio colors */
--radio-switcher-color: #fff;
--radio-color-checked: var(--place-bet-button);
--radio-switcher-background: rgba(var(--place-bet-button-rgb), 0.1);
/* Modal colors */
--modal-header-color: var(--body);
--modal-background-color: var(--odd-item);
--modal-content-color: var(--odd-item-text);
/* Text */
--font-main: Roboto, sans-serif;
--font-secondary: Tungsten, sans-serif;
--font-condensed: Roboto Condensed, sans-serif;
/* Other generic elements */
--border-radius-xs: 2px;
--border-radius-sm: 4px;
--border-radius-m: 8px;
--panel-border-radius: 4px;
--panel-margin: 7px;
/* Displays, uncomment to use */
/* --top-navigation-display: none; */
/* --video-archive-back-button: none; */
/* --top-won-amounts-display: none; */
/* Casino chips colors */
--casino-chip-sequence-1-main-color: #d61400;
--casino-chip-sequence-1-inner-color: #ae1000;
--casino-chip-sequence-2-main-color: #d64d00;
--casino-chip-sequence-2-inner-color: #ae3400;
--casino-chip-sequence-3-main-color: #d67400;
--casino-chip-sequence-3-inner-color: #a75a00;
--casino-chip-sequence-4-main-color: #d69400;
--casino-chip-sequence-4-inner-color: #a76e00;
--casino-chip-sequence-5-main-color: #d6b400;
--casino-chip-sequence-5-inner-color: #cda000;
--casino-chip-sequence-6-main-color: #7dae09;
--casino-chip-sequence-6-inner-color: #719a0f;
--casino-chip-sequence-7-main-color: #00780c;
--casino-chip-sequence-7-inner-color: #00630a;
--casino-chip-sequence-8-main-color: #08d794;
--casino-chip-sequence-8-inner-color: #00a46f;
--casino-chip-sequence-9-main-color: #00d6d6;
--casino-chip-sequence-9-inner-color: #00b3be;
--casino-chip-sequence-10-main-color: #0083d6;
--casino-chip-sequence-10-inner-color: #00609d;
--casino-chip-sequence-11-main-color: #002fd6;
--casino-chip-sequence-11-inner-color: #00239f;
--casino-chip-sequence-12-main-color: #6523ec;
--casino-chip-sequence-12-inner-color: #33009f;
--casino-chip-sequence-13-main-color: #ab00d6;
--casino-chip-sequence-13-inner-color: #8300a4;
--casino-chip-sequence-14-main-color: #430077;
--casino-chip-sequence-14-inner-color: #34005c;
--casino-chip-sequence-15-main-color: #1b1b1b;
--casino-chip-sequence-15-inner-color: #585858;
}
Current CSS variables for dark theme:
:root {
/* Theming */
--theme: dark;
/* Main */
--primary: #ff8c1a;
--secondary: #4889f2;
--success: #86b514;
--success-text: #690;
--warning: #f68500;
--error: #d60000;
/* Text */
--text-light: #fff;
--text-dark: #1b1b1b;
--text-on-primary: var(--text-dark);
--text-on-secondary: var(--text-light);
--text-on-success: var(--text-light);
--text-on-warning: var(--text-light);
--text-on-error: var(--text-light);
--text-alternate: #8d8d8d;
--won-message: #86b514;
/* Generic elements */
--body: #212121;
--body-text: var(--text-light);
--card: #212121;
--card-text: var(--body-text);
--border: rgba(255, 255, 255, 0.1);
--border-static: #303030;
--tabs-default: var(--body);
--tabs-default-text: var(--secondary);
--shadow-color: rgba(255, 255, 255, 0.15);
--dialog: var(--odd-item);
--dialog-text: var(--odd-item-text);
--dialog-header: var(--modal-header-color);
--input: var(--body);
--input-text: var(--body-text);
--input-border: rgba(255, 255, 255, 0.15);
--button: #454545;
--button-text: var(--body-text);
--button-hover: var(--button);
--button-hover-text: var(--button-text);
--ripple-color: #fff;
--ripple-opacity: 0.2;
--timer-stroke: #0ff;
--stats-even-row: rgb(123.25, 123.25, 123.25);
/* Elements */
/* Navigation */
--navigation: #1b1b1b;
--navigation-text: var(--text-light);
--navigation-lobby-text: var(--primary);
/* Odds tabs */
--odd-item: #303030;
--odd-item-text: var(--body-text);
--odd-item-active: rgba(255, 255, 255, 0.05);
--odd-item-active-text: var(--odd-item-text);
--odd-item-hover: rgba(255, 255, 255, 0.2);
--odd-item-hover-text: var(--odd-item-text);
--odd-item-disabled: var(--odd-item);
--odd-item-disabled-text: var(--odd-item-text);
--odd-item-dropdown: var(--odd-item);
--odd-item-border: #d8d8d8;
--odd-item-highlight: var(--secondary);
/* Betslip */
--betslip: var(--odd-item);
--betslip-text: var(--odd-item-text);
--place-bet-button: var(--secondary);
--place-bet-button-text: var(--text-on-secondary);
--place-bet-button-hover: var(--place-bet-button);
/* Recent bets */
--recent-bets: rgba(255, 255, 255, 0.05);
--recent-bets-text: var(--body-text);
/* Last results */
--last-results: var(--odd-item);
--last-results-text: var(--odd-item-text);
/* Reports */
--reports: var(--odd-item);
--reports-text: var(--odd-item-text);
--reports-hover: var(--odd-item-hover);
--reports-hover-text: var(--odd-item-hover-text);
/* Lobby */
--lobby: #1b1b1b;
--lobby-text: var(--text-light);
--lobby-item: #0a2b61;
--lobby-item-text: var(--lobby-text);
--lobby-item-hover: var(--secondary);
--lobby-item-hover-text: var(--text-on-secondary);
/* Chat */
--chat-nickname-outgoing: var(--success);
--chat-nickname-incoming: #ff8c1a;
--chat-action-button: #8d8d8d;
--chat-submit-button: var(--text-light);
--chat-submit-button-text: var(--text-dark);
--chat-mention-background: var(--warning);
/* Skyward game */
--skywardgame-high-multiplier-text: #3de462;
--skywardgame-high-multiplier: rgba(70, 255, 111, 0.15);
--skywardgame-high-multiplier-shadow: rgba(61, 228, 98, 0.4);
--skywardgame-medium-multiplier-text: #f05ef2;
--skywardgame-medium-multiplier: rgba(240, 94, 242, 0.15);
--skywardgame-medium-multiplier-shadow: rgba(240, 94, 242, 0.4);
--skywardgame-low-multiplier-text: #4ecbfd;
--skywardgame-low-multiplier: rgba(5, 131, 242, 0.15);
--skywardgame-low-multiplier-shadow: rgba(78, 203, 253, 0.4);
--skywardgame-flew-color: #ff3030;
--skywardgame-flew-shadow: rgba(255, 48, 48, 0.3);
--skywardgame-last-results-background: rgba(255, 255, 255, 0.05);
--skywardgame-last-results-background-expanded: #000;
--skywardgame-last-results-action-button: rgba(255, 255, 255, 0.1);
--skywardgame-cancel-button: #ff4d4d;
--skywardgame-cashout-button: var(--primary);
--skywardgame-betslip-actions: var(--body);
/* Free bet */
--free-bet: #86b514;
--free-bet-text: var(--text-light);
--free-bet-light: #caff49;
--free-bet-claim-gradient: linear-gradient(270deg, #86b514, rgba(172, 235, 19, 0.8), rgba(134, 176, 32, 0.8));
--free-bet-banner-gradient: linear-gradient(0deg, #6d9017 0%, #a3e20c 90%);
--free-bet-banner-text: var(--text-light);
/* Radio colors */
--radio-switcher-color: #fff;
--radio-color-checked: var(--place-bet-button);
--radio-switcher-background: #646464;
/* Modal colors */
--modal-header-color: var(--body);
--modal-background-color: var(--odd-item);
--modal-content-color: var(--odd-item-text);
/* Text */
--font-main: Roboto, sans-serif;
--font-secondary: Tungsten, sans-serif;
--font-condensed: Roboto Condensed, sans-serif;
/* Other generic elements */
--border-radius-xs: 2px;
--border-radius-sm: 4px;
--border-radius-m: 8px;
--panel-border-radius: 4px;
--panel-margin: 7px;
/* Displays, uncomment to use */
/* --top-navigation-display: none; */
/* --video-archive-back-button: none; */
/* --top-won-amounts-display: none; */
/* Casino chips colors */
--casino-chip-sequence-1-main-color: #d61400;
--casino-chip-sequence-1-inner-color: #ae1000;
--casino-chip-sequence-2-main-color: #d64d00;
--casino-chip-sequence-2-inner-color: #ae3400;
--casino-chip-sequence-3-main-color: #d67400;
--casino-chip-sequence-3-inner-color: #a75a00;
--casino-chip-sequence-4-main-color: #d69400;
--casino-chip-sequence-4-inner-color: #a76e00;
--casino-chip-sequence-5-main-color: #d6b400;
--casino-chip-sequence-5-inner-color: #cda000;
--casino-chip-sequence-6-main-color: #7dae09;
--casino-chip-sequence-6-inner-color: #719a0f;
--casino-chip-sequence-7-main-color: #00780c;
--casino-chip-sequence-7-inner-color: #00630a;
--casino-chip-sequence-8-main-color: #08d794;
--casino-chip-sequence-8-inner-color: #00a46f;
--casino-chip-sequence-9-main-color: #00d6d6;
--casino-chip-sequence-9-inner-color: #00b3be;
--casino-chip-sequence-10-main-color: #0083d6;
--casino-chip-sequence-10-inner-color: #00609d;
--casino-chip-sequence-11-main-color: #002fd6;
--casino-chip-sequence-11-inner-color: #00239f;
--casino-chip-sequence-12-main-color: #6523ec;
--casino-chip-sequence-12-inner-color: #33009f;
--casino-chip-sequence-13-main-color: #ab00d6;
--casino-chip-sequence-13-inner-color: #8300a4;
--casino-chip-sequence-14-main-color: #430077;
--casino-chip-sequence-14-inner-color: #34005c;
--casino-chip-sequence-15-main-color: #1b1b1b;
--casino-chip-sequence-15-inner-color: #585858;
}
