Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/bastndev/Lynx-Theme-Pro/llms.txt

Use this file to discover all available pages before exploring further.

The Lynx LIQUID theme is unlike every other theme in the collection. Rather than simply recoloring VS Code tokens, LIQUID injects platform-specific CSS directly into the VS Code workbench shell, producing a real frosted-glass transparency effect that lets your desktop or wallpaper bleed through the editor UI. The underlying color theme — built on a deep navy base with Tokyo Night-inspired syntax colors — is designed to look beautiful both with and without the glass effect active.
Experimental feature — read before activating.VS Code does not expose a native API for window-level blur or transparency. To achieve the glassmorphism effect, the Lynx LIQUID engine patches VS Code’s internal workbench JavaScript and HTML files directly on disk. This is the same technique used by popular community extensions such as GlassIt and Vibrancy Continued.After the patch is applied, VS Code will display the notification: “Your VS Code installation appears to be corrupt.” This warning is cosmetic — the extension and editor continue to function normally. You can safely click “Don’t Show Again” to dismiss it permanently.Microsoft does not support or endorse workbench patching. Use this theme with the understanding that it modifies files outside of the official extension API.

​
Activation

1

Open the Color Theme picker

Open the Command Palette (Ctrl/Cmd + Shift + P) and run Preferences: Color Theme.
2

Select the Liquid theme

Choose the entry:
8. LIQUIDㅤㅤ(Lynx Theme) 🧪
3

Wait for the engine to activate

The extension detects your operating system and runs the appropriate installation routine. A notification appears confirming the effect was installed and prompting you to restart VS Code.
4

Restart VS Code

Click Restart now in the notification, or restart manually. The glassmorphism effect becomes visible after the restart.

​
Theme Properties

PropertyValue
Typevs-dark
Semantic classtheme.liquid-glass
Semantic highlightingEnabled
Editor background#0c1018a8 (semi-transparent)
Sidebar / Panel / Terminal#00000000 (fully transparent)
Cursor foreground#7aa2f7
Editor selection#7aa2f728
Gutter added#73daca60
Gutter modified#7aa2f760
Gutter deleted#f7768e60
The theme JSON sets most shell surfaces — activity bar, side bar, status bar, title bar, panels, tabs, breadcrumbs, and minimap — to fully transparent (#00000000). This is intentional: the transparency effect supplied by the CSS engine, not the color theme tokens, provides the actual background. The editor content area retains a semi-transparent dark blue-gray (#0c1018a8) so text remains readable over any wallpaper.

​
How It Works

The LIQUID engine lives in src/themes/liquid-theme/ and is the most complex piece of the extension. Its activation is governed by a lifecycle that runs entirely within the VS Code extension host.
The extension registers an onStartupFinished activation event, which means the engine runs after VS Code has fully loaded — avoiding any interference with the editor’s own startup sequence.On activation, the engine:
  1. Calls getPlatformHandler() to detect the OS and load the right platform module.
  2. Reads the lynxLiquidInstalled key from context.globalState to determine whether a previous installation is still in place.
  3. If the Liquid theme is currently active, calls handler.handleActivation(context) to apply or re-verify the CSS patch.
  4. If the Liquid theme is not active and no installation exists, calls cleanupLiquidResidue to ensure no orphaned patches remain from a previous session.
  5. Registers a onDidChangeConfiguration listener so that switching to or away from the Liquid theme at runtime triggers activation or deactivation immediately — no restart required for the uninstall path.

​
Platform Detection

The engine selects the correct platform module at runtime using process.platform. If the platform is not recognized, the extension loads normally but the glass effect is silently skipped. 
function getPlatformHandler(): PlatformHandler | null {
  switch (process.platform) {
    case 'linux':
      return require('./platforms/linux');
    case 'darwin':
      return require('./platforms/macos');
    case 'win32':
      return require('./platforms/windows');
    default:
      return null;
  }
}
The theme-active check that guards every activation and deactivation call: 
function isLiquidThemeActive() {
  const current = vscode.workspace
    .getConfiguration()
    .get<string>('workbench.colorTheme');
  return current === LIQUID_THEME_LABEL;
}
Where LIQUID_THEME_LABEL is the exact string '8. LIQUIDㅤㅤ(Lynx Theme) 🧪' — matching the theme’s name entry in package.json character for character.

​
Platform Support

Linux

Supported. The engine uses pkexec (Polkit) when elevated write permissions are needed for the VS Code application directory. Snap and Flatpak installs are not supported — use the .deb package. A shell script handles the restart sequence so the editor reopens automatically after closing.

macOS

Supported. The engine uses Electron’s native vibrancy option (under-window) to produce the frosted-glass effect, which integrates with macOS window compositing. Administrator credentials may be requested via a system dialog if the VS Code app directory requires elevated access.

Windows

Supported. The engine injects Electron window background material options for Windows transparency APIs. After installation, a restart prompt is shown so the transparency effect takes effect.
On unsupported platforms (e.g., ChromeOS Linux containers, remote SSH sessions), getPlatformHandler() returns null and the extension logs a warning: [Lynx Liquid] Unsupported platform: <platform>. The extension remains active and the base color theme is applied normally — only the glass effect is skipped.

​
Recovery

If VS Code displays the “Your installation appears to be corrupt” notification after activating the Liquid theme, this is expected behavior. It is safe to click “Don’t Show Again”. The editor, all extensions, and all VS Code functionality continue to work normally. To fully remove the glass effect and restore VS Code to an unmodified state, switch to any other theme in the theme picker. The LIQUID engine detects the theme change, runs handleDeactivation, removes all patches, and prompts you to restart.
VS Code calculates a checksum of its own workbench files on startup and compares it against the expected values shipped with the release. When the LIQUID engine patches workbench.esm.html and the main workbench JS bundle, the file checksums change, which causes VS Code’s integrity checker to flag the installation as modified.This is a deliberate security signal from Microsoft — it means the workbench files are not identical to what was shipped. The warning does not indicate malware, data loss, or functional damage. Every workbench-patching theme or extension (GlassIt, Vibrancy Continued, Custom CSS and JS Loader) triggers the same warning for the same reason.The Lynx LIQUID engine removes all patches cleanly when you switch away from the theme, which restores the file checksums and causes the warning to disappear after the next restart.
For a full technical deep-dive into how the Liquid engine resolves VS Code paths, builds the CSS bundle, manages staged file writes, and handles the CSP patch, see the Architecture page.

Build docs developers (and LLMs) love

Get started for freeTalk to us