Add theme from xtermjs.org and make it the demo default

xtermjs · Jul 23, 2022 · f34a30b · f34a30b
1 parent 91a362b
commit f34a30b
Showing 1 changed file with 29 additions and 3 deletions.
diff --git a/demo/client.ts b/demo/client.ts
@@ -99,6 +99,27 @@ const actionElements = {
 };
 const paddingElement = <HTMLInputElement>document.getElementById('padding');
 
+const xtermjsTheme = {
+ foreground: '#F8F8F8',
+ background: '#2D2E2C',
+ selection: '#5DA5D533',
+ black: '#1E1E1D',
+ brightBlack: '#262625',
+ red: '#CE5C5C',
+ brightRed: '#FF7272',
+ green: '#5BCC5B',
+ brightGreen: '#72FF72',
+ yellow: '#CCCC5B',
+ brightYellow: '#FFFF72',
+ blue: '#5D5DD3',
+ brightBlue: '#7279FF',
+ magenta: '#BC5ED1',
+ brightMagenta: '#E572FF',
+ cyan: '#5DA5D5',
+ brightCyan: '#72F0FF',
+ white: '#F8F8F8',
+ brightWhite: '#FFFFFF'
+};
 function setPadding(): void {
  term.element.style.padding = parseInt(paddingElement.value, 10).toString() + 'px';
  addons.fit.instance.fit();
@@ -175,7 +196,8 @@ function createTerminal(): void {
  term = new Terminal({
  allowTransparency: true,
  windowsMode: isWindows,
- fontFamily: 'Fira Code, courier-new, courier, monospace'
+ fontFamily: 'Fira Code, courier-new, courier, monospace',
+ theme: xtermjsTheme
  } as ITerminalOptions);
 
  // Load addons
@@ -311,7 +333,7 @@ function initOptions(term: TerminalType): void {
  fontWeightBold: ['normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900'],
  logLevel: ['debug', 'info', 'warn', 'error', 'off'],
  rendererType: ['dom', 'canvas'],
- theme: ['default', 'sapphire', 'light'],
+ theme: ['default', 'xtermjs', 'sapphire', 'light'],
  wordSeparator: null
  };
  const options = Object.getOwnPropertyNames(term.options);
@@ -344,7 +366,8 @@ function initOptions(term: TerminalType): void {
  html += '</div><div class="option-group">';
  Object.keys(stringOptions).forEach(o => {
  if (stringOptions[o]) {
- html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${term.options[o] === v ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
+ const selectedOption = o === 'theme' ? 'xtermjs' : term.options[o];
+ html += `<div class="option"><label>${o} <select id="opt-${o}">${stringOptions[o].map(v => `<option ${v === selectedOption ? 'selected' : ''}>${v}</option>`).join('')}</select></label></div>`;
  } else {
  html += `<div class="option"><label>${o} <input id="opt-${o}" type="text" value="${term.options[o]}"/></label></div>`;
  }
@@ -392,6 +415,9 @@ function initOptions(term: TerminalType): void {
  case 'default':
  value = undefined;
  break;
+ case 'xtermjs':
+ // Custom theme to match style of xterm.js logo
+ value = xtermjsTheme;
  case 'sapphire':
  // Color source: https://github.com/Tyriar/vscode-theme-sapphire
  value = {