Tematización Dinámica (Personalización de Marca)
El widget permite cambiar los colores de la interfaz en tiempo real para adaptarse a la identidad visual de tu sitio. Para ello, debes enviar un mensaje al iframe utilizando postMessage.
Variables Disponibles
| Variable | Description | Default |
|---|---|---|
| --primary-color | Color de acento principal (Cian por defecto) | #00f2ff |
| --secondary-color | Acento secundario (Oro por defecto) | #ffd700 |
| --tertiary-color | Acento terciario (Magenta por defecto) | #ff00ff |
| --accent-color | Color de resaltado (usualmente coincide con el terciario) | #ff00ff |
| --bg-from | Inicio del degradado de fondo | #1a2333 |
| --bg-to | Fin del degradado de fondo | #0a0f1a |
| --text-primary | Color de texto principal | #ffffff |
| --text-secondary | Color de texto secundario | #a0a0a0 |
| --card-bg | Fondo de los paneles de cristal | rgba(10, 14, 23, 0.75) |
| --header-bg | Fondo del encabezado | rgba(10, 14, 23, 0.85) |
| --glass-border | Bordes para elementos de cristal | rgba(255, 255, 255, 0.2) |
| --ground-color | Color del suelo 3D | #1a1a1a |
| --fog-color | Color de la niebla ambiental 3D | #0a0f1a |
| --machine-color | Color del cuerpo principal de la máquina 3D | #888888 |
| --ball-1 | Color para la bola de resultado #1 | var(--primary-color) |
| --ball-2 | Color para la bola de resultado #2 | var(--secondary-color) |
| --ball-3 | Color para la bola de resultado #3 | var(--tertiary-color) |
Ejemplo de Personalización
const iframe = document.getElementById('lottery-widget');
// Send your brand colors
iframe.contentWindow.postMessage({
type: 'UPDATE_THEME',
payload: {
'--primary-color': '#ff4400', // Vibrant Orange
'--bg-from': '#330000', // Deep Red Background
'--ground-color': '#222222', // Dark Floor
'--backlight-color': '#ff4400' // Ambient Light
}
}, '*');