# 样式与主题

> 按状态的 ComponentStyle、ARGB 颜色、Skin 以及在运行时切换明暗而无需重建 UI。

Source: https://crossfly.dev/zh/docs/learn/styling-and-themes — CrossFly documentation. Full docs as one file: https://crossfly.dev/llms-full.txt

# 5. 样式与主题

> **你将学到:** 在不写死数值的情况下赋予外观,并实时切换明暗主题。**前置条件:** [布局](/docs/learn/layouts)。

## 完整示例(复制、粘贴、运行)
定义应用主题(种子色 + skin),按状态为一个按钮设置样式,以及一个实时切换明↔暗的按钮 —— 整个 UI 无需手动重设样式即会跟随。可直接编译运行。
```java
package com.exemplo;

import dev.crossfly.ui.*;
import dev.crossfly.ui.layout.*;
import dev.crossfly.ui.style.*;
import dev.crossfly.ui.skin.*;

public class MainWindow extends Window
{
   @Override
   public void onShow() throws Exception
   {
      super.onShow();
      setLayout(new VerticalLayout());

      // 主题：一个种子生成完整方案；skin 定义形状
      Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);
      Skin.set(new IOSSkin());

      Button botao = new Button("Salvar");
      botao.style(new ComponentStyle()
         .backColor(Styles.primaryColor)   // 主题的 PalColor（跟随亮色/暗色）
         .textColor(0xFFFFFFFF)            // 固定的 int ARGB 0xAARRGGBB
         .borderRadius(0.6f)
         .pressable());                    // 启用按压反馈
      add(LAY_AUTO, botao);

      Button botaoTema = new Button("Alternar claro/escuro");
      botaoTema.onAction(c -> Styles.toggleDarkMode());   // 自动为整个 UI 重新换肤
      add(LAY_AUTO, botaoTema);
   }
}
```
> 下面的片段只展示**核心部分**(放在 `onShow()` 里的内容)。要运行,请把它们放进上面的 `MainWindow` 骨架里。

## `ComponentStyle` 与按状态的样式
每个组件都可以有三种样式,按帧选取:**default / focused / pressed**。
```java
botao.style(new ComponentStyle()
   .backColor(Styles.primaryColor)     // 主题的 PalColor（跟随亮色/暗色）
   .textColor(0xFFFFFFFF)              // 或固定的 int ARGB 0xAARRGGBB
   .borderRadius(0.6f)
   .pressable());                      // 启用按压反馈
```

## Skin 与配色方案
`Skin` 定义**形状**(Material/iOS/Flutter);`ColorScheme` 则从一个种子色定义**调色板**:
```java
Styles.setColorScheme(0xFF6750A4, ThemeMode.LIGHT);   // 一个种子 → 完整方案
Skin.set(new IOSSkin());                               // 更换全局视觉标识
```

## 在运行时切换明↔暗(无需重建 UI)
`setDarkMode(...)` 会**自动在所有窗口上重新应用主题** —— 如果你的样式使用了主题的 `PalColor`(`Styles.primaryColor` 等),颜色会自行变化:
```java
Button botaoTema = new Button("Modo escuro");
botaoTema.onAction(c -> Styles.toggleDarkMode());   // 整个 UI 随之更新，无需手动 restyle
```
对于会随模式**改变形状**的样式,请用 `styled(...)` 注册(见[明暗模式](/docs/ui/theming/dark-mode))。

## 本步骤所构建的
应用的**主题**(种子色 + skin)+ 一个实时**切换明/暗的按钮**。

## 回顾
`ComponentStyle`(default/focused/pressed);ARGB 颜色或主题的 `PalColor`;`Skin` = 形状,`ColorScheme` = 调色板;`toggleDarkMode()` 自行重设一切。

## 下一步
→ [处理输入](/docs/learn/handling-input)

## 另见
- [主题与样式(ui)](/docs/ui/theming) · 概念:[样式与主题](/docs/concepts/styling-and-theming-model)