FLUXLAY

ターミナルテーマ

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

インポート

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

使い方

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

利用可能なテーマ

デフォルト

アクセススタイル
TerminalThemes.dark.defaultTailwind カラーパレットベースのダークテーマ
TerminalThemes.dark.modernSlate/Rose アクセントのモダンダーク
TerminalThemes.light.defaultTailwind カラーパレットベースのライトテーマ
TerminalThemes.light.modernSlate/Rose アクセントのモダンライト

人気テーマ

アクセス説明
TerminalThemes.nord北欧的なブルーのパレット
TerminalThemes.draculaビビッドなダークテーマ
TerminalThemes.oneDarkAtom One Dark ベース
TerminalThemes.monokaiProMonokai Pro ベース
TerminalThemes.tokyoNightTokyo Night カラースキームベース
TerminalThemes.nightOwlVS Code Night Owl ベース

Gruvbox

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

Solarized

アクセススタイル
TerminalThemes.solarized.darkSolarized ダーク
TerminalThemes.solarized.lightSolarized ライト

Catppuccin

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

Everforest

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

カスタムテーマ

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

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