--- type: how-to title: Personaliza el skin de un juego summary: Sobrescribe los colores y assets visuales de un juego en la pestaña Skin, agrupados por modo (claro, oscuro o ambos); disponible desde el plan Alpha en adelante. --- Un juego viene con un aspecto por defecto. En la pestaña **Skin** del editor del juego puedes sobrescribir sus colores, cambiar sus assets visuales (imágenes, y donde el juego los usa, audio y vídeo), y fijar cualquier perilla no de color que el autor expuso (un interruptor, un número, una opción) para que el reto encaje con tu marca, y el cambio se aplica al juego renderizado. La personalización de skin está disponible desde el **plan Alpha en adelante** (Alpha, Equipo, Apex). ## Fija colores, assets y otras perillas Abre el juego en la página de **Juegos** de una clave de sitio (o del equipo), luego la pestaña **Skin**. La pestaña muestra las ranuras que el autor del juego expuso. La mayoría son colores y assets, pero un autor también puede exponer un **interruptor** (on/off), un **número** (a menudo con un mínimo y un máximo), o una **opción** de una lista fija. Fija un color con un valor hex o `rgb()`; fija un asset subiendo un archivo o pegando una URL (ver abajo); fija las otras ranuras con el control mostrado. Deja una ranura intacta y conserva el valor incluido del juego. ## Cómo se elige un skin en tiempo de ejecución Cada preset declara el **modo** en el que funciona: claro, oscuro o **any** (se lee bien sobre ambos fondos). Hay un default por modo, así que el juego se ve bien sea cual sea el modo que prefiera el dispositivo del visitante. Un preset marcado `any` es elegible para ser el default de claro, oscuro o ambos. Elegir uno ocurre en dos etapas. Primero el widget decide qué skin pedir: 1. El atributo `skin` del widget, si la página fijó uno: un nombre de preset exacto (por ejemplo `midnight`), o el atajo `light` / `dark`. 2. Si no, la preferencia de sistema del visitante (`prefers-color-scheme`), que resuelve a `light` o `dark`. Luego el servidor empareja eso contra los presets, tras fusionar tus overrides (clave de sitio sobre equipo sobre el conjunto incluido del juego). Un nombre de preset exacto en el atributo gana de plano. Si no, para el modo elegido el servidor toma el primer preset, en orden de declaración, que es elegible para ese modo y está marcado **default** (un preset es elegible cuando su modo es ese modo o `any`); si ninguno está marcado default toma el primer preset elegible. Como un preset `any` es elegible para ambos modos, puedes hacer de un skin el default en todas partes, o darle a un modo un skin dedicado y dejar que un skin `any` cubra el otro. En la pestaña Skin un skin `any` aparece bajo el grupo claro y el oscuro, y lo fijas como el default para uno o ambos. En el elemento `` también puedes pasar un objeto `skin` inline: un objeto JSON escrito como el valor del atributo, por ejemplo `skin='{"primary":"#7c3aed"}'`. El widget lo envía al servidor como la señal de skin de ese montaje, y el servidor lo parsea y lo superpone sobre los presets resueltos, así que tus colores y assets inline ganan sobre todo lo de arriba (incluidos tus overrides de equipo y de clave de sitio). Es una propiedad de tu propio markup, así que funciona en cualquier plan. El `` de checkbox no acepta un skin inline; su atributo `skin` toma solo `light` / `dark` o un nombre de preset. Mira [nuestra filosofía](/docs/understanding-caputchin/philosophy) para saber por qué este autoría por incrustación es gratis. ## Assets: sube o enlaza Una ranura de asset (imagen, audio o vídeo) toma o un archivo subido o una URL que pegas: - **Subir**: Caputchin guarda una instantánea del archivo. Queda congelado, así que no cambiará a menos que subas de nuevo. - **Enlazar**: pegas una URL `https` a un archivo que tú alojas. Está en vivo, así que reemplazar el archivo en esa URL actualiza el juego en la siguiente carga. Como el juego corre en un marco en sandbox, un asset enlazado solo carga si su origin está permitido. Caputchin lo gestiona por ti: permite exactamente los origins a los que apuntan tus presets de skin, y nada más. No cambias ninguna política tú mismo. Cada tipo de asset acepta un conjunto fijo de formatos (por ejemplo PNG, JPEG, WebP, SVG y GIF para imágenes). Los formatos exactos y las reglas de color están en la [referencia de esquema](/docs/references/customization-schema). ## Qué aplica, y dónde Los overrides de skin se resuelven en el servidor, gana-lo-más-específico: un preset de clave de sitio gana al preset del equipo, que gana al skin incluido del juego. Puedes extender un preset incluido y sobrescribir solo las ranuras que quieras, heredando el resto. ## Cómo un valor de skin llega al juego [#how-a-skin-value-reaches-the-game] El servidor resuelve tu skin (tus overrides fusionados sobre el conjunto incluido) y entrega el resultado al **propio código del juego**, que se dibuja a sí mismo con él. Los colores y las URLs de assets llegan como texto; un interruptor llega como un `true` / `false` real, un número como un número real, una opción como la cadena elegida. El autor del juego decide cómo se usa cada valor, así que lo que una ranura cambia realmente depende del juego. No escribes ningún CSS para el juego: corre en un marco en sandbox que no puedes estilar desde tu página. El **shell del widget** (la chrome de Caputchin alrededor del juego, y la checkbox independiente) es distinto: su skin resuelto también se expone a tu página como CSS custom properties llamadas `--cpt-skin-`, que puedes leer o sobrescribir desde tu propia hoja de estilos. Esa superficie, y cómo hacer white-label del shell, se cubre en [Estila el widget con CSS](/docs/widget-customization/css-parts). Esas variables son solo del shell; no llevan el skin de un juego. ## Véase también - [Visión general de personalización de juego](/docs/game-customization/overview): registra un juego y gestiónalo. - [Configuraciones](/docs/game-customization/configurations) e [idioma](/docs/game-customization/locale): los otros dos ejes. - [Referencia de esquema](/docs/references/customization-schema): reglas de color, formatos de asset, y el modelo de presets. - [Estila el widget con CSS](/docs/widget-customization/css-parts): las variables `--cpt-skin-*` del shell y los shadow parts.