🎨 Design Specification: MUTHUR-6000 Retro-Terminal Theme Suite

This document defines the visual design system, styling guidelines, and interactive aesthetics of the MUTHUR-6000 Retro-Terminal Theme Suite for Visual Studio Code. It details how the analog phosphor-tube characteristics of late 70s and 80s tactical CRT computers (such as Weyland-Yutani mainframe terminals in the Alien universe) are mapped to a modern development editor.

📺 1. CRT Hardware Simulation Philosophy

Visual Studio Code is natively a modern, flat flat-panel utility. The MUTHUR-6000 theme suite bridges this gap by mimicking hardware anomalies and constraints as functional visual elements:

Phosphor Over-Excitation (Neon Glow): Active text elements, highlights, and matching brackets simulate an electron beam hitting a phosphor layer. We translate this into vibrant, highly-saturated text colors and glowing drop-shadows.
Phosphor Decay & Screen Burn-In (Muted Text): Secondary details, such as code comments, line numbers, and indentation guides, simulate aged phosphor decay (screen burn-in) by using deeply-dimmed, low-contrast variants of the theme's core color.
Rigid Grid Dividers: Modern themes utilize borderless layouts and soft dropshadows. MUTHUR-6000 utilizes sharp, solid 1px borders to recreate the retro-industrial metal chassis look.

🎨 2. The 4 Main Phosphor Variants

The theme is compiled into four distinct color variants, each serving a different atmospheric tone:

Theme Variant	Phosphor Vibe	Core Colors	Code Application
MUTHUR-6000 Amber	Nostalgic / Aliens	Deep Amber, Charcoal Black, Orange	Standard coding and warm-light night sessions.
MUTHUR-6000 Green	Phosphor Phosphor	Emerald Green, Forest Black, Lime Green	The classic cybernetic matrix feel.
MUTHUR-6000 Blue	Cold Military / Tactical	Glacial Cyan, Ocean Black, Cobalt Blue	Cold-war tactical workspace aesthetic.
MUTHUR-6000 Red	Alarm State / Emergency	Crimson Red, Volcanic Black, Fuchsia	High-alert tactical diagnostic style.

⌨️ 3. Premium Typography Recommendations

To complete the retro-computer feel, standard default system fonts should be replaced with industrial monospaced fonts that feature clean, blocky terminal proportions. We recommend:

Share Tech Mono (Highly Recommended - Google Fonts)
- Why: Features the exact squared-off micro-matrix grid feel of classic computer terminals.
Fira Code / JetBrains Mono
- Why: Modern coding legibility with programmer ligatures, optimized with theme colors.

How to configure in VS Code `settings.json`:

"editor.fontFamily": "'Share Tech Mono', 'Fira Code', 'Courier New', monospace",
"editor.fontSize": 14,
"editor.fontWeight": "bold",
"editor.letterSpacing": 0.5,

// Blinking Block Cursor & Font Unification for Integrated Terminal
"terminal.integrated.cursorStyle": "block",
"terminal.integrated.cursorBlinking": true,
"terminal.integrated.fontFamily": "'Share Tech Mono', 'Fira Code', 'Courier New', monospace",
"terminal.integrated.fontSize": 14,
"terminal.integrated.letterSpacing": 0.5,
"terminal.integrated.lineHeight": 1.25,

// CRITICAL: Disable GPU acceleration to force HTML DOM rendering and unlock glows!
"terminal.integrated.gpuAcceleration": "off"

🚀 4. Enabling Physical CRT Screen Effects

To experience real-time physical scanlines, subtle cathode refresh flickers, rounded monitor bezel framing, and glowing neon text shadows in both the editor and the integrated terminal, you can inject our retro CRT styles using the modern, actively-supported "Custom UI Style" extension (by subframe7536).

Step-by-Step CRT Activation Guide:

Install the Loader Extension: Search for and install the extension "Custom UI Style" (by subframe7536) in the VS Code Extensions Marketplace.

Add Configuration to settings.json: Open your global user settings (Ctrl+Shift+P -> Preferences: Open User Settings (JSON)) and add the following self-contained, high-performance styling blocks:

"custom-ui-style.imports": [
    "file:///C:/Users/{Username}/.vscode/extensions/lovecraft.muthur-6000-terminal-theme-1.0.0/effects.css"
],
"custom-ui-style.stylesheet": {
    "@keyframes crt-flicker": "0% { opacity: 0.82; } 50% { opacity: 0.95; } 100% { opacity: 0.82; }",
    "@keyframes cursor-blink": "to { visibility: hidden; }",
    ".monaco-editor .mtk, .editor-container .view-line span": "text-shadow: 0 0 3px currentColor, 0 0 8px currentColor;",
    ".pane-body.integrated-terminal .xterm-rows": "text-shadow: 0 0 3px currentColor, 0 0 8px currentColor;",
    ".pane-body.integrated-terminal .xterm-cursor": "box-shadow: 0 0 8px currentColor !important; background: currentColor !important;",
    ".monaco-workbench::after": "content: \" \"; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: repeating-linear-gradient(rgba(18, 16, 16, 0) 0px, rgba(18, 16, 16, 0) 3px, rgba(0, 0, 0, 0.24) 3px, rgba(0, 0, 0, 0.24) 6px); background-size: 100% 6px; z-index: 99999; pointer-events: none; animation: crt-flicker 0.15s infinite;",
    ".monaco-workbench::before": "content: \" \"; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: radial-gradient(circle, transparent 78%, rgba(0, 0, 0, 0.80) 100%); z-index: 100000; pointer-events: none; opacity: 1.0; box-shadow: inset 0 0 35px rgba(0, 0, 0, 0.95) !important; border-radius: 16px; border: 1px solid rgba(0, 0, 0, 0.4);",
    ".monaco-editor .cursor": "animation: cursor-blink 1s steps(2, start) infinite !important;",
    ".tab.active": "box-shadow: inset 0 0 10px currentColor;",
    ".monaco-workbench": "border-radius: 16px; overflow: hidden;"
}

(Note: Replace {Username} in custom-ui-style.imports with your actual Windows or macOS/Linux username. The inline custom-ui-style.stylesheet block is pre-optimized with single-braced keyframe styling for maximum compatibility and runs completely immune to local file sandbox/CORS blocks!)

Reload the Stylesheet:
- Windows users: Close VS Code completely, right-click the shortcut and select "Run as Administrator" to ensure patching permissions.
- Open the Command Palette (Ctrl+Shift+P), type and run "Custom UI Style: Reload" (or "Neu laden").
Restart Visual Studio Code: Close and reopen Visual Studio Code entirely.
- Note: VS Code will alert you that your installation is "corrupted". This is normal and expected when modifying core stylesheets. Click the gear icon on the alert and choose "Don't show again" (or use the Fix VSCode Checksums extension).
Verify: Open a code file and your integrated terminal panel. You will see a beautiful, subtle cathode refresh flicker, vertical interlaced scanlines, darkened screen vignettes, curved monitor bezels, and glowing text tokens!

6.9 KiB Raw Permalink Blame History