FLUXLAY

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

ThemeVariantAccess
DefaultDark / LightTerminalThemes.dark.default / TerminalThemes.light.default
ModernDark / LightTerminalThemes.dark.modern / TerminalThemes.light.modern
Nord—TerminalThemes.nord
Dracula—TerminalThemes.dracula
GruvboxDark / LightTerminalThemes.gruvbox.dark / TerminalThemes.gruvbox.light
SolarizedDark / LightTerminalThemes.solarized.dark / TerminalThemes.solarized.light
One Dark—TerminalThemes.oneDark
CatppuccinLatte / Frappe / Macchiato / MochaTerminalThemes.catppuccin.*
Monokai Pro—TerminalThemes.monokaiPro
Tokyo Night—TerminalThemes.tokyoNight
Night Owl—TerminalThemes.nightOwl
EverforestDark / LightTerminalThemes.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.