FLUXLAY

Terminal Themes

Built-in color themes for the xterm terminal. Pass any theme to useTerminal's theme option.

Import

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

Usage

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

Available Themes

Default

AccessStyle
TerminalThemes.dark.defaultDark theme based on Tailwind color palette
TerminalThemes.dark.modernModern dark with Slate/Rose accents
TerminalThemes.light.defaultLight theme based on Tailwind color palette
TerminalThemes.light.modernModern light with Slate/Rose accents

Popular

AccessDescription
TerminalThemes.nordArctic, north-bluish palette
TerminalThemes.draculaVivid dark theme
TerminalThemes.oneDarkBased on Atom One Dark
TerminalThemes.monokaiProBased on Monokai Pro
TerminalThemes.tokyoNightBased on Tokyo Night color scheme
TerminalThemes.nightOwlBased on Night Owl for VS Code

Gruvbox

AccessStyle
TerminalThemes.gruvbox.darkRetro groove dark
TerminalThemes.gruvbox.lightRetro groove light

Solarized

AccessStyle
TerminalThemes.solarized.darkSolarized dark
TerminalThemes.solarized.lightSolarized light

Catppuccin

AccessStyle
TerminalThemes.catppuccin.latteLightest (light theme)
TerminalThemes.catppuccin.frappeCool mid-dark
TerminalThemes.catppuccin.macchiatoWarm mid-dark
TerminalThemes.catppuccin.mochaDarkest

Everforest

AccessStyle
TerminalThemes.everforest.darkGreen-toned dark
TerminalThemes.everforest.lightGreen-toned light

Custom Themes

You can pass any xterm ITheme object:

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