# ターミナルテーマのカスタマイズ

Fluxlay には 20 以上の組み込みターミナルテーマがあります。カスタムテーマも作成できます。

## 組み込みテーマの使用

```tsx
import { useTerminal, TerminalThemes } from "@fluxlay/react";

const { terminalRef, instance } = useTerminal({
  theme: TerminalThemes.catppuccin.mocha
});
```

## 利用可能なテーマ

| テーマ      | バリアント                         | アクセス                                                             |
| ----------- | ---------------------------------- | -------------------------------------------------------------------- |
| Default     | Dark / Light                       | `TerminalThemes.dark.default` / `TerminalThemes.light.default`       |
| Modern      | Dark / Light                       | `TerminalThemes.dark.modern` / `TerminalThemes.light.modern`         |
| Nord        | —                                  | `TerminalThemes.nord`                                                |
| Dracula     | —                                  | `TerminalThemes.dracula`                                             |
| Gruvbox     | Dark / Light                       | `TerminalThemes.gruvbox.dark` / `TerminalThemes.gruvbox.light`       |
| Solarized   | Dark / Light                       | `TerminalThemes.solarized.dark` / `TerminalThemes.solarized.light`   |
| One Dark    | —                                  | `TerminalThemes.oneDark`                                             |
| Catppuccin  | Latte / Frappe / Macchiato / Mocha | `TerminalThemes.catppuccin.*`                                        |
| Monokai Pro | —                                  | `TerminalThemes.monokaiPro`                                          |
| Tokyo Night | —                                  | `TerminalThemes.tokyoNight`                                          |
| Night Owl   | —                                  | `TerminalThemes.nightOwl`                                            |
| Everforest  | Dark / Light                       | `TerminalThemes.everforest.dark` / `TerminalThemes.everforest.light` |

## カスタムテーマ

xterm の `ITheme` オブジェクトを渡します。

```tsx
const { terminalRef, instance } = useTerminal({
  theme: {
    background: "#1e1e2e",
    foreground: "#cdd6f4",
    cursor: "#f5e0dc",
    black: "#45475a",
    red: "#f38ba8",
    green: "#a6e3a1",
    yellow: "#f9e2af",
    blue: "#89b4fa",
    magenta: "#f5c2e7",
    cyan: "#94e2d5",
    white: "#bac2de"
  }
});
```

詳細は[ターミナルテーマリファレンス](/ja/studio/developer/reference/sdk/terminal-themes.md)を参照してください。