# ターミナルテーマ

xterm ターミナル用の組み込みカラーテーマです。`useTerminal` の `theme` オプションに渡します。

## インポート

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

## 使い方

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

## 利用可能なテーマ

### デフォルト

| アクセス                       | スタイル                                    |
| ------------------------------ | ------------------------------------------- |
| `TerminalThemes.dark.default`  | Tailwind カラーパレットベースのダークテーマ |
| `TerminalThemes.dark.modern`   | Slate/Rose アクセントのモダンダーク         |
| `TerminalThemes.light.default` | Tailwind カラーパレットベースのライトテーマ |
| `TerminalThemes.light.modern`  | Slate/Rose アクセントのモダンライト         |

### 人気テーマ

| アクセス                    | 説明                             |
| --------------------------- | -------------------------------- |
| `TerminalThemes.nord`       | 北欧的なブルーのパレット         |
| `TerminalThemes.dracula`    | ビビッドなダークテーマ           |
| `TerminalThemes.oneDark`    | Atom One Dark ベース             |
| `TerminalThemes.monokaiPro` | Monokai Pro ベース               |
| `TerminalThemes.tokyoNight` | Tokyo Night カラースキームベース |
| `TerminalThemes.nightOwl`   | VS Code Night Owl ベース         |

### Gruvbox

| アクセス                       | スタイル              |
| ------------------------------ | --------------------- |
| `TerminalThemes.gruvbox.dark`  | レトログルーヴ ダーク |
| `TerminalThemes.gruvbox.light` | レトログルーヴ ライト |

### Solarized

| アクセス                         | スタイル         |
| -------------------------------- | ---------------- |
| `TerminalThemes.solarized.dark`  | Solarized ダーク |
| `TerminalThemes.solarized.light` | Solarized ライト |

### Catppuccin

| アクセス                              | スタイル                   |
| ------------------------------------- | -------------------------- |
| `TerminalThemes.catppuccin.latte`     | 最も明るい（ライトテーマ） |
| `TerminalThemes.catppuccin.frappe`    | クールな中間ダーク         |
| `TerminalThemes.catppuccin.macchiato` | ウォームな中間ダーク       |
| `TerminalThemes.catppuccin.mocha`     | 最も暗い                   |

### Everforest

| アクセス                          | スタイル               |
| --------------------------------- | ---------------------- |
| `TerminalThemes.everforest.dark`  | グリーントーンのダーク |
| `TerminalThemes.everforest.light` | グリーントーンのライト |

## カスタムテーマ

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

```tsx
const { terminalRef, instance } = useTerminal({
  theme: {
    background: "#282a36",
    foreground: "#f8f8f2",
    cursor: "#f8f8f2",
    black: "#21222c",
    red: "#ff5555",
    green: "#50fa7b",
    yellow: "#f1fa8c",
    blue: "#bd93f9",
    magenta: "#ff79c6",
    cyan: "#8be9fd",
    white: "#f8f8f2",
    brightBlack: "#6272a4",
    brightRed: "#ff6e6e",
    brightGreen: "#69ff94",
    brightYellow: "#ffffa5",
    brightBlue: "#d6acff",
    brightMagenta: "#ff92df",
    brightCyan: "#a4ffff",
    brightWhite: "#ffffff"
  }
});
```