Theming: Phosphor Colors, CSS Variables, and Tokens

guest-portfolio.dev ships with two phosphor monitor themes — green (default) and amber — that evoke classic CRT terminals. Both themes are controlled entirely through CSS custom properties defined in assets/main.css. You can switch between them at runtime from inside the terminal, or add entirely new themes by defining a new CSS class and wiring it up in Terminal.js.

Built-in Themes

Switching Themes at Runtime

Type either command directly into the terminal prompt:

theme green
theme amber

Internally, Terminal.js handles the theme command in its switch statement and calls setTheme from TerminalContext, which applies a corresponding class to the root element:

case "theme":
  if (a[1] === "amber" || a[1] === "green") {
    setTheme(a[1]);
  }
  break;

Theme Comparison

Green (default)
Amber

Applied via the :root selector — no extra class needed.

:root {
  --color-primary: #39ff14;
  --color-bg:      #000000;
  --color-dim:     rgba(57, 255, 20, .3);
  --color-glow:    rgba(57, 255, 20, .5);
}

Variable	Value	Usage
`--color-primary`	`#39ff14`	All primary text, cursor, scrollbar thumb
`--color-bg`	`#000000`	Terminal background
`--color-dim`	`rgba(57, 255, 20, .3)`	Dimmed text, progress bar fill, borders
`--color-glow`	`rgba(57, 255, 20, .5)`	CRT text shadow, scrollbar hover

Applied when the .theme-amber class is present on the root element.

.theme-amber {
  --color-primary: #ffb000;
  --color-dim:     rgba(255, 176, 0, .3);
  --color-glow:    rgba(255, 176, 0, .5);
}

Variable	Value	Usage
`--color-primary`	`#ffb000`	All primary text, cursor, scrollbar thumb
`--color-dim`	`rgba(255, 176, 0, .3)`	Dimmed text, progress bar fill, borders
`--color-glow`	`rgba(255, 176, 0, .5)`	CRT text shadow, scrollbar hover

The amber theme inherits --color-bg: #000000 from :root — it only overrides the three color variables above.

Tailwind Color Tokens

Components use Tailwind utility classes backed by a custom color palette. The token values are baked directly into the compiled assets/main.css output:

Utility class	Hex / RGBA value	Typical use
`text-terminal-green`	`#39ff14`	Labels, prompts, ASCII art (green mode)
`text-terminal-amber`	`#ffb000`	Category headers, commit hashes
`text-terminal-white`	`#e6e6e6`	Body text, command output
`text-terminal-red`	`#ff003c`	Error messages, glitch hover effect
`text-terminal-dim`	`#39ff144d`	Unfilled progress bar segments
`bg-terminal-bg`	`#000000`	Terminal and CRT container background
`bg-terminal-dim`	`#39ff144d`	Dimmed background fills
`border-terminal-dim`	`#39ff144d`	Subtle dividers and borders
`border-terminal-green`	`#39ff14`	Highlighted or active borders

Tailwind tokens are hardcoded to green values regardless of the active theme. For theme-aware coloring in new components, use the CSS custom properties (var(--color-primary), etc.) directly rather than Tailwind utility classes.

Typography

The terminal uses the VT323 monospace bitmap font, which is loaded from Google Fonts via an @import at the top of main.css:

@import "https://fonts.googleapis.com/css2?family=VT323&display=swap";

The global body rule sets it as the base font with a slightly enlarged size to ensure legibility at typical monitor resolutions:

body {
  font-family: VT323, monospace;
  font-size: 1.25rem;
  line-height: 1.2;
}

code, kbd, pre, and samp elements also explicitly inherit VT323, monospace so that all terminal output — including preformatted blocks — remains visually consistent.

Adding a Third Theme

You can define any number of custom themes by following three steps.

1. Define the CSS class

Add a new theme block to assets/main.css overriding the same three custom properties:

/* assets/main.css */
.theme-cyan {
  --color-primary: #00fff5;
  --color-dim:     rgba(0, 255, 245, .3);
  --color-glow:    rgba(0, 255, 245, .5);
}

2. Wire up the terminal command

In components/Terminal.js, extend the theme case in the command switch to accept the new name:

case "theme":
  if (a[1] === "amber" || a[1] === "green" || a[1] === "cyan") {
    setTheme(a[1]);
    s = <div className="text-terminal-white">Theme set to {a[1]}</div>;
  } else {
    s = <div className="text-terminal-red">Usage: theme [green|amber|cyan]</div>;
  }
  break;

3. Update TerminalContext to apply the class

TerminalContext sets document.body.className when setTheme is called. The current logic is a ternary that only handles the two built-in themes:

// contexts/TerminalContext.js
document.body.className = s === "amber" ? "theme-amber" : "";

To support a third theme, replace the ternary with a lookup map:

const themeClasses = { amber: "theme-amber", cyan: "theme-cyan" };
document.body.className = themeClasses[s] ?? "";

Once all three steps are complete, theme cyan will be a valid command in the live terminal.

Overview

Terminal Commands

Components

Customization

Theming: Phosphor Colors, CSS Variables, and Tokens

Built-in Themes

Switching Themes at Runtime

Theme Comparison

Tailwind Color Tokens

Typography

Adding a Third Theme

1. Define the CSS class

2. Wire up the terminal command

3. Update TerminalContext to apply the class

Build docs developers (and LLMs) love

Overview

Terminal Commands

Components

Customization

Documentation Index

​Built-in Themes

​Switching Themes at Runtime

​Theme Comparison

​Tailwind Color Tokens

​Typography

​Adding a Third Theme

​1. Define the CSS class

​2. Wire up the terminal command

​3. Update TerminalContext to apply the class

Build docs developers (and LLMs) love

Built-in Themes

Switching Themes at Runtime

Theme Comparison

Tailwind Color Tokens

Typography

Adding a Third Theme

1. Define the CSS class

2. Wire up the terminal command

3. Update TerminalContext to apply the class