# Skins (Material / iOS / Flutter) > Switch the visual identity — structure, shape and spacing — globally or per component. Source: https://crossfly.dev/docs/ui/theming/skins — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt # Skins A `Skin` defines the **structural visual identity** of all components: shape (corners), border thickness, spacing, shadows and default icons. There are three built in: **`MaterialSkin`**, **`IOSSkin`** and **`FlutterSkin`**. > **Skin ≠ colors.** Skin = **structure/renderer**; the **palette** (light/dark, primary/surface…) comes > from the [`ColorScheme`/`ThemeMode`](/docs/ui/theming/color-schemes). A custom skin changes **shape/spacing**, not color. ## Default skin `Skin.get()` returns `MaterialSkin` by default — or **`IOSSkin` automatically on iOS**. ## Complete example (copy, paste and run) ```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 /** Runnable main screen. Point the launcher (classname) and run: gradlew :lwjgl3:run */ public class MainWindow extends Window { @Override public void onShow() throws Exception { super.onShow(); Skin.set(new IOSSkin()); // global skin = iOS structure/shape (colors still come from the theme) setLayout(new VerticalLayout()); // Buttons to switch the global skin in real time: 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 per component: this button stays iOS even if the global one changes. Button fixoIos = new Button("Sempre iOS"); fixoIos.skin(new IOSSkin()); add(LAY_AUTO, fixoIos); } } ``` > The snippets below show **only the core** (what goes inside `onShow()`). To run them, place them in the `MainWindow` skeleton above. ## Switch the global skin Affects all components that do not have their own skin: ```java Skin.set(new IOSSkin()); // the whole UI gets the iOS look Skin.set(new FlutterSkin()); // … or Flutter ``` ## Skin per component Overrides the global one only in that component: ```java meuBotao.skin(new IOSSkin()); // this button stays iOS, the rest remains Material ``` ## Custom skin (change shape/spacing, not color) Extend a skin and override the **structure hooks**: ```java public class RoundedSkin extends MaterialSkin { @Override public float borderRadius() { return 1.5f; } // nicely rounded corners @Override public float borderThick() { return 0.05f; } // thin border } // apply globally: Skin.set(new RoundedSkin()); ``` To **adapt colors** to light/dark, do **not** touch the skin — use `ColorScheme`/`ThemeMode` (see [Light/dark mode](/docs/ui/theming/dark-mode)). ## How the layers interact

In other words: the **Skin** builds the style by reading the **theme colors** — changing one does not affect the other. ## Best practices - Choose **one** global skin at bootstrap; use `.skin(...)` per component only for exceptions. - Custom skin = **shape/spacing/shadow**. Color and light/dark = `ColorScheme`. ## Common mistakes - Trying to change **colors** by overriding the skin — colors come from `ColorScheme`, not the skin. - Mixing different skins on the same screen without need (visual inconsistency). ## See also - [Color schemes](/docs/ui/theming/color-schemes) · [Light/dark mode](/docs/ui/theming/dark-mode) · [Styling components](/docs/ui/theming/styling-components)