CRT CSS: Retrocomputing Aesthetics for VS Code

CRT CSS Top 20 VS Code Extensions: A curated collection of twenty extensions that bring a retro CRT monitor aesthetic to your coding environment — CSS-crafted scanlines, phosphor glow, DOS-era navigation, and a FILES.BBS listing style, all keyboard-driven.

The Nostalgia Is the Point

Modern code editors are optimized for information density and productivity. Dark themes, minimal chrome, ligature fonts. The aesthetic is consistent, competent, and somewhat invisible.

The CRT aesthetic is the opposite of invisible. Scanlines. Green phosphor on black. The slight glow that CRT monitors had, where bright text seemed to bleed into the surrounding darkness. FILES.BBS lists. Keyboard-only navigation because the mouse wasn't always available.

This project doesn't claim that the old way was better. It claims that the visual language of 1980s and early 1990s computing has a texture that modern UIs lack, and that texture is worth recreating — not for productivity, but for the pleasure of it.

The Collection

Twenty extensions, each chosen for how it contributes to the aesthetic or enhances the retro experience:

Theme extensions transform the editor's color scheme. The collection favors high-contrast monochrome themes — amber on black, green on black, white on black — that evoke specific CRT phosphor types.

Font extensions pair with retro themes. Monospace fonts with the slightly uneven spacing of dot-matrix printers. Bitmap-style fonts for the ultimate in pixelated nostalgia.

Navigation extensions add keyboard-driven workflows that reduce or eliminate mouse dependency — closer to how you'd navigate in a text-based environment.

Visual effect extensions add the actual CRT effects: scanlines via CSS overlays, subtle flicker, and the bloom effect around bright text.

The CRT Effects in CSS

The core aesthetic is implemented in CSS injected via the Custom CSS and JS Loader extension:

/* Scanlines overlay */
body::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.3) 2px,
    rgba(0, 0, 0, 0.3) 4px
  );
  pointer-events: none;
  z-index: 9999;
}

/* Phosphor glow on text */
.monaco-editor .view-line {
  text-shadow:
    0 0 2px currentColor,
    0 0 8px rgba(0, 255, 70, 0.4);
}

/* Subtle screen curve effect */
.monaco-editor {
  border-radius: 4px;
  box-shadow: inset 0 0 100px rgba(0, 0, 0, 0.5);
}

The scanline effect uses a repeating gradient that alternates transparent and semi-opaque bands at 4px intervals — the natural pitch of a CRT raster at typical zoom levels.

One of the project's distinctive features is the FILES.BBS-style file listing. Bulletin Board Systems of the 1980s displayed downloadable files in a columnar text format — filename, size, date, description — that's remarkably readable at a glance.

─────────────────────────────────────────────────────────
FILENAME.TXT   4,096 bytes   12-15-91   A sample text file
PROGRAM.EXE   32,768 bytes   11-30-91   Main executable
README.DOC     2,048 bytes   11-30-91   Documentation
─────────────────────────────────────────────────────────

The extension adds this view as an alternative to VS Code's default file explorer — navigable with arrow keys, with j/k vim bindings available, and styled to match the chosen theme.

Keyboard Shortcuts

The full collection is navigable without a mouse:

Ctrl+Shift+P  Command palette (standard VS Code)
Ctrl+`        Toggle terminal
j/k           Navigate file list (vim mode)
Space         Open file preview
Enter         Open file in editor
Escape        Close overlay/return to editor
F1            Help / extension list

The keyboard-first design isn't just aesthetic — it's genuinely faster for the operations you do repeatedly. Opening files, switching buffers, running commands. The mouse is optional.

Installation

The collection installs as a VS Code extension pack:

code --install-extension lucianofedericopereira.crt-css-top20

Or search "CRT CSS" in the VS Code extension marketplace.

After installation, open the command palette and run CRT CSS: Apply Theme to choose your phosphor color and effect intensity.

A Note on Productivity

This collection will not make you write code faster. It might make you enjoy writing code more, which is a different kind of value. The boundary between tool and toy is blurry in software — the tools people enjoy using are often the ones they use most.

License

GNU GPLv2