Documentation
Themes

Terminal Themes

The terminal contains various in-built themes that you can use to customize the look of your terminal. You can access these themes by importing the themes module from the library.

Default Theme is poimandres

import {
  Terminal,
  TerminalInputBox,
  TerminalLoader,
  TerminalOutput,
  TerminalTitleBar,
  TerminalWelcomeMessage,
  themes,
} from '@envoy1084/react-terminal';
 
const MyComponent = () => {
  return (
    <Terminal theme={themes.aurora_x}>
      <TerminalTitleBar>
        <TerminalTitleBar.ActionGroup />
        <TerminalTitleBar.Title />
      </TerminalTitleBar>
      <TerminalWelcomeMessage />
      <TerminalOutput />
      <TerminalInputBox>
        <TerminalInputBox.Prompt />
        <TerminalInputBox.TextArea />
      </TerminalInputBox>
      <TerminalLoader />
    </Terminal>
  );
};
 
export default MyComponent;

Custom Theme

You can also create your own custom theme by passing an object with the required properties.

Example:

import { Terminal, Theme } from '@envoy1084/react-terminal';
 
const customTheme: Theme = {
  background: '#1b1e28',
  border: '#ffffff10',
  foreground: '#a6accd',
  selectionBackground: '#717cb425',
  selectionForeground: '#a6accd',
  ansiBlack: '#1b1e28',
  ansiBlue: '#89ddff',
  ansiBrightBlack: '#a6accd',
  ansiBrightBlue: '#ADD7FF',
  ansiBrightCyan: '#ADD7FF',
  ansiBrightGreen: '#5DE4c7',
  ansiBrightMagenta: '#f087bd',
  ansiBrightRed: '#d0679d',
  ansiBrightWhite: '#ffffff',
  ansiBrightYellow: '#fffac2',
  ansiCyan: '#89ddff',
  ansiGreen: '#5DE4c7',
  ansiMagenta: '#f087bd',
  ansiRed: '#d0679d',
  ansiWhite: '#ffffff',
  ansiYellow: '#fffac2',
};
 
const Page = () => {
  return <Terminal theme={customTheme}>{/** Other components */}</Terminal>;
};
 
export default Page;

Available Themes

  • poimandres
  • aurora_x
  • github_light
UtilitiesCommands