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

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

組み込みテーマの使用

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 オブジェクトを渡します。

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"
  }
});

詳細はターミナルテーマリファレンスを参照してください。