Customize Terminal Theme

Fluxlay provides 20+ built-in terminal themes. You can also create custom themes.

Using Built-in Themes

import { useTerminal, TerminalThemes } from "@fluxlay/react";
 
const { terminalRef, instance } = useTerminal({
  theme: TerminalThemes.catppuccin.mocha
});

Available Themes

Theme	Variant	Access
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`

Custom Themes

Pass an xterm ITheme object:

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

See the Terminal Themes Reference for all color values.