# Skins (Material / iOS / Flutter)

> Cambiar la identidad visual — estructura, forma y espaciado — global o por componente.

Source: https://crossfly.dev/es/docs/ui/theming/skins — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# Skins

Un `Skin` define la **identidad visual estructural** de todos los componentes: forma (esquinas), grosor
de borde, espaciado, sombras e iconos predeterminados. Hay tres integrados: **`MaterialSkin`**, **`IOSSkin`**
y **`FlutterSkin`**.

> **Skin ≠ colores.** Skin = **estructura/renderer**; la **paleta** (claro/oscuro, primary/surface…) viene
> del [`ColorScheme`/`ThemeMode`](/docs/ui/theming/color-schemes). Un skin custom cambia **forma/espaciado**, no color.

## Skin predeterminado
`Skin.get()` retorna `MaterialSkin` por defecto — o **`IOSSkin` automáticamente en iOS**.

## Ejemplo completo (copiar, pegar y ejecutar)
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;   // Styles
import dev.crossfly.ui.skin.*;    // Skin, MaterialSkin, IOSSkin, FlutterSkin

/** Pantalla principal ejecutable. Apunta el launcher (classname) y corre: gradlew :lwjgl3:run */
public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      Skin.set(new IOSSkin());   // skin global = estructura/forma iOS (los colores siguen viniendo del tema)
      setLayout(new VerticalLayout());

      // Botones para cambiar el skin global en tiempo real:
      Button material = new Button("Skin Material");
      material.onAction(c -> { Skin.set(new MaterialSkin()); restyle(); });
      add(LAY_AUTO, material);

      Button ios = new Button("Skin iOS");
      ios.onAction(c -> { Skin.set(new IOSSkin()); restyle(); });
      add(LAY_AUTO, ios);

      Button flutter = new Button("Skin Flutter");
      flutter.onAction(c -> { Skin.set(new FlutterSkin()); restyle(); });
      add(LAY_AUTO, flutter);

      // Skin por componente: este botón queda iOS aunque el global cambie.
      Button fixoIos = new Button("Sempre iOS");
      fixoIos.skin(new IOSSkin());
      add(LAY_AUTO, fixoIos);
   }
}
```
> Los fragmentos siguientes muestran **solo el núcleo** (lo que va dentro de `onShow()`). Para ejecutar, colócalos en el esqueleto `MainWindow` de arriba.

## Cambiar el skin global
Afecta a todos los componentes que no tienen skin propio:
```java
Skin.set(new IOSSkin());       // toda la UI gana el aspecto iOS
Skin.set(new FlutterSkin());   // … o Flutter
```

## Skin por componente
Sobrescribe el global solo en ese componente:
```java
meuBotao.skin(new IOSSkin());  // este botón queda en iOS, el resto sigue Material
```

## Skin personalizado (cambia forma/espaciado, no color)
Extiende un skin y sobrescribe los **hooks de estructura**:
```java
public class RoundedSkin extends MaterialSkin {
   @Override public float borderRadius() { return 1.5f; }  // esquinas bien redondeadas
   @Override public float borderThick()  { return 0.05f; } // borde fino
}
// aplicar globalmente:
Skin.set(new RoundedSkin());
```
Para **adaptar colores** al claro/oscuro, **no** toques el skin — usa `ColorScheme`/`ThemeMode`
(ver [Modo claro/oscuro](/docs/ui/theming/dark-mode)).

## Cómo interactúan las capas
<div class="cf-diagram">
<svg role="img" id="my-svg" width="1227" height="164" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="flowchart" style="max-width: 1226.75px; background-color: transparent;" viewBox="0 0 1226.75 164" role="graphics-document document" aria-roledescription="flowchart-v2"><style>#my-svg{font-family:Manrope,system-ui,sans-serif;font-size:14px;fill:var(--text);}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#my-svg .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#my-svg .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#my-svg .error-icon{fill:var(--bg-elev);}#my-svg .error-text{fill:var(--text-dim);stroke:var(--text-dim);}#my-svg .edge-thickness-normal{stroke-width:1px;}#my-svg .edge-thickness-thick{stroke-width:3.5px;}#my-svg .edge-pattern-solid{stroke-dasharray:0;}#my-svg .edge-thickness-invisible{stroke-width:0;fill:none;}#my-svg .edge-pattern-dashed{stroke-dasharray:3;}#my-svg .edge-pattern-dotted{stroke-dasharray:2;}#my-svg .marker{fill:var(--text-dim);stroke:var(--text-dim);}#my-svg .marker.cross{stroke:var(--text-dim);}#my-svg svg{font-family:Manrope,system-ui,sans-serif;font-size:14px;}#my-svg p{margin:0;}#my-svg .label{font-family:Manrope,system-ui,sans-serif;color:var(--text);}#my-svg .cluster-label text{fill:var(--text-dim);}#my-svg .cluster-label span{color:var(--text-dim);}#my-svg .cluster-label span p{background-color:transparent;}#my-svg .label text,#my-svg span{fill:var(--text);color:var(--text);}#my-svg .node rect,#my-svg .node circle,#my-svg .node ellipse,#my-svg .node polygon,#my-svg .node path{fill:var(--bg-soft);stroke:var(--border-strong);stroke-width:1px;}#my-svg .rough-node .label text,#my-svg .node .label text,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-anchor:middle;}#my-svg .node .katex path{fill:var(--text-dim);stroke:var(--text-dim);stroke-width:1px;}#my-svg .rough-node .label,#my-svg .node .label,#my-svg .image-shape .label,#my-svg .icon-shape .label{text-align:center;}#my-svg .node.clickable{cursor:pointer;}#my-svg .root .anchor path{fill:var(--text-dim)!important;stroke-width:0;stroke:var(--text-dim);}#my-svg .arrowheadPath{fill:rgba(255, 255, 255, 0);}#my-svg .edgePath .path{stroke:var(--text-dim);stroke-width:1px;}#my-svg .flowchart-link{stroke:var(--text-dim);fill:none;}#my-svg .edgeLabel{background-color:var(--bg-elev);text-align:center;}#my-svg .edgeLabel p{background-color:var(--bg-elev);}#my-svg .edgeLabel rect{opacity:0.5;background-color:var(--bg-elev);fill:var(--bg-elev);}#my-svg .labelBkg{background-color:rgba(255, 255, 255, 0.5);}#my-svg .cluster rect{fill:var(--bg-elev);stroke:hsl(0, 0%, 90%);stroke-width:1px;}#my-svg .cluster text{fill:var(--text-dim);}#my-svg .cluster span{color:var(--text-dim);}#my-svg div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:Manrope,system-ui,sans-serif;font-size:12px;background:var(--bg-elev);border:1px solid hsl(0, 0%, 90%);border-radius:2px;pointer-events:none;z-index:100;}#my-svg .flowchartTitleText{text-anchor:middle;font-size:18px;fill:var(--text);}#my-svg rect.text{fill:none;stroke-width:0;}#my-svg .icon-shape,#my-svg .image-shape{background-color:var(--bg-elev);text-align:center;}#my-svg .icon-shape p,#my-svg .image-shape p{background-color:var(--bg-elev);padding:2px;}#my-svg .icon-shape .label rect,#my-svg .image-shape .label rect{opacity:0.5;background-color:var(--bg-elev);fill:var(--bg-elev);}#my-svg .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#my-svg .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#my-svg .node .neo-node{stroke:var(--border-strong);}#my-svg [data-look="neo"].node rect,#my-svg [data-look="neo"].cluster rect,#my-svg [data-look="neo"].node polygon{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].swimlane.cluster rect{filter:none;}#my-svg [data-look="neo"].node path{stroke:url(#my-svg-gradient);stroke-width:1px;}#my-svg [data-look="neo"].node .outer-path{filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].node .neo-line path{stroke:var(--border-strong);filter:none;}#my-svg [data-look="neo"].node circle{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].node circle .state-start{fill:var(--text-dim);}#my-svg [data-look="neo"].icon-shape .icon{fill:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg [data-look="neo"].icon-shape .icon-neo path{stroke:url(#my-svg-gradient);filter:drop-shadow( 1px 2px 2px rgba(185,185,185,1));}#my-svg :root{--mermaid-font-family:Manrope,system-ui,sans-serif;}</style><g><marker id="my-svg_flowchart-v2-pointEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 0 L 10 5 L 0 10 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="4.5" refY="5" markerUnits="userSpaceOnUse" markerWidth="8" markerHeight="8" orient="auto"><path d="M 0 5 L 10 10 L 10 0 z" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointEnd-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="11.5" refY="7" markerUnits="userSpaceOnUse" markerWidth="10.5" markerHeight="14" orient="auto"><path d="M 0 0 L 11.5 7 L 0 14 z" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-pointStart-margin" class="marker flowchart-v2" viewBox="0 0 11.5 14" refX="1" refY="7" markerUnits="userSpaceOnUse" markerWidth="11.5" markerHeight="14" orient="auto"><polygon points="0,7 11.5,14 11.5,0" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleEnd" class="marker flowchart-v2" viewBox="0 0 10 10" refX="11" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleStart" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-1" refY="5" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 1; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleEnd-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refY="5" refX="12.25" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-circleStart-margin" class="marker flowchart-v2" viewBox="0 0 10 10" refX="-2" refY="5" markerUnits="userSpaceOnUse" markerWidth="14" markerHeight="14" orient="auto"><circle cx="5" cy="5" r="5" class="arrowMarkerPath" style="stroke-width: 0; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossEnd" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="12" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossStart" class="marker cross flowchart-v2" viewBox="0 0 11 11" refX="-1" refY="5.2" markerUnits="userSpaceOnUse" markerWidth="11" markerHeight="11" orient="auto"><path d="M 1,1 l 9,9 M 10,1 l -9,9" class="arrowMarkerPath" style="stroke-width: 2; stroke-dasharray: 1, 0;"/></marker><marker id="my-svg_flowchart-v2-crossEnd-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="17.7" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5;"/></marker><marker id="my-svg_flowchart-v2-crossStart-margin" class="marker cross flowchart-v2" viewBox="0 0 15 15" refX="-3.5" refY="7.5" markerUnits="userSpaceOnUse" markerWidth="12" markerHeight="12" orient="auto"><path d="M 1,1 L 14,14 M 1,14 L 14,1" class="arrowMarkerPath" style="stroke-width: 2.5; stroke-dasharray: 1, 0;"/></marker><g class="root"><g class="clusters"/><g class="edgePaths"><path d="M147.203,131.5L151.37,131.5C155.536,131.5,163.87,131.5,171.536,131.5C179.203,131.5,186.203,131.5,189.703,131.5L193.203,131.5" id="my-svg-L_Seed_CS_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Seed_CS_0" data-points="W3sieCI6MTQ3LjIwMzEyNSwieSI6MTMxLjV9LHsieCI6MTcyLjIwMzEyNSwieSI6MTMxLjV9LHsieCI6MTk3LjIwMzEyNSwieSI6MTMxLjV9XQ==" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M394.063,131.5L398.229,131.5C402.396,131.5,410.729,131.5,418.396,131.5C426.063,131.5,433.063,131.5,436.563,131.5L440.063,131.5" id="my-svg-L_CS_Styles_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_CS_Styles_0" data-points="W3sieCI6Mzk0LjA2MjUsInkiOjEzMS41fSx7IngiOjQxOS4wNjI1LCJ5IjoxMzEuNX0seyJ4Ijo0NDQuMDYyNSwieSI6MTMxLjV9XQ==" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M648.125,32.5L654.701,32.5C661.276,32.5,674.427,32.5,690.912,36.421C707.397,40.343,727.215,48.185,737.124,52.107L747.033,56.028" id="my-svg-L_Skin_Factory_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Skin_Factory_0" data-points="W3sieCI6NjQ4LjEyNSwieSI6MzIuNX0seyJ4Ijo2ODcuNTc4MTI1LCJ5IjozMi41fSx7IngiOjc1MC43NTI4NDA5MDkwOTA5LCJ5Ijo1Ny41fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M662.578,131.5L666.745,131.5C670.911,131.5,679.245,131.5,693.321,127.579C707.397,123.657,727.215,115.815,737.124,111.893L747.033,107.972" id="my-svg-L_Styles_Factory_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Styles_Factory_0" data-points="W3sieCI6NjYyLjU3ODEyNSwieSI6MTMxLjV9LHsieCI6Njg3LjU3ODEyNSwieSI6MTMxLjV9LHsieCI6NzUwLjc1Mjg0MDkwOTA5MDksInkiOjEwNi41fV0=" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/><path d="M912.75,82L916.917,82C921.083,82,929.417,82,937.083,82C944.75,82,951.75,82,955.25,82L958.75,82" id="my-svg-L_Factory_Comp_0" class="edge-thickness-normal edge-pattern-solid edge-thickness-normal edge-pattern-solid flowchart-link" style=";" data-edge="true" data-et="edge" data-id="L_Factory_Comp_0" data-points="W3sieCI6OTEyLjc1LCJ5Ijo4Mn0seyJ4Ijo5MzcuNzUsInkiOjgyfSx7IngiOjk2Mi43NSwieSI6ODJ9XQ==" data-look="classic" marker-end="url(#my-svg_flowchart-v2-pointEnd)"/></g><g class="edgeLabels"><g class="edgeLabel"><g class="label" data-id="L_Seed_CS_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_CS_Styles_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Skin_Factory_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Styles_Factory_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g><g class="edgeLabel"><g class="label" data-id="L_Factory_Comp_0" transform="translate(0, 0)"><foreignObject width="0" height="0"><div xmlns="http://www.w3.org/1999/xhtml" class="labelBkg" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="edgeLabel"></span></div></foreignObject></g></g></g><g class="nodes"><g class="node default" id="my-svg-flowchart-Seed-0" data-look="classic" transform="translate(77.6015625, 131.5)"><rect class="basic label-container" style="" x="-69.6015625" y="-24.5" width="139.203125" height="49"/><g class="label" style="" transform="translate(-41.6015625, -10.5)"><rect/><foreignObject width="83.203125" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Color semilla</p></span></div></foreignObject></g></g><g class="node default" id="my-svg-flowchart-CS-1" data-look="classic" transform="translate(295.6328125, 131.5)"><rect class="basic label-container" style="" x="-98.4296875" y="-24.5" width="196.859375" height="49"/><g class="label" style="" transform="translate(-70.4296875, -10.5)"><rect/><foreignObject width="140.859375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>ColorScheme (paleta)</p></span></div></foreignObject></g></g><g class="node default" id="my-svg-flowchart-Styles-3" data-look="classic" transform="translate(553.3203125, 131.5)"><rect class="basic label-container" style="" x="-109.2578125" y="-24.5" width="218.515625" height="49"/><g class="label" style="" transform="translate(-81.2578125, -10.5)"><rect/><foreignObject width="162.515625" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Styles (campos PalColor)</p></span></div></foreignObject></g></g><g class="node default" id="my-svg-flowchart-Skin-4" data-look="classic" transform="translate(553.3203125, 32.5)"><rect class="basic label-container" style="" x="-94.8046875" y="-24.5" width="189.609375" height="49"/><g class="label" style="" transform="translate(-66.8046875, -10.5)"><rect/><foreignObject width="133.609375" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Skin (forma/espacio)</p></span></div></foreignObject></g></g><g class="node default" id="my-svg-flowchart-Factory-5" data-look="classic" transform="translate(812.6640625, 82)"><rect class="basic label-container" style="" x="-100.0859375" y="-24.5" width="200.171875" height="49"/><g class="label" style="" transform="translate(-72.0859375, -10.5)"><rect/><foreignObject width="144.171875" height="21"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table-cell; white-space: nowrap; line-height: 1.5; max-width: 200px; text-align: center;"><span class="nodeLabel"><p>Skin.button()/label()/…</p></span></div></foreignObject></g></g><g class="node default" id="my-svg-flowchart-Comp-9" data-look="classic" transform="translate(1090.75, 82)"><rect class="basic label-container" style="" x="-128" y="-35" width="256" height="70"/><g class="label" style="" transform="translate(-100, -21)"><rect/><foreignObject width="200" height="42"><div xmlns="http://www.w3.org/1999/xhtml" style="display: table; white-space: break-spaces; line-height: 1.5; max-width: 200px; text-align: center; width: 200px;"><span class="nodeLabel"><p>ComponentStyle final del componente</p></span></div></foreignObject></g></g></g></g></g><defs><filter id="my-svg-drop-shadow" height="130%" width="130%"><feDropShadow dx="4" dy="4" stdDeviation="0" flood-opacity="0.06" flood-color="var(--text-dim)"/></filter></defs><defs><filter id="my-svg-drop-shadow-small" height="150%" width="150%"><feDropShadow dx="2" dy="2" stdDeviation="0" flood-opacity="0.06" flood-color="var(--text-dim)"/></filter></defs><linearGradient id="my-svg-gradient" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="var(--border-strong)" stop-opacity="1"/><stop offset="100%" stop-color="hsl(0, 0%, 90%)" stop-opacity="1"/></linearGradient></svg>
</div>
Es decir: el **Skin** monta el estilo leyendo los **colores del tema** — cambiar uno no afecta al otro.

## Buenas prácticas
- Elige **un** skin global en el bootstrap; usa `.skin(...)` por componente solo en excepciones.
- Skin custom = **forma/espaciado/sombra**. Color y claro/oscuro = `ColorScheme`.

## Errores comunes
- Intentar cambiar **colores** sobrescribiendo el skin — los colores vienen del `ColorScheme`, no del skin.
- Mezclar skins diferentes en la misma pantalla sin necesidad (inconsistencia visual).

## Véase también
- [Esquemas de colores](/docs/ui/theming/color-schemes) · [Modo claro/oscuro](/docs/ui/theming/dark-mode) · [Estilizar componentes](/docs/ui/theming/styling-components)