Themes & Customization

Overview

NetStacks gives the terminal visual customization that matters for long network sessions: a set of built-in color themes, custom themes built by overriding a base theme, a choice of monospace fonts, font size and weight, and per-session overrides so you can make production tabs look different from lab tabs. The right theme reduces eye strain, improves the readability of colored CLI output, and gives you a visual cue for which environment a tab is connected to.

Built-in Themes

NetStacks ships 12 built-in terminal themes, including a couple aimed at network engineering. The full list (in registry order) is:

• NetStacks Light -- soft slate light theme, the companion to the app's light UI; ANSI palette darkened for contrast
• Default Dark -- VS Code-inspired dark theme with strong contrast (the default for new sessions)
• Monokai -- classic warm-toned developer theme
• Dracula -- popular dark theme with vibrant accent colors
• Solarized Dark -- precision color scheme tuned for readability
• Solarized Light -- light variant for bright rooms
• Nord -- arctic-inspired muted palette that is easy on the eyes
• Gruvbox Dark -- retro groove colors with warm contrast
• Cisco Blue -- dark-blue background with Cisco-flavored accents, handy for IOS / NX-OS work
• Matrix Green -- green-on-black for a retro terminal feel
• Retro Amber -- amber-on-dark for vintage terminal nostalgia
• SunNight -- gold-on-black, gentle for late-night maintenance windows

What You Can Customize

• Color theme -- pick any built-in theme as the global default, or override it per session
• Custom theme -- start from a built-in base theme and override the background, foreground, and/or cursor colors
• Font family -- choose from a default plus 11 named monospace fonts in the per-session and profile dropdowns
• Font size -- adjustable globally and per session, with a live preview while you drag the slider
• Font weight -- normal or bold terminal text
• Per-session overrides -- theme, font family, font size, and scrollback are stored per saved session

How It Works

The terminal renderer is built on xterm.js, the same library VS Code uses. Each theme is an xterm ITheme object that defines the background, foreground, cursor, selection, and the full 16-color ANSI palette (8 standard colors plus 8 bright variants). When a theme is selected, those values are applied to the xterm renderer.

Theme Resolution Order

1. Theme registry -- the 12 built-in themes live in a central registry, each with a unique ID (for example default, cisco, nord, netstacks-light, sunnight).
2. Global default -- the Terminal settings tab has a Default Theme that new sessions inherit.
3. Per-session override -- a saved session can store its own theme ID, font family, and font size. These win over the global default for that tab. Leaving the session theme as Default means it follows the global setting.
4. Fallback -- if a stored theme ID is unknown, the terminal falls back to the first theme in the registry.

Color Properties in a Theme

Each theme defines the following color values, which control how ANSI-colored CLI output is rendered:

Fonts

The terminal renders with whatever monospace font you select, falling back through Menlo / Monaco / Consolas when the chosen font is not installed. The per-session and profile font dropdowns offer a default plus 11 named families. The global Appearance → Font Family setting controls the application UI (not the terminal) and exposes a smaller subset of fonts, so set the terminal font from the session or profile dropdown.

Step-by-Step Guide

Workflow 1: Set the Global Default Theme

1. Open Settings (Cmd/Ctrl+,)
2. Go to the Terminal settings tab
3. Pick a theme from Default Theme -- new sessions use it
4. Try Cisco Blue for IOS / NX-OS work, or Nord / SunNight for a low-contrast late-night option

Workflow 2: Set the Terminal Font and Weight

1. Open Settings (Cmd/Ctrl+,) → Terminal
2. Set Font Weight to Normal or Bold, and toggle Copy on Select, Line Numbers, or Hover Lookups to taste
3. To change the terminal font family or size for a specific tab, use the per-session settings in Workflow 3 (the global Appearance font controls the app UI, not the terminal)

Workflow 3: Per-Session Theme and Font Profiles

1. Right-click the session tab you want to customize
2. Choose Session Settings
3. Open the Terminal tab, then the Display section
4. Set Terminal Theme for this session (leave on Default to follow the global theme)
5. Optionally set Font Family and drag Font Size -- both preview live on the terminal as you change them
6. Adjust Scrollback if needed (per-session, default 10,000 lines)
7. Save -- the session keeps these settings instead of the global defaults

Code Examples

Theme IDs

Each built-in theme has a stable ID used when storing a global default or a per-session override:

netstacks-light   NetStacks Light
default           Default Dark      (default)
monokai           Monokai
dracula           Dracula
solarized-dark    Solarized Dark
solarized-light   Solarized Light
nord              Nord
gruvbox-dark      Gruvbox Dark
cisco             Cisco Blue
matrix            Matrix Green
retro-amber       Retro Amber
sunnight          SunNight

What a Built-in Theme Looks Like

Built-in themes are xterm ITheme objects with a full ANSI palette. This is the Cisco Blue theme as defined in the registry:

{
  "id": "cisco",
  "name": "Cisco Blue",
  "theme": {
    "background": "#00274c",
    "foreground": "#ffffff",
    "cursor": "#00bceb",
    "cursorAccent": "#00274c",
    "selectionBackground": "#005073",
    "black": "#000000",
    "red": "#ff5252",
    "green": "#00d26a",
    "yellow": "#ffc107",
    "blue": "#00bceb",
    "magenta": "#e040fb",
    "cyan": "#00bcd4",
    "white": "#ffffff",
    "brightBlack": "#546e7a",
    "brightRed": "#ff8a80",
    "brightGreen": "#69f0ae",
    "brightYellow": "#ffd740",
    "brightBlue": "#40c4ff",
    "brightMagenta": "#ea80fc",
    "brightCyan": "#84ffff",
    "brightWhite": "#ffffff"
  }
}

Custom Theme: Base + Overrides

A custom theme is defined as a base theme plus optional overrides for the background, foreground, and cursor colors. Only those three keys can be overridden; every other color (the full ANSI palette, selection, cursor accent) is inherited from the base theme. There is no full 20-value custom theme and no arbitrary theme-import flow in the current build.

{
  "baseTheme": "default",
  "background": "#0d1117",
  "foreground": "#c9d1d9",
  "cursor": "#58a6ff"
}

The result is the Default Dark palette with a darker GitHub-style background, a softer foreground, and a blue cursor. To recolor a light theme, base it on netstacks-light or solarized-light instead:

{
  "baseTheme": "netstacks-light",
  "background": "#eef2f6",
  "cursor": "#0067b0"
}

Per-Session Environment Profiles

A practical convention for using per-session theme and font overrides to keep environments visually distinct:

# Right-click tab > Session Settings > Terminal > Display

Production devices:
  Theme:        Cisco Blue
  Font:         JetBrains Mono, 14px
  Use case:     High-visibility cue when working on production

Staging / Lab:
  Theme:        Nord
  Font:         Fira Code, 14px
  Use case:     Clearly distinct from production

Development / Local:
  Theme:        Dracula
  Font:         Cascadia Code, 15px
  Use case:     Comfortable for extended work

How Theme Colors Map to CLI Output

Network devices emit ANSI color codes; your theme decides the actual color each ANSI slot renders as. The same show interfaces output picks up the active theme's palette:

# show interfaces GigabitEthernet0/1 (Cisco IOS)
# Terminal output colors are mapped through your active theme.

GigabitEthernet0/1 is up, line protocol is up    # "up" often green
  Hardware is Gigabit Ethernet, address is aabb.cc00.0101
  Internet address is 10.0.0.1/30
  MTU 1500 bytes, BW 1000000 Kbit/sec
     0 input errors, 0 CRC                        # "0 errors" green
     0 output errors, 0 collisions                # errors would be red

# With the Cisco Blue theme:
#   green   #00d26a  -> "up" status, zero errors
#   red     #ff5252  -> "down" status, non-zero errors
#   yellow  #ffc107  -> warnings, high utilization
#   cyan    #00bcd4  -> interface names, addresses

Q&A

Q: How many built-in themes are there?

A: 12: NetStacks Light, Default Dark, Monokai, Dracula, Solarized Dark, Solarized Light, Nord, Gruvbox Dark, Cisco Blue, Matrix Green, Retro Amber, and SunNight. Default Dark is the default for new sessions. Cisco Blue and SunNight are the most network-engineering-friendly options.

Q: Can I create a custom theme?

A: Yes, as a base theme plus overrides. A custom theme picks one built-in base and optionally overrides its background, foreground, and cursor colors; everything else (the full ANSI palette and selection colors) is inherited from the base. The build does not support defining all 20 colors from scratch or importing an arbitrary external theme file.

Q: How do I change the terminal font?

A: Set it per session: right-click the tab → Session Settings → Terminal → Display, then pick a Font Family (a default plus 11 named fonts including JetBrains Mono, Fira Code, Cascadia Code, SF Mono, and Hack) and drag Font Size. Both preview live. The global Appearance font setting controls the app UI, not the terminal.

Q: Can I have a different theme per session?

A: Yes. Right-click a tab → Session Settings → Terminal → Display → Terminal Theme. Leave it on Default to follow the global theme, or pick a specific theme for that session. Theme, font family, font size, and scrollback are all stored per saved session.

Q: Does the theme change how device output is colored?

A: Yes. Devices send ANSI color codes (for example green for "up", red for errors); the theme maps each ANSI slot to a specific color. With Cisco Blue, green renders as #00d26a and red as #ff5252 against the dark-blue background.

Q: Can I configure the cursor style or ligatures?

A: No. The cursor is a blinking block and is not configurable. Programming ligatures are not rendered even with fonts like Fira Code, because the terminal does not load a ligature shaping addon. Choose a font for its letterforms.

Q: Is there a GPU-acceleration toggle or window opacity setting?

A: No toggle. The terminal uses GPU-accelerated WebGL rendering automatically and falls back to the DOM renderer when WebGL is unavailable. There is no window-opacity, bell, or minimum-contrast control in the current build.

Troubleshooting

Theme Not Applying

• Confirm the global default in Settings → Terminal → Default Theme
• If a session looks wrong, check its override: right-click the tab → Session Settings → Terminal → Display → Terminal Theme. Set it back to Default to follow the global theme
• Themes apply on session initialization; open a fresh tab to confirm a global change took effect

Custom Theme Not Looking Right

• Use valid hex strings for overrides (for example #1a1b26). Only background, foreground, and cursor are overridable -- other colors come from the base theme
• Make sure baseTheme is a valid theme ID (for example default, dracula, nord, netstacks-light). An unknown ID falls back to the first registry theme

Font Rendering Issues

• The font must be installed on your system. If it is missing, the terminal falls back through Menlo / Monaco / Consolas to a generic monospace font
• If a programming font is not showing ligatures, that is expected -- the terminal does not shape ligatures
• Font size and family preview live while you edit them in Session Settings; closing without saving reverts the preview to the original values

Colors Looking Off on External Displays

• External monitors with different color profiles can shift theme colors. Calibrate the display if accuracy matters
• Solarized themes are tuned for specific gamma and can look washed out on uncalibrated panels -- try a higher-contrast theme like Default Dark or Nord

Per-Session Overrides Not Persisting

• Save the session settings dialog after changing theme, font, or scrollback
• Per-session appearance is stored with the saved session, so it persists for that session across restarts

Related Features

• Terminal Overview -- the terminal interface that themes customize
• Keyboard Shortcuts -- shortcuts including font-size adjustment
• Connecting to Devices -- session settings where per-session themes and fonts live
• Tabs & Split Panes -- per-tab sessions that can each carry their own theme
• Device Types -- how device detection complements theme-based color rendering