# Skins (Material / iOS / Flutter) > Trocar a identidade visual — estrutura, forma e espaçamento — global ou por componente. Source: https://crossfly.dev/pt/docs/ui/theming/skins — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt # Skins Um `Skin` define a **identidade visual estrutural** de todos os componentes: forma (cantos), espessura de borda, espaçamento, sombras e ícones padrão. Há três embutidos: **`MaterialSkin`**, **`IOSSkin`** e **`FlutterSkin`**. > **Skin ≠ cores.** Skin = **estrutura/renderer**; a **paleta** (claro/escuro, primary/surface…) vem > do [`ColorScheme`/`ThemeMode`](/docs/ui/theming/color-schemes). Um skin custom muda **forma/espaçamento**, não cor. ## Skin padrão `Skin.get()` retorna `MaterialSkin` por padrão — ou **`IOSSkin` automaticamente no iOS**. ## Exemplo completo (copiar, colar e rodar) ```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 /** Tela principal executável. Aponte o launcher (classname) e rode: gradlew :lwjgl3:run */ public class MainWindow extends Window { @Override public void onShow() throws Exception { super.onShow(); Skin.set(new IOSSkin()); // skin global = estrutura/forma iOS (cores continuam vindo do tema) setLayout(new VerticalLayout()); // Botões para trocar o skin global em tempo 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ão fica iOS mesmo que o global mude. Button fixoIos = new Button("Sempre iOS"); fixoIos.skin(new IOSSkin()); add(LAY_AUTO, fixoIos); } } ``` > Os trechos abaixo mostram **só o miolo** (o que vai dentro de `onShow()`). Para rodar, coloque-os no esqueleto `MainWindow` acima. ## Trocar o skin global Afeta todos os componentes que não têm skin próprio: ```java Skin.set(new IOSSkin()); // toda a UI ganha o visual iOS Skin.set(new FlutterSkin()); // … ou Flutter ``` ## Skin por componente Sobrescreve o global só naquele componente: ```java meuBotao.skin(new IOSSkin()); // este botão fica iOS, o resto continua Material ``` ## Skin customizado (mude forma/espaçamento, não cor) Estenda um skin e sobrescreva os **hooks de estrutura**: ```java public class RoundedSkin extends MaterialSkin { @Override public float borderRadius() { return 1.5f; } // cantos bem arredondados @Override public float borderThick() { return 0.05f; } // borda fina } // aplicar globalmente: Skin.set(new RoundedSkin()); ``` Para **adaptar cores** ao claro/escuro, **não** mexa no skin — use `ColorScheme`/`ThemeMode` (ver [Modo claro/escuro](/docs/ui/theming/dark-mode)). ## Como as camadas interagem

Ou seja: o **Skin** monta o estilo lendo as **cores do tema** — trocar um não afeta o outro. ## Boas práticas - Escolha **um** skin global no bootstrap; use `.skin(...)` por componente só em exceções. - Skin custom = **forma/espaçamento/sombra**. Cor e claro/escuro = `ColorScheme`. ## Erros comuns - Tentar mudar **cores** sobrescrevendo o skin — cores vêm do `ColorScheme`, não do skin. - Misturar skins diferentes na mesma tela sem necessidade (inconsistência visual). ## Veja também - [Esquemas de cores](/docs/ui/theming/color-schemes) · [Modo claro/escuro](/docs/ui/theming/dark-mode) · [Estilizar componentes](/docs/ui/theming/styling-components)