Synthwave '84: How a VS Code Theme Hacks the Editor's DOM for Neon Glow Effects

Hook

With over 5,000 stars, Synthwave '84 is one of the most popular VS Code themes that technically violates Microsoft's extension guidelines—and users love it anyway.

Context

Most VS Code themes play by the rules. They define color tokens in JSON files, map them to syntax scopes, and let the editor handle rendering. This approach is stable, update-proof, and officially supported. It's also limited. VS Code's theming API doesn't support advanced visual effects like glows, shadows, or animations. You can change colors, but you can't fundamentally alter how text renders.

Synthwave '84, created by Robb Owen, takes a different approach. Inspired by the neon-soaked aesthetic of 1980s sci-fi and synthwave music culture, it wanted to do more than just apply pink and cyan colors—it wanted glowing text that looks like it's radiating light. Since VS Code's extension API doesn't support this, the theme does something radical: it directly modifies VS Code's internal CSS files to inject custom styles with text-shadow effects. This makes it technically unsupported, triggers warning messages, and breaks with every VS Code update. It's also visually stunning and demonstrates creative problem-solving when official APIs fall short.

Technical Insight

The Synthwave '84 extension consists of two components: a standard color theme (JSON definitions) and a JavaScript extension that performs file system modifications. The color theme handles syntax highlighting the normal way, defining token colors for keywords, strings, functions, and other code elements. The magic happens in the extension code, which locates VS Code's core workbench files and injects custom CSS.

Here's how the glow injection works conceptually:

// Simplified version of the injection mechanism
const vscodeInstallPath = path.dirname(require.main.filename);
const workbenchCSSPath = path.join(
  vscodeInstallPath,
  'vs/workbench/workbench.desktop.main.css'
);

// Custom CSS that creates the glow effect
const glowCSS = `
.mtk5, .mtk6, .mtk7, .mtk8 {
  text-shadow: 0 0 2px #fff,
               0 0 3px #fff,
               0 0 5px #fff,
               0 0 8px #ff00de,
               0 0 12px #ff00de;
}
`;

// Inject the custom CSS into VS Code's core files
const originalCSS = fs.readFileSync(workbenchCSSPath, 'utf8');
const modifiedCSS = originalCSS + '\n' + glowCSS;
fs.writeFileSync(workbenchCSSPath, modifiedCSS, 'utf8');

The extension targets specific Monaco editor token classes (.mtk5, .mtk6, etc.) that correspond to different syntax elements. By applying multiple layered text-shadows with varying blur radiuses and colors, it creates the illusion of neon tubes glowing. The effect uses progressively larger blur values to simulate light diffusion.

The implementation provides configuration options through VS Code's settings.json:

{
  "synthwave84.brightness": 0.45,
  "synthwave84.disableGlow": false
}

The brightness setting controls the opacity and intensity of the glow effects, allowing users to tune the effect for their display and personal preference. Setting it too high creates eye strain; too low and the signature effect disappears. The default of 0.45 represents a balance Owen determined through user feedback.

What makes this approach both clever and problematic is that it modifies files that VS Code's integrity checker monitors. When VS Code detects these modifications, it displays a warning message in the title bar: "Your Code installation appears to be corrupt. Please reinstall." The extension includes logic to suppress this warning by also modifying the integrity check results, but this requires elevated permissions on most systems.

The extension exposes two commands through VS Code's command palette: "Synthwave '84: Enable Neon Dreams" and "Synthwave '84: Disable Neon Dreams". These commands handle the injection and removal of the custom CSS, and they require VS Code to reload after execution. Because the modifications happen at the file system level rather than through VS Code's extension host process, they persist across sessions until explicitly removed or overwritten by a VS Code update.

The CSS-based approach has performance characteristics worth noting. Text-shadow is a relatively expensive CSS property, especially with multiple layers. Each glowing character requires the browser's rendering engine to calculate and composite multiple shadow layers. On older hardware or when working with large files, this can introduce noticeable input lag. The extension doesn't implement any optimization strategies like limiting glow to visible portions of the editor or reducing shadow layers based on performance metrics—it's all or nothing.

Gotcha

The most obvious limitation is the update fragility. Every time VS Code updates, it replaces the modified workbench files with clean versions, removing the glow effects. Users must re-run the "Enable Neon Dreams" command after each update, which typically means monthly maintenance. For developers who update VS Code frequently or work in environments with automatic updates, this becomes tedious quickly.

Permissions present another practical barrier. On Windows, enabling the glow requires running VS Code as Administrator at least once. On macOS and Linux, users need write permissions to the VS Code installation directory, which often means using sudo. Corporate environments with locked-down permissions may make enabling the glow impossible without IT intervention. Even when technically possible, many developers are rightfully hesitant to run their editor with elevated privileges regularly.

The language support caveat is significant but often overlooked. Synthwave '84 was primarily designed and tested with JavaScript, HTML/CSS, React, and Elixir. The color choices and glow applications were tuned for these languages' syntax patterns. When working in Python, Go, Rust, or other languages, certain constructs may have poor contrast, missing highlighting, or inappropriate glow effects. The theme defines colors for standard TextMate scopes, but languages with unique scope patterns may not look as polished. This isn't a bug—it's the natural result of a theme optimized for specific use cases. Before committing to Synthwave '84 as your daily theme, test it thoroughly with your actual codebase.

The eye strain warning in the README isn't just legal cover—it's genuine. The high-contrast color palette combined with glowing text creates visual fatigue faster than conventional themes. What looks amazing in screenshots or for brief coding sessions becomes uncomfortable during multi-hour debugging sessions. The glow effect also reduces text clarity slightly due to the blur, which can make distinguishing similar characters harder. For developers with astigmatism or other vision considerations, the glow may be actively counterproductive.

Verdict

Use Synthwave '84 if you're creating content (screencasts, tutorials, presentations) where visual impact matters, coding on side projects where aesthetics boost your motivation, or you explicitly want a theme that feels different from conventional editor design. It's also perfect for demos and conference talks where the distinctive look makes your screen memorable. The base color scheme without glow is actually quite usable daily if you like the palette but need more practicality. Skip if you work primarily in languages beyond the core supported set, can't tolerate monthly maintenance after VS Code updates, need a stable production environment without file modifications, have vision sensitivities that make high-contrast or glowing text uncomfortable, or work in security-conscious environments where modifying application files is prohibited. For most developers, Synthwave '84 works best as a special-occasion theme rather than a daily driver—use it when you want inspiration or a change of pace, but keep a conventional theme configured for serious work.