feat(registry): add code snippet blocks with VS Code workbench (#1113)

* feat(registry): add VS Code theme visualizer example Full VS Code workbench recreation with per-character typing animation across 12 built-in themes. Includes activity bar, sidebar, tabs, editor with line-by-line cursor tracking, terminal panel, and status bar — all driven by official VS Code theme JSON files. Themes: Dark Modern, Dark 2026, Dark+, Light Modern, Light 2026, Light+, Visual Studio Dark, Visual Studio Light, High Contrast, High Contrast Light, Solarized Light, Monokai. Includes build scripts to regenerate compositions from theme JSON. * feat(registry): add 12 code snippet blocks for hyperframes add code Individual blocks for each VS Code built-in theme, all tagged "code" so `npx hyperframes add code` installs the full set. Each block is a self-contained VS Code workbench with per-character typing animation, activity bar, sidebar, tabs, terminal, and status bar driven by official theme JSON data. * docs: add mdx pages for code snippet blocks and example - 12 block doc pages under catalog/blocks/code-snippet-* - "Code Snippets" nav group in docs.json - vscode-theme-visualizer entry in examples.mdx * docs: revert examples.mdx — code snippets belong in catalog only * docs: drop redundant 'Code Snippet' prefix from sidebar titles * docs: add video previews to code snippet catalog pages * style: format HTML, CSS, and MJS files for CI * fix: address review feedback — build pipeline, LICENSE, dead code, nav order 1. Build script now regenerates both example compositions AND published blocks in registry/blocks/code-snippet-*/, keeping them in sync. 2. Add MIT LICENSE for vendored VS Code theme JSONs (microsoft/vscode). 3. Remove dead `chars` variable from runtime, build script, all blocks, and all example compositions. 4. Alphabetize Code Snippets nav group in docs.json to match catalog convention. * style: format all build-generated files (render-entries, CSS, index)
2026-05-28 16:02:44 -04:00
parent 55c4a11884
commit 5245e19062
83 changed files with 22171 additions and 0 deletions
@@ -0,0 +1,67 @@
+---
+title: "Dark 2026"
+description: "The newest VS Code dark theme with refined token scopes and updated palette."
+---
+
+# Dark 2026
+
+VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-dark-2026
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-dark-2026.html` | `compositions/code-snippet-dark-2026.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-dark-2026"
+  data-composition-src="compositions/code-snippet-dark-2026.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Dark Modern"
+description: "The default dark theme — clean and contemporary with comfortable contrast."
+---
+
+# Dark Modern
+
+VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-dark-modern
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-dark-modern.html` | `compositions/code-snippet-dark-modern.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-dark-modern"
+  data-composition-src="compositions/code-snippet-dark-modern.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Dark+"
+description: "Classic dark theme with enhanced syntax highlighting for popular languages."
+---
+
+# Dark+
+
+VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-dark-plus
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-dark-plus.html` | `compositions/code-snippet-dark-plus.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-dark-plus"
+  data-composition-src="compositions/code-snippet-dark-plus.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "High Contrast Light"
+description: "Maximum contrast light theme for accessibility."
+---
+
+# High Contrast Light
+
+VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-high-contrast-light
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-high-contrast-light.html` | `compositions/code-snippet-high-contrast-light.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-high-contrast-light"
+  data-composition-src="compositions/code-snippet-high-contrast-light.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "High Contrast"
+description: "Maximum contrast dark theme for accessibility."
+---
+
+# High Contrast
+
+VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-high-contrast
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-high-contrast.html` | `compositions/code-snippet-high-contrast.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-high-contrast"
+  data-composition-src="compositions/code-snippet-high-contrast.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Light 2026"
+description: "The newest VS Code light theme with refined token scopes and updated palette."
+---
+
+# Light 2026
+
+VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-light-2026
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-light-2026.html` | `compositions/code-snippet-light-2026.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-light-2026"
+  data-composition-src="compositions/code-snippet-light-2026.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Light Modern"
+description: "The default light theme — a fresh, modern take on the classic VS light experience."
+---
+
+# Light Modern
+
+VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-light-modern
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-light-modern.html` | `compositions/code-snippet-light-modern.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-light-modern"
+  data-composition-src="compositions/code-snippet-light-modern.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Light+"
+description: "Classic light theme with enhanced syntax highlighting for popular languages."
+---
+
+# Light+
+
+VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-light-plus
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-light-plus.html` | `compositions/code-snippet-light-plus.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-light-plus"
+  data-composition-src="compositions/code-snippet-light-plus.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Monokai"
+description: "The iconic warm-toned dark theme beloved by developers worldwide."
+---
+
+# Monokai
+
+VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-monokai
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-monokai.html` | `compositions/code-snippet-monokai.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-monokai"
+  data-composition-src="compositions/code-snippet-monokai.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Solarized Light"
+description: "Ethan Schoonover's precision-engineered light color scheme."
+---
+
+# Solarized Light
+
+VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-solarized-light
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-solarized-light.html` | `compositions/code-snippet-solarized-light.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-solarized-light"
+  data-composition-src="compositions/code-snippet-solarized-light.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Visual Studio Dark"
+description: "The traditional Visual Studio dark color scheme."
+---
+
+# Visual Studio Dark
+
+VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-visual-studio-dark
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-visual-studio-dark.html` | `compositions/code-snippet-visual-studio-dark.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-visual-studio-dark"
+  data-composition-src="compositions/code-snippet-visual-studio-dark.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -0,0 +1,67 @@
+---
+title: "Visual Studio Light"
+description: "The traditional Visual Studio light color scheme."
+---
+
+# Visual Studio Light
+
+VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.
+
+`code` `developer` `showcase` `vscode`
+
+<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
+
+## Install
+
+<CodeGroup>
+
+```bash Terminal
+npx hyperframes add code-snippet-visual-studio-light
+```
+
+</CodeGroup>
+
+Install all code snippet themes at once:
+
+```bash Terminal
+npx hyperframes add code
+```
+
+## Details
+
+| Property | Value |
+| --- | --- |
+| Type | Block |
+| Dimensions | 1920×1080 |
+| Duration | 11s |
+
+## Files
+
+| File | Target | Type |
+| --- | --- | --- |
+| `code-snippet-visual-studio-light.html` | `compositions/code-snippet-visual-studio-light.html` | hyperframes:composition |
+| `background.jpeg` | `assets/background.jpeg` | hyperframes:asset |
+
+## Usage
+
+After installing, add the block to your host composition:
+
+```html
+<div
+  data-composition-id="code-snippet-visual-studio-light"
+  data-composition-src="compositions/code-snippet-visual-studio-light.html"
+  data-start="0"
+  data-duration="11"
+  data-track-index="1"
+  data-width="1920"
+  data-height="1080"
+></div>
+```
+
+## Features
+
+- Full VS Code workbench recreation — activity bar, sidebar, explorer tree, editor tabs, breadcrumbs, terminal panel, status bar
+- Per-character typing animation with cursor tracking and active line highlight
+- Colors sourced from official `microsoft/vscode` built-in theme JSON
+- 3D perspective tilt at the end of the typing sequence
+- Terminal panel with mock test output
@@ -237,6 +237,23 @@
              "catalog/blocks/flowchart",
              "catalog/blocks/logo-outro"
            ]
+          },
+          {
+            "group": "Code Snippets",
+            "pages": [
+              "catalog/blocks/code-snippet-dark-2026",
+              "catalog/blocks/code-snippet-dark-modern",
+              "catalog/blocks/code-snippet-dark-plus",
+              "catalog/blocks/code-snippet-high-contrast",
+              "catalog/blocks/code-snippet-high-contrast-light",
+              "catalog/blocks/code-snippet-light-2026",
+              "catalog/blocks/code-snippet-light-modern",
+              "catalog/blocks/code-snippet-light-plus",
+              "catalog/blocks/code-snippet-monokai",
+              "catalog/blocks/code-snippet-solarized-light",
+              "catalog/blocks/code-snippet-visual-studio-dark",
+              "catalog/blocks/code-snippet-visual-studio-light"
+            ]
          }
        ]
      },
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-dark-2026",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Dark 2026",
+  "description": "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-dark-2026.html",
+      "target": "compositions/code-snippet-dark-2026.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-dark-modern",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Dark Modern",
+  "description": "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-dark-modern.html",
+      "target": "compositions/code-snippet-dark-modern.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-dark-plus",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Dark+",
+  "description": "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-dark-plus.html",
+      "target": "compositions/code-snippet-dark-plus.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-high-contrast-light",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - High Contrast Light",
+  "description": "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-high-contrast-light.html",
+      "target": "compositions/code-snippet-high-contrast-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-high-contrast",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - High Contrast",
+  "description": "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-high-contrast.html",
+      "target": "compositions/code-snippet-high-contrast.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-light-2026",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Light 2026",
+  "description": "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-light-2026.html",
+      "target": "compositions/code-snippet-light-2026.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-light-modern",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Light Modern",
+  "description": "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-light-modern.html",
+      "target": "compositions/code-snippet-light-modern.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-light-plus",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Light+",
+  "description": "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-light-plus.html",
+      "target": "compositions/code-snippet-light-plus.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-monokai",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Monokai",
+  "description": "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-monokai.html",
+      "target": "compositions/code-snippet-monokai.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-solarized-light",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Solarized Light",
+  "description": "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-solarized-light.html",
+      "target": "compositions/code-snippet-solarized-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-visual-studio-dark",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Visual Studio Dark",
+  "description": "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-visual-studio-dark.html",
+      "target": "compositions/code-snippet-visual-studio-dark.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,25 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "code-snippet-visual-studio-light",
+  "type": "hyperframes:block",
+  "title": "Code Snippet - Visual Studio Light",
+  "description": "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar.",
+  "tags": ["code", "developer", "showcase", "vscode"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 11,
+  "files": [
+    {
+      "path": "code-snippet-visual-studio-light.html",
+      "target": "compositions/code-snippet-visual-studio-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,42 @@
+# VS Code Theme Visualizer Design Notes
+
+## Intent
+
+This POC should feel like a real VS Code tutorial capture, not a generic code window. The purpose is to prove that HyperFrames can render code-writing scenes with faithful product context and theme-aware polish.
+
+## Visual Identity
+
+The visual identity is sourced from official VS Code built-in theme JSON files from `microsoft/vscode/extensions/theme-defaults/themes`. Do not invent palette values for the workbench. Colors should flow through the generated theme registry and CSS variables.
+
+## Theme Set
+
+- Light 2026
+- Dark 2026
+- Dark+
+- Dark Modern
+- Light+
+- Light Modern
+- Visual Studio Dark
+- Visual Studio Light
+- Default High Contrast
+- Default High Contrast Light
+
+## Typography
+
+- Workbench UI: `Inter`, then system UI fallbacks.
+- Code and terminal: `Menlo`, `Monaco`, `Consolas`, then monospace fallbacks.
+- Keep letter spacing at `0`.
+
+## Layout Rules
+
+- Recreate the VS Code workbench proportions: activity bar, explorer sidebar, editor tabs, editor gutter, status bar, and optional terminal panel.
+- Use official theme colors for editor, sidebar, tabs, activity bar, panel, terminal, and status bar surfaces.
+- Keep the composition full-frame at 1920x1080.
+- Cards are allowed only for the theme selector strip because they are repeated selectable items.
+- Do not use decorative gradients, glows, or synthetic color accents outside theme-derived colors.
+
+## Motion Rules
+
+- Theme changes should feel like command-palette theme switching: quick, crisp, and functional.
+- Code typing is the hero action. UI chrome should support it without becoming theatrical.
+- All animation must be deterministic and GSAP-controlled.
@@ -0,0 +1,390 @@
+(() => {
+  const codeLines = [
+    [{ text: "# A small functional toolkit", token: "comment" }],
+    [
+      { text: "def", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "pluck_deep", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "key", token: "parameter" },
+      { text: "):", token: "punctuation" },
+    ],
+    [
+      { text: "    ", token: "plain" },
+      { text: "return", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "lambda", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "obj", token: "parameter" },
+      { text: ": ", token: "punctuation" },
+      { text: "reduce", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "lambda", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "acc", token: "parameter" },
+      { text: ", ", token: "punctuation" },
+      { text: "k", token: "parameter" },
+      { text: ": ", token: "punctuation" },
+      { text: "acc", token: "variable" },
+      { text: "[", token: "punctuation" },
+      { text: "k", token: "variable" },
+      { text: "]", token: "punctuation" },
+      { text: ", ", token: "punctuation" },
+      { text: "key", token: "variable" },
+      { text: ".split", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "'.'", token: "string" },
+      { text: "), ", token: "punctuation" },
+      { text: "obj", token: "variable" },
+      { text: ")", token: "punctuation" },
+    ],
+    [],
+    [
+      { text: "def", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "compose", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "*", token: "operator" },
+      { text: "fns", token: "parameter" },
+      { text: "):", token: "punctuation" },
+    ],
+    [
+      { text: "    ", token: "plain" },
+      { text: "return", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "lambda", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "res", token: "parameter" },
+      { text: ": ", token: "punctuation" },
+      { text: "reduce", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "lambda", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "acc", token: "parameter" },
+      { text: ", ", token: "punctuation" },
+      { text: "fn", token: "parameter" },
+      { text: ": ", token: "punctuation" },
+      { text: "fn", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "acc", token: "variable" },
+      { text: "), ", token: "punctuation" },
+      { text: "fns", token: "variable" },
+      { text: ", ", token: "punctuation" },
+      { text: "res", token: "variable" },
+      { text: ")", token: "punctuation" },
+    ],
+    [],
+    [
+      { text: "def", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "unfold", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "f", token: "parameter" },
+      { text: ", ", token: "punctuation" },
+      { text: "seed", token: "parameter" },
+      { text: "):", token: "punctuation" },
+    ],
+    [
+      { text: "    ", token: "plain" },
+      { text: '"""Build a list by repeatedly applying f to a seed."""', token: "string" },
+    ],
+    [
+      { text: "    acc", token: "variable" },
+      { text: " = ", token: "operator" },
+      { text: "[]", token: "punctuation" },
+    ],
+    [
+      { text: "    while", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "True", token: "className" },
+      { text: ":", token: "punctuation" },
+    ],
+    [
+      { text: "        result", token: "variable" },
+      { text: " = ", token: "operator" },
+      { text: "f", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "seed", token: "variable" },
+      { text: ")", token: "punctuation" },
+    ],
+    [
+      { text: "        if", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "result", token: "variable" },
+      { text: " is ", token: "keyword" },
+      { text: "None", token: "className" },
+      { text: ":", token: "punctuation" },
+    ],
+    [
+      { text: "            return", token: "keyword" },
+      { text: " ", token: "plain" },
+      { text: "acc", token: "variable" },
+    ],
+    [
+      { text: "        acc", token: "variable" },
+      { text: ".append", token: "function" },
+      { text: "(", token: "punctuation" },
+      { text: "result", token: "variable" },
+      { text: "[", token: "punctuation" },
+      { text: "0", token: "number" },
+      { text: "])", token: "punctuation" },
+    ],
+    [
+      { text: "        seed", token: "variable" },
+      { text: " = ", token: "operator" },
+      { text: "result", token: "variable" },
+      { text: "[", token: "punctuation" },
+      { text: "1", token: "number" },
+      { text: "]", token: "punctuation" },
+    ],
+    [],
+  ];
+
+  const fallback = {
+    "activityBar.background": "#181818",
+    "activityBar.foreground": "#d7d7d7",
+    "activityBar.inactiveForeground": "#868686",
+    "activityBar.activeBorder": "#0078d4",
+    "sideBar.background": "#181818",
+    "sideBar.foreground": "#cccccc",
+    "sideBar.border": "#2b2b2b",
+    "tab.activeBackground": "#1f1f1f",
+    "tab.activeForeground": "#ffffff",
+    "tab.inactiveBackground": "#181818",
+    "tab.inactiveForeground": "#9d9d9d",
+    "tab.border": "#2b2b2b",
+    "editor.background": "#1f1f1f",
+    "editor.foreground": "#cccccc",
+    "editor.lineHighlightBackground": "#ffffff0a",
+    "editorLineNumber.foreground": "#6e7681",
+    "editorLineNumber.activeForeground": "#cccccc",
+    "panel.background": "#181818",
+    "panel.border": "#2b2b2b",
+    "statusBar.background": "#181818",
+    "statusBar.foreground": "#cccccc",
+    "statusBar.border": "#2b2b2b",
+    "titleBar.activeBackground": "#181818",
+    "titleBar.activeForeground": "#cccccc",
+  };
+
+  function color(theme, key) {
+    return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+  }
+
+  function solarizedGrey(theme) {
+    return theme.colors["tab.inactiveForeground"] || theme.colors["editor.foreground"] || "#586E75";
+  }
+
+  function setVar(root, name, value) {
+    root.style.setProperty(name, value);
+  }
+
+  function applyTheme(root, theme) {
+    const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+    setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+    setVar(root, "--activity-fg", solarizedUiGrey || color(theme, "activityBar.foreground"));
+    setVar(
+      root,
+      "--activity-muted",
+      solarizedUiGrey || color(theme, "activityBar.inactiveForeground"),
+    );
+    setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+    setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+    setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+    setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+    setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+    setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+    setVar(root, "--tab-active-fg", solarizedUiGrey || color(theme, "tab.activeForeground"));
+    setVar(root, "--tab-inactive-fg", solarizedUiGrey || color(theme, "tab.inactiveForeground"));
+    setVar(root, "--tab-border", color(theme, "tab.border"));
+    setVar(root, "--editor-bg", color(theme, "editor.background"));
+    setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+    setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+    setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+    setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+    setVar(root, "--panel-bg", color(theme, "panel.background"));
+    setVar(root, "--panel-border", color(theme, "panel.border"));
+    setVar(root, "--status-bg", color(theme, "statusBar.background"));
+    setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+    setVar(root, "--status-border", color(theme, "statusBar.border"));
+    setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+    setVar(
+      root,
+      "--status-remote-fg",
+      solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"),
+    );
+    setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+    setVar(root, "--title-fg", solarizedUiGrey || color(theme, "titleBar.activeForeground"));
+    setVar(root, "--token-comment", theme.tokens.comment);
+    setVar(root, "--token-keyword", theme.tokens.keyword);
+    setVar(root, "--token-function", theme.tokens.function);
+    setVar(root, "--token-string", theme.tokens.string);
+    setVar(root, "--token-number", theme.tokens.number);
+    setVar(root, "--token-variable", theme.tokens.variable);
+    setVar(root, "--token-parameter", theme.tokens.parameter);
+    setVar(root, "--token-operator", theme.tokens.operator);
+    setVar(root, "--token-punctuation", theme.tokens.punctuation);
+    setVar(root, "--token-class-name", theme.tokens.className);
+  }
+
+  function renderCode(root) {
+    const code = root.querySelector(".code");
+    codeLines.forEach((segments, index) => {
+      const line = document.createElement("div");
+      line.className = "line";
+      line.dataset.lineIndex = String(index);
+
+      const lineNumber = document.createElement("span");
+      lineNumber.className = "line-number";
+      lineNumber.textContent = String(index + 1);
+      line.appendChild(lineNumber);
+
+      const lineCode = document.createElement("span");
+      lineCode.className = "line-code";
+      segments.forEach((segment) => {
+        [...segment.text].forEach((char) => {
+          const span = document.createElement("span");
+          span.className =
+            segment.token === "plain"
+              ? "char"
+              : "char tok-" + segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+          span.dataset.lineIndex = String(index);
+          span.textContent = char;
+          lineCode.appendChild(span);
+        });
+      });
+      line.appendChild(lineCode);
+      code.appendChild(line);
+    });
+
+    const caret = document.createElement("span");
+    caret.className = "caret";
+    root.querySelector(".editor").appendChild(caret);
+  }
+
+  function caretPointForElement(editor, el) {
+    const editorBox = editor.getBoundingClientRect();
+    const charBox = el.getBoundingClientRect();
+    return {
+      x: charBox.right - editorBox.left + 2,
+      y: charBox.top - editorBox.top + 3,
+    };
+  }
+
+  function caretPointForLineStart(editor, line) {
+    const editorBox = editor.getBoundingClientRect();
+    const lineBox = line.getBoundingClientRect();
+    const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+    return {
+      x: codeBox.left - editorBox.left,
+      y: lineBox.top - editorBox.top + 3,
+    };
+  }
+
+  function lineHighlightY(editor, line) {
+    const editorBox = editor.getBoundingClientRect();
+    const lineBox = line.getBoundingClientRect();
+    return lineBox.top - editorBox.top;
+  }
+
+  function buildTimeline(root, compositionId) {
+    const tl = gsap.timeline({ paused: true });
+    const editor = root.querySelector(".editor");
+    const caret = root.querySelector(".caret");
+    const activeLine = root.querySelector(".active-line");
+    const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+    const lineStartTimes = [];
+    const charSchedule = [];
+    let cursorTime = 0.95;
+
+    lineEls.forEach((line, lineIndex) => {
+      const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+      lineStartTimes[lineIndex] = cursorTime;
+      lineChars.forEach((char, charIndex) => {
+        charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+      });
+      cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+    });
+
+    gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+    gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+    tl.from(
+      root.querySelector(".header"),
+      { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" },
+      0,
+    );
+    tl.from(
+      root.querySelector(".workbench"),
+      { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" },
+      0.1,
+    );
+    tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+    lineStartTimes.forEach((time, lineIndex) => {
+      const line = lineEls[lineIndex];
+      tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+      tl.set(caret, caretPointForLineStart(editor, line), time);
+      tl.call(
+        () => {
+          lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+        },
+        [],
+        time,
+      );
+    });
+    charSchedule.forEach(({ char, time }) => {
+      tl.set(char, { opacity: 1 }, time);
+      tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+    });
+    tl.to(
+      root.querySelector(".caret"),
+      { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" },
+      0.95,
+    );
+    tl.from(
+      root.querySelector(".terminal"),
+      { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" },
+      7.55,
+    );
+    tl.from(
+      root.querySelector(".terminal-body").children,
+      { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" },
+      8.05,
+    );
+    tl.to(
+      root.querySelector(".workbench"),
+      { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" },
+      9.35,
+    );
+    tl.to(
+      root.querySelector(".workbench"),
+      { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" },
+      10.08,
+    );
+
+    window.__timelines = window.__timelines || {};
+    window.__timelines[compositionId] = tl;
+
+    const previewTime = new URLSearchParams(window.location.search).get("t");
+    if (previewTime !== null) {
+      tl.time(Number(previewTime));
+    }
+  }
+
+  window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+    const root =
+      document.querySelector('[data-composition-id="' + compositionId + '"] .vscode-theme-scene') ||
+      document.querySelector('.vscode-theme-scene[data-composition-id="' + compositionId + '"]') ||
+      document.querySelector('[data-composition-id="' + compositionId + '"]');
+    const theme =
+      typeof themeOrId === "string"
+        ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+        : themeOrId;
+    if (!root || !theme) return;
+    root.querySelector(".theme-label").textContent = theme.label;
+    root.querySelector(".theme-source").textContent = theme.sourceFile;
+    applyTheme(root, theme);
+    renderCode(root);
+    buildTimeline(root, compositionId);
+  };
+})();
@@ -0,0 +1,483 @@
+* {
+  box-sizing: border-box;
+  letter-spacing: 0;
+}
+
+html,
+body {
+  margin: 0;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  background: #000000;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+
+.vscode-theme-scene {
+  --activity-bg: #181818;
+  --activity-fg: #d7d7d7;
+  --activity-muted: #868686;
+  --activity-active: #0078d4;
+  --sidebar-bg: #181818;
+  --sidebar-fg: #cccccc;
+  --sidebar-border: #2b2b2b;
+  --tab-bg: #181818;
+  --tab-active-bg: #1f1f1f;
+  --tab-active-fg: #ffffff;
+  --tab-inactive-fg: #9d9d9d;
+  --tab-border: #2b2b2b;
+  --editor-bg: #1f1f1f;
+  --editor-fg: #cccccc;
+  --editor-line: rgba(255, 255, 255, 0.04);
+  --gutter-fg: #6e7681;
+  --gutter-active-fg: #cccccc;
+  --panel-bg: #181818;
+  --panel-border: #2b2b2b;
+  --status-bg: #181818;
+  --status-fg: #cccccc;
+  --status-border: #2b2b2b;
+  --title-bg: #181818;
+  --title-fg: #cccccc;
+  --token-comment: #6a9955;
+  --token-keyword: #c586c0;
+  --token-function: #dcdcaa;
+  --token-string: #ce9178;
+  --token-number: #b5cea8;
+  --token-variable: #9cdcfe;
+  --token-parameter: #9cdcfe;
+  --token-operator: #d4d4d4;
+  --token-punctuation: #d4d4d4;
+  --token-class-name: #4ec9b0;
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+    url("../assets/background.jpeg") center / cover no-repeat;
+  color: var(--editor-fg);
+}
+
+.scene-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 54px 70px 92px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  perspective: 2200px;
+  perspective-origin: 56% 52%;
+}
+
+.header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  min-height: 66px;
+  text-shadow:
+    0 2px 12px rgba(0, 0, 0, 0.42),
+    0 14px 34px rgba(0, 0, 0, 0.32);
+}
+
+.kicker {
+  margin: 0 0 7px;
+  color: var(--gutter-fg);
+  font-size: 15px;
+  font-weight: 650;
+  text-transform: uppercase;
+  text-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.48),
+    0 10px 26px rgba(0, 0, 0, 0.36);
+}
+
+.title {
+  margin: 0;
+  color: var(--editor-fg);
+  font-size: 44px;
+  line-height: 1;
+  font-weight: 760;
+}
+
+.source-note {
+  width: 510px;
+  color: var(--gutter-fg);
+  font-size: 16px;
+  line-height: 1.35;
+  text-align: right;
+  text-shadow:
+    0 2px 10px rgba(0, 0, 0, 0.46),
+    0 12px 30px rgba(0, 0, 0, 0.34);
+}
+
+.workbench {
+  height: 824px;
+  display: grid;
+  grid-template-columns: 54px 290px 1fr;
+  grid-template-rows: 36px 1fr 26px;
+  overflow: hidden;
+  border: 1px solid var(--sidebar-border);
+  border-radius: 8px;
+  background: var(--editor-bg);
+  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+  transform: translateZ(0);
+  transform-origin: 82% 50%;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.titlebar {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 120px 1fr 210px;
+  align-items: center;
+  background: var(--title-bg);
+  color: var(--title-fg);
+  border-bottom: 1px solid var(--tab-border);
+  font-size: 12px;
+}
+
+.traffic {
+  display: flex;
+  gap: 8px;
+  padding-left: 18px;
+}
+
+.traffic span {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+}
+
+.traffic span:nth-child(1) {
+  background: #ff5f57;
+}
+.traffic span:nth-child(2) {
+  background: #ffbd2e;
+}
+.traffic span:nth-child(3) {
+  background: #28c840;
+}
+
+.window-title {
+  justify-self: center;
+  opacity: 0.84;
+}
+
+.command-center {
+  justify-self: end;
+  width: 176px;
+  height: 22px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+  border-radius: 5px;
+  color: color-mix(in srgb, var(--title-fg), transparent 18%);
+}
+
+.activity {
+  grid-row: 2 / 3;
+  background: var(--activity-bg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 0;
+  gap: 18px;
+}
+
+.activity-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--activity-muted);
+}
+
+.activity-icon.active {
+  color: var(--activity-fg);
+  border-left: 2px solid var(--activity-active);
+  padding-left: 4px;
+}
+
+.sidebar {
+  grid-row: 2 / 3;
+  background: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sidebar-title {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  color: var(--sidebar-fg);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.section-title {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+  border-top: 1px solid var(--sidebar-border);
+  border-bottom: 1px solid var(--sidebar-border);
+  color: var(--sidebar-fg);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.tree {
+  padding: 8px 0;
+  font-size: 13px;
+  line-height: 24px;
+}
+
+.tree-row {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 10px 0 18px;
+  color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+  white-space: nowrap;
+}
+
+.tree-row.child {
+  padding-left: 34px;
+}
+
+.tree-row.selected {
+  background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+  color: var(--sidebar-fg);
+}
+
+.editor-area {
+  grid-row: 2 / 3;
+  display: grid;
+  grid-template-rows: 36px 30px 1fr 138px;
+  min-width: 0;
+  background: var(--editor-bg);
+}
+
+.tabs {
+  display: flex;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--tab-border);
+}
+
+.tab {
+  width: 205px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 13px;
+  border-right: 1px solid var(--tab-border);
+  background: var(--tab-active-bg);
+  color: var(--tab-active-fg);
+  border-top: 2px solid var(--activity-active);
+  font-size: 13px;
+}
+
+.tab.inactive {
+  background: var(--tab-bg);
+  color: var(--tab-inactive-fg);
+  border-top-color: transparent;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 18px;
+  color: var(--gutter-fg);
+  border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+  font-size: 12px;
+}
+
+.editor {
+  position: relative;
+  overflow: hidden;
+  background: var(--editor-bg);
+  color: var(--editor-fg);
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 18px;
+  line-height: 1.52;
+}
+
+.active-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 28px;
+  background: var(--editor-line);
+  will-change: transform;
+}
+
+.code {
+  position: relative;
+  padding: 20px 36px 18px 0;
+}
+
+.line {
+  height: 28px;
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  align-items: center;
+}
+
+.line-number {
+  padding-right: 18px;
+  color: var(--gutter-fg);
+  text-align: right;
+  user-select: none;
+}
+
+.line.is-active .line-number {
+  color: var(--gutter-active-fg);
+}
+
+.line-code {
+  white-space: pre;
+}
+
+.char {
+  opacity: 0;
+}
+
+.tok-comment {
+  color: var(--token-comment);
+}
+.tok-keyword {
+  color: var(--token-keyword);
+}
+.tok-function {
+  color: var(--token-function);
+}
+.tok-string {
+  color: var(--token-string);
+}
+.tok-number {
+  color: var(--token-number);
+}
+.tok-variable {
+  color: var(--token-variable);
+}
+.tok-parameter {
+  color: var(--token-parameter);
+}
+.tok-operator {
+  color: var(--token-operator);
+}
+.tok-punctuation {
+  color: var(--token-punctuation);
+}
+.tok-class-name {
+  color: var(--token-class-name);
+}
+
+.caret {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  display: block;
+  width: 2px;
+  height: 22px;
+  background: var(--editor-fg);
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+.terminal {
+  display: grid;
+  grid-template-rows: 32px 1fr;
+  background: var(--panel-bg);
+  border-top: 1px solid var(--panel-border);
+  color: var(--editor-fg);
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+}
+
+.panel-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--panel-border);
+  color: var(--gutter-fg);
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.panel-tabs .active {
+  color: var(--editor-fg);
+  border-bottom: 1px solid var(--activity-active);
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.terminal-body {
+  padding: 12px 20px;
+  color: var(--editor-fg);
+  line-height: 1.8;
+}
+
+.prompt {
+  color: var(--token-function);
+}
+
+.statusbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--status-bg);
+  color: var(--status-fg);
+  border-top: 1px solid var(--status-border);
+  font-size: 12px;
+}
+
+.status-left,
+.status-right {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 12px;
+}
+
+.remote {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  margin-left: -12px;
+  background: var(--status-remote-bg, var(--activity-active));
+  color: var(--status-remote-fg, #ffffff);
+}
+
+svg {
+  display: block;
+}
@@ -0,0 +1,478 @@
+// Generated by scripts/build-theme-registry.mjs from official VS Code theme JSON.
+window.VSCODE_THEME_REGISTRY = [
+  {
+    id: "light-2026",
+    label: "Light 2026",
+    sourceFile: "2026-light.json",
+    uiTheme: "vs",
+    colors: {
+      "activityBar.activeBorder": "#000000",
+      "activityBar.background": "#FAFAFD",
+      "activityBar.border": "#F0F1F2FF",
+      "activityBar.foreground": "#202020",
+      "activityBar.inactiveForeground": "#606060",
+      "editor.background": "#FFFFFF",
+      "editor.foreground": "#202020",
+      "editor.lineHighlightBackground": "#EAEAEA40",
+      "editor.selectionBackground": "#0069CC40",
+      "editorGroup.border": "#E5E5E5",
+      "editorGroupHeader.tabsBackground": "#FAFAFD",
+      "editorGroupHeader.tabsBorder": "#F0F1F2FF",
+      "editorLineNumber.activeForeground": "#202020",
+      "editorLineNumber.foreground": "#606060",
+      foreground: "#202020",
+      "icon.foreground": "#606060",
+      "panel.background": "#FAFAFD",
+      "panel.border": "#F0F1F2FF",
+      "sideBar.background": "#FAFAFD",
+      "sideBar.border": "#F0F1F2FF",
+      "sideBar.foreground": "#202020",
+      "sideBarSectionHeader.background": "#FAFAFD",
+      "sideBarSectionHeader.border": "#F0F1F2FF",
+      "sideBarSectionHeader.foreground": "#202020",
+      "sideBarTitle.foreground": "#202020",
+      "statusBar.background": "#FAFAFD",
+      "statusBar.border": "#F0F1F2FF",
+      "statusBar.foreground": "#606060",
+      "statusBarItem.remoteBackground": "#005FB8",
+      "statusBarItem.remoteForeground": "#FFFFFF",
+      "tab.activeBackground": "#FFFFFF",
+      "tab.activeBorder": "#FFFFFF",
+      "tab.activeBorderTop": "#000000",
+      "tab.activeForeground": "#202020",
+      "tab.border": "#F0F1F2FF",
+      "tab.inactiveBackground": "#FAFAFD",
+      "tab.inactiveForeground": "#606060",
+      "terminal.foreground": "#3B3B3B",
+      "terminalCursor.foreground": "#202020",
+      "titleBar.activeBackground": "#FAFAFD",
+      "titleBar.activeForeground": "#606060",
+    },
+    tokens: {
+      comment: "#6e7781",
+      keyword: "#1f2328",
+      function: "#0550ae",
+      string: "#0a3069",
+      number: "#0550ae",
+      variable: "#1f2328",
+      parameter: "#953800",
+      operator: "#cf222e",
+      punctuation: "#953800",
+      className: "#116329",
+    },
+  },
+  {
+    id: "dark-2026",
+    label: "Dark 2026",
+    sourceFile: "2026-dark.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "activityBar.activeBorder": "#bfbfbf",
+      "activityBar.background": "#191A1B",
+      "activityBar.border": "#2A2B2CFF",
+      "activityBar.foreground": "#bfbfbf",
+      "activityBar.inactiveForeground": "#8C8C8C",
+      "editor.background": "#121314",
+      "editor.foreground": "#BBBEBF",
+      "editor.lineHighlightBackground": "#242526",
+      "editor.selectionBackground": "#276782dd",
+      "editorGroup.border": "#FFFFFF17",
+      "editorGroupHeader.tabsBackground": "#191A1B",
+      "editorGroupHeader.tabsBorder": "#2A2B2CFF",
+      "editorLineNumber.activeForeground": "#BBBEBF",
+      "editorLineNumber.foreground": "#858889",
+      foreground: "#bfbfbf",
+      "icon.foreground": "#8C8C8C",
+      "panel.background": "#191A1B",
+      "panel.border": "#2A2B2CFF",
+      "sideBar.background": "#191A1B",
+      "sideBar.border": "#2A2B2CFF",
+      "sideBar.foreground": "#bfbfbf",
+      "sideBarSectionHeader.background": "#191A1B",
+      "sideBarSectionHeader.border": "#2A2B2CFF",
+      "sideBarSectionHeader.foreground": "#bfbfbf",
+      "sideBarTitle.foreground": "#bfbfbf",
+      "statusBar.background": "#191A1B",
+      "statusBar.border": "#2A2B2CFF",
+      "statusBar.foreground": "#8C8C8C",
+      "statusBarItem.remoteBackground": "#0078D4",
+      "statusBarItem.remoteForeground": "#FFFFFF",
+      "tab.activeBackground": "#121314",
+      "tab.activeBorder": "#121314",
+      "tab.activeBorderTop": "#3994BC",
+      "tab.activeForeground": "#bfbfbf",
+      "tab.border": "#2A2B2CFF",
+      "tab.inactiveBackground": "#191A1B",
+      "tab.inactiveForeground": "#8C8C8C",
+      "terminal.background": "#191A1B",
+      "terminal.foreground": "#CCCCCC",
+      "terminalCursor.foreground": "#bfbfbf",
+      "titleBar.activeBackground": "#191A1B",
+      "titleBar.activeForeground": "#8C8C8C",
+    },
+    tokens: {
+      comment: "#8b949e",
+      keyword: "#c9d1d9",
+      function: "#79c0ff",
+      string: "#a5d6ff",
+      number: "#79c0ff",
+      variable: "#c9d1d9",
+      parameter: "#ffa657",
+      operator: "#ff7b72",
+      punctuation: "#ffa657",
+      className: "#7ee787",
+    },
+  },
+  {
+    id: "dark-plus",
+    label: "Dark+",
+    sourceFile: "dark_plus.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "editor.background": "#1E1E1E",
+      "editor.foreground": "#D4D4D4",
+      "sideBarSectionHeader.background": "#0000",
+      "sideBarSectionHeader.border": "#ccc3",
+      "sideBarTitle.foreground": "#BBBBBB",
+      "statusBarItem.remoteBackground": "#16825D",
+      "statusBarItem.remoteForeground": "#FFF",
+    },
+    tokens: {
+      comment: "#6A9955",
+      keyword: "#d7ba7d",
+      function: "#DCDCAA",
+      string: "#d16969",
+      number: "#b5cea8",
+      variable: "#4FC1FF",
+      parameter: "#9CDCFE",
+      operator: "#d7ba7d",
+      punctuation: "#CE9178",
+      className: "#4EC9B0",
+    },
+  },
+  {
+    id: "dark-modern",
+    label: "Dark Modern",
+    sourceFile: "dark_modern.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "activityBar.activeBorder": "#0078D4",
+      "activityBar.background": "#181818",
+      "activityBar.border": "#2B2B2B",
+      "activityBar.foreground": "#D7D7D7",
+      "activityBar.inactiveForeground": "#868686",
+      "editor.background": "#1F1F1F",
+      "editor.foreground": "#CCCCCC",
+      "editorGroup.border": "#FFFFFF17",
+      "editorGroupHeader.tabsBackground": "#181818",
+      "editorGroupHeader.tabsBorder": "#2B2B2B",
+      "editorLineNumber.activeForeground": "#CCCCCC",
+      "editorLineNumber.foreground": "#6E7681",
+      foreground: "#CCCCCC",
+      "icon.foreground": "#CCCCCC",
+      "panel.background": "#181818",
+      "panel.border": "#2B2B2B",
+      "sideBar.background": "#181818",
+      "sideBar.border": "#2B2B2B",
+      "sideBar.foreground": "#CCCCCC",
+      "sideBarSectionHeader.background": "#181818",
+      "sideBarSectionHeader.border": "#2B2B2B",
+      "sideBarSectionHeader.foreground": "#CCCCCC",
+      "sideBarTitle.foreground": "#CCCCCC",
+      "statusBar.background": "#181818",
+      "statusBar.border": "#2B2B2B",
+      "statusBar.foreground": "#CCCCCC",
+      "statusBarItem.remoteBackground": "#0078D4",
+      "statusBarItem.remoteForeground": "#FFFFFF",
+      "tab.activeBackground": "#1F1F1F",
+      "tab.activeBorder": "#1F1F1F",
+      "tab.activeBorderTop": "#0078D4",
+      "tab.activeForeground": "#FFFFFF",
+      "tab.border": "#2B2B2B",
+      "tab.inactiveBackground": "#181818",
+      "tab.inactiveForeground": "#9D9D9D",
+      "terminal.foreground": "#CCCCCC",
+      "titleBar.activeBackground": "#181818",
+      "titleBar.activeForeground": "#CCCCCC",
+    },
+    tokens: {
+      comment: "#6A9955",
+      keyword: "#d7ba7d",
+      function: "#DCDCAA",
+      string: "#d16969",
+      number: "#b5cea8",
+      variable: "#4FC1FF",
+      parameter: "#9CDCFE",
+      operator: "#d7ba7d",
+      punctuation: "#CE9178",
+      className: "#4EC9B0",
+    },
+  },
+  {
+    id: "light-plus",
+    label: "Light+",
+    sourceFile: "light_plus.json",
+    uiTheme: "vs",
+    colors: {
+      "editor.background": "#FFFFFF",
+      "editor.foreground": "#000000",
+      "sideBarSectionHeader.background": "#0000",
+      "sideBarSectionHeader.border": "#61616130",
+      "sideBarTitle.foreground": "#6F6F6F",
+      "statusBarItem.remoteBackground": "#16825D",
+      "statusBarItem.remoteForeground": "#FFF",
+    },
+    tokens: {
+      comment: "#008000",
+      keyword: "#EE0000",
+      function: "#795E26",
+      string: "#811f3f",
+      number: "#098658",
+      variable: "#0070C1",
+      parameter: "#001080",
+      operator: "#EE0000",
+      punctuation: "#d16969",
+      className: "#267f99",
+    },
+  },
+  {
+    id: "light-modern",
+    label: "Light Modern",
+    sourceFile: "light_modern.json",
+    uiTheme: "vs",
+    colors: {
+      "activityBar.activeBorder": "#005FB8",
+      "activityBar.background": "#F8F8F8",
+      "activityBar.border": "#E5E5E5",
+      "activityBar.foreground": "#1F1F1F",
+      "activityBar.inactiveForeground": "#616161",
+      "editor.background": "#FFFFFF",
+      "editor.foreground": "#3B3B3B",
+      "editorGroup.border": "#E5E5E5",
+      "editorGroupHeader.tabsBackground": "#F8F8F8",
+      "editorGroupHeader.tabsBorder": "#E5E5E5",
+      "editorLineNumber.activeForeground": "#171184",
+      "editorLineNumber.foreground": "#6E7681",
+      foreground: "#3B3B3B",
+      "icon.foreground": "#3B3B3B",
+      "panel.background": "#F8F8F8",
+      "panel.border": "#E5E5E5",
+      "sideBar.background": "#F8F8F8",
+      "sideBar.border": "#E5E5E5",
+      "sideBar.foreground": "#3B3B3B",
+      "sideBarSectionHeader.background": "#F8F8F8",
+      "sideBarSectionHeader.border": "#E5E5E5",
+      "sideBarSectionHeader.foreground": "#3B3B3B",
+      "sideBarTitle.foreground": "#3B3B3B",
+      "statusBar.background": "#F8F8F8",
+      "statusBar.border": "#E5E5E5",
+      "statusBar.foreground": "#3B3B3B",
+      "statusBarItem.remoteBackground": "#005FB8",
+      "statusBarItem.remoteForeground": "#FFFFFF",
+      "tab.activeBackground": "#FFFFFF",
+      "tab.activeBorder": "#F8F8F8",
+      "tab.activeBorderTop": "#005FB8",
+      "tab.activeForeground": "#3B3B3B",
+      "tab.border": "#E5E5E5",
+      "tab.inactiveBackground": "#F8F8F8",
+      "tab.inactiveForeground": "#868686",
+      "terminal.foreground": "#3B3B3B",
+      "terminalCursor.foreground": "#005FB8",
+      "titleBar.activeBackground": "#F8F8F8",
+      "titleBar.activeForeground": "#1E1E1E",
+    },
+    tokens: {
+      comment: "#008000",
+      keyword: "#EE0000",
+      function: "#795E26",
+      string: "#811f3f",
+      number: "#098658",
+      variable: "#0070C1",
+      parameter: "#001080",
+      operator: "#EE0000",
+      punctuation: "#d16969",
+      className: "#267f99",
+    },
+  },
+  {
+    id: "visual-studio-dark",
+    label: "Visual Studio Dark",
+    sourceFile: "dark_vs.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "editor.background": "#1E1E1E",
+      "editor.foreground": "#D4D4D4",
+      "sideBarSectionHeader.background": "#0000",
+      "sideBarSectionHeader.border": "#ccc3",
+      "sideBarTitle.foreground": "#BBBBBB",
+      "statusBarItem.remoteBackground": "#16825D",
+      "statusBarItem.remoteForeground": "#FFF",
+    },
+    tokens: {
+      comment: "#6A9955",
+      keyword: "#d4d4d4",
+      function: "#9cdcfe",
+      string: "#d16969",
+      number: "#b5cea8",
+      variable: "#569cd6",
+      parameter: "#9CDCFE",
+      operator: "#569cd6",
+      punctuation: "#569cd6",
+      className: "#9cdcfe",
+    },
+  },
+  {
+    id: "visual-studio-light",
+    label: "Visual Studio Light",
+    sourceFile: "light_vs.json",
+    uiTheme: "vs",
+    colors: {
+      "editor.background": "#FFFFFF",
+      "editor.foreground": "#000000",
+      "sideBarSectionHeader.background": "#0000",
+      "sideBarSectionHeader.border": "#61616130",
+      "sideBarTitle.foreground": "#6F6F6F",
+      "statusBarItem.remoteBackground": "#16825D",
+      "statusBarItem.remoteForeground": "#FFF",
+    },
+    tokens: {
+      comment: "#008000",
+      keyword: "#000000",
+      function: "#0451a5",
+      string: "#811f3f",
+      number: "#098658",
+      variable: "#0000ff",
+      parameter: "#9CDCFE",
+      operator: "#0000ff",
+      punctuation: "#800000",
+      className: "#0451a5",
+    },
+  },
+  {
+    id: "high-contrast",
+    label: "Default High Contrast",
+    sourceFile: "hc_black.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "editor.background": "#000000",
+      "editor.foreground": "#FFFFFF",
+      "editor.selectionBackground": "#FFFFFF",
+      "sideBarTitle.foreground": "#FFFFFF",
+      "statusBarItem.remoteBackground": "#00000000",
+    },
+    tokens: {
+      comment: "#7ca668",
+      keyword: "#C586C0",
+      function: "#DCDCAA",
+      string: "#d16969",
+      number: "#b5cea8",
+      variable: "#9CDCFE",
+      parameter: "#9CDCFE",
+      operator: "#569cd6",
+      punctuation: "#4EC9B0",
+      className: "#4EC9B0",
+    },
+  },
+  {
+    id: "high-contrast-light",
+    label: "Default High Contrast Light",
+    sourceFile: "hc_light.json",
+    uiTheme: "vs",
+    colors: {
+      "statusBarItem.remoteBackground": "#FFFFFF",
+      "statusBarItem.remoteForeground": "#000000",
+    },
+    tokens: {
+      comment: "#515151",
+      keyword: "#EE0000",
+      function: "#5e2cbc",
+      string: "#811F3F",
+      number: "#096d48",
+      variable: "#02715D",
+      parameter: "#001080",
+      operator: "#EE0000",
+      punctuation: "#D16969",
+      className: "#185E73",
+    },
+  },
+  {
+    id: "solarized-light",
+    label: "Solarized Light",
+    sourceFile: "solarized-light-color-theme.json",
+    uiTheme: "vs",
+    colors: {
+      "activityBar.background": "#DDD6C1",
+      "activityBar.foreground": "#584c27",
+      "editor.background": "#FDF6E3",
+      "editor.foreground": "#657B83",
+      "editor.lineHighlightBackground": "#EEE8D5",
+      "editor.selectionBackground": "#EEE8D5",
+      "editorGroup.border": "#DDD6C1",
+      "editorGroupHeader.tabsBackground": "#D9D2C2",
+      "editorLineNumber.activeForeground": "#567983",
+      "panel.border": "#DDD6C1",
+      "sideBar.background": "#EEE8D5",
+      "sideBarTitle.foreground": "#586E75",
+      "statusBar.background": "#EEE8D5",
+      "statusBar.foreground": "#586E75",
+      "statusBarItem.remoteBackground": "#AC9D57",
+      "tab.activeBackground": "#FDF6E3",
+      "tab.border": "#DDD6C1",
+      "tab.inactiveBackground": "#D3CBB7",
+      "tab.inactiveForeground": "#586E75",
+      "terminal.background": "#FDF6E3",
+      "titleBar.activeBackground": "#EEE8D5",
+    },
+    tokens: {
+      comment: "#93A1A1",
+      keyword: "#CB4B16",
+      function: "#268BD2",
+      string: "#DC322F",
+      number: "#D33682",
+      variable: "#268BD2",
+      parameter: "#9CDCFE",
+      operator: "#859900",
+      punctuation: "#DC322F",
+      className: "#CB4B16",
+    },
+  },
+  {
+    id: "monokai",
+    label: "Monokai",
+    sourceFile: "monokai-color-theme.json",
+    uiTheme: "vs-dark",
+    colors: {
+      "activityBar.background": "#272822",
+      "activityBar.foreground": "#f8f8f2",
+      "editor.background": "#272822",
+      "editor.foreground": "#f8f8f2",
+      "editor.lineHighlightBackground": "#3e3d32",
+      "editor.selectionBackground": "#878b9180",
+      "editorGroup.border": "#34352f",
+      "editorGroupHeader.tabsBackground": "#1e1f1c",
+      "editorLineNumber.activeForeground": "#c2c2bf",
+      "editorLineNumber.foreground": "#90908a",
+      "panel.border": "#414339",
+      "sideBar.background": "#1e1f1c",
+      "sideBarSectionHeader.background": "#272822",
+      "statusBar.background": "#414339",
+      "statusBarItem.remoteBackground": "#AC6218",
+      "tab.border": "#1e1f1c",
+      "tab.inactiveBackground": "#34352f",
+      "tab.inactiveForeground": "#ccccc7",
+      "titleBar.activeBackground": "#1e1f1c",
+    },
+    tokens: {
+      comment: "#88846f",
+      keyword: "#66D9EF",
+      function: "#66D9EF",
+      string: "#AE81FF",
+      number: "#AE81FFA0",
+      variable: "#FD971F",
+      parameter: "#FD971F",
+      operator: "#F92672",
+      punctuation: "#A6E22E",
+      className: "#66D9EF",
+    },
+  },
+];
@@ -0,0 +1,664 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "2026 Dark",
+  "include": "./dark_modern.json",
+  "type": "dark",
+  "colors": {
+    "foreground": "#bfbfbf",
+    "disabledForeground": "#555555",
+    "errorForeground": "#f48771",
+    "descriptionForeground": "#8C8C8C",
+    "icon.foreground": "#8C8C8C",
+    "focusBorder": "#3994BCB3",
+    "textBlockQuote.background": "#242526",
+    "textBlockQuote.border": "#2A2B2CFF",
+    "textCodeBlock.background": "#242526",
+    "textLink.foreground": "#48A0C7",
+    "textLink.activeForeground": "#53A5CA",
+    "textPreformat.background": "#262626",
+    "textPreformat.foreground": "#8C8C8C",
+    "textSeparator.foreground": "#2a2a2aFF",
+    "button.background": "#297AA0",
+    "button.foreground": "#FFFFFF",
+    "button.hoverBackground": "#2B7DA3",
+    "button.border": "#333536FF",
+    "button.secondaryHoverBackground": "#FFFFFF10",
+    "checkbox.background": "#242526",
+    "checkbox.border": "#333536",
+    "checkbox.foreground": "#8C8C8C",
+    "dropdown.background": "#191A1B",
+    "dropdown.border": "#333536",
+    "dropdown.foreground": "#bfbfbf",
+    "dropdown.listBackground": "#191A1B",
+    "input.background": "#191A1B",
+    "input.border": "#333536FF",
+    "input.foreground": "#bfbfbf",
+    "input.placeholderForeground": "#555555",
+    "inputOption.activeBackground": "#3994BC33",
+    "inputOption.activeForeground": "#bfbfbf",
+    "inputOption.activeBorder": "#2A2B2CFF",
+    "inputValidation.infoBackground": "#1E3A47",
+    "inputValidation.infoBorder": "#3994BC",
+    "inputValidation.infoForeground": "#bfbfbf",
+    "inputValidation.warningBackground": "#352A05",
+    "inputValidation.warningBorder": "#B89500",
+    "inputValidation.warningForeground": "#bfbfbf",
+    "inputValidation.errorBackground": "#3A1D1D",
+    "inputValidation.errorBorder": "#BE1100",
+    "inputValidation.errorForeground": "#bfbfbf",
+    "scrollbar.shadow": "#191B1D4D",
+    "scrollbarSlider.background": "#83848533",
+    "scrollbarSlider.hoverBackground": "#83848566",
+    "scrollbarSlider.activeBackground": "#83848599",
+    "badge.background": "#3994BCF0",
+    "badge.foreground": "#FFFFFF",
+    "progressBar.background": "#878889",
+    "list.activeSelectionBackground": "#3994BC26",
+    "list.activeSelectionForeground": "#ededed",
+    "list.inactiveSelectionBackground": "#2C2D2E",
+    "list.inactiveSelectionForeground": "#ededed",
+    "list.hoverBackground": "#FFFFFF0D",
+    "list.hoverForeground": "#bfbfbf",
+    "list.dropBackground": "#3994BC1A",
+    "toolbar.hoverBackground": "#FFFFFF18",
+    "list.focusBackground": "#3994BC26",
+    "list.focusForeground": "#bfbfbf",
+    "list.focusOutline": "#3994BCB3",
+    "list.highlightForeground": "#48A0C7",
+    "list.invalidItemForeground": "#444444",
+    "list.errorForeground": "#f48771",
+    "list.warningForeground": "#e5ba7d",
+    "activityBar.background": "#191A1B",
+    "activityBar.foreground": "#bfbfbf",
+    "activityBar.inactiveForeground": "#8C8C8C",
+    "activityBar.border": "#2A2B2CFF",
+    "activityBar.activeBorder": "#bfbfbf",
+    "activityBar.activeFocusBorder": "#3994BCB3",
+    "activityBarBadge.background": "#3994BC",
+    "activityBarBadge.foreground": "#FFFFFF",
+    "activityBarTop.activeBorder": "#bfbfbf",
+    "sideBar.background": "#191A1B",
+    "sideBar.foreground": "#bfbfbf",
+    "sideBar.border": "#2A2B2CFF",
+    "sideBarTitle.foreground": "#bfbfbf",
+    "sideBarSectionHeader.background": "#191A1B",
+    "sideBarSectionHeader.foreground": "#bfbfbf",
+    "sideBarSectionHeader.border": "#2A2B2CFF",
+    "titleBar.activeBackground": "#191A1B",
+    "titleBar.activeForeground": "#8C8C8C",
+    "titleBar.inactiveBackground": "#191A1B",
+    "titleBar.inactiveForeground": "#8C8C8C",
+    "titleBar.border": "#2A2B2CFF",
+    "menubar.selectionBackground": "#242526",
+    "menubar.selectionForeground": "#bfbfbf",
+    "menu.background": "#202122",
+    "menu.foreground": "#bfbfbf",
+    "menu.selectionBackground": "#3994BC26",
+    "menu.selectionForeground": "#bfbfbf",
+    "menu.separatorBackground": "#2A2B2C",
+    "menu.border": "#2A2B2CFF",
+    "commandCenter.foreground": "#bfbfbf",
+    "commandCenter.activeForeground": "#bfbfbf",
+    "commandCenter.background": "#191A1B",
+    "commandCenter.activeBackground": "#FFFFFF0F",
+    "commandCenter.border": "#2E3031",
+    "editor.background": "#121314",
+    "editor.foreground": "#BBBEBF",
+    "editorStickyScroll.background": "#121314",
+    "editorStickyScrollHover.background": "#202122",
+    "editorStickyScroll.border": "#2A2B2CFF",
+    "editorLineNumber.foreground": "#858889",
+    "editorLineNumber.activeForeground": "#BBBEBF",
+    "editorCursor.foreground": "#BBBEBF",
+    "editor.selectionBackground": "#276782dd",
+    "editor.inactiveSelectionBackground": "#27678260",
+    "editor.selectionHighlightBackground": "#27678260",
+    "editor.wordHighlightBackground": "#27678250",
+    "editor.wordHighlightStrongBackground": "#27678280",
+    "editor.findMatchBackground": "#27678290",
+    "editor.findMatchHighlightBackground": "#27678280",
+    "editor.findRangeHighlightBackground": "#242526",
+    "editor.hoverHighlightBackground": "#242526",
+    "editor.lineHighlightBackground": "#242526",
+    "editor.rangeHighlightBackground": "#242526",
+    "editorLink.activeForeground": "#3a94bc",
+    "editorWhitespace.foreground": "#8C8C8C4D",
+    "editorIndentGuide.background": "#8384854D",
+    "editorIndentGuide.activeBackground": "#838485",
+    "editorRuler.foreground": "#848484",
+    "editorCodeLens.foreground": "#8C8C8C",
+    "editorBracketMatch.background": "#3994BC55",
+    "editorBracketMatch.border": "#2A2B2CFF",
+    "editorWidget.background": "#202122",
+    "editorWidget.border": "#2A2B2CFF",
+    "editorWidget.foreground": "#bfbfbf",
+    "editorSuggestWidget.background": "#202122",
+    "editorSuggestWidget.border": "#2A2B2CFF",
+    "editorSuggestWidget.foreground": "#bfbfbf",
+    "editorSuggestWidget.highlightForeground": "#bfbfbf",
+    "editorSuggestWidget.selectedBackground": "#3994BC26",
+    "editorHoverWidget.background": "#202122",
+    "editorHoverWidget.border": "#2A2B2CFF",
+    "widget.border": "#2A2B2CFF",
+    "peekView.border": "#2A2B2CFF",
+    "peekViewEditor.background": "#191A1B",
+    "peekViewEditor.matchHighlightBackground": "#3994BC33",
+    "peekViewResult.background": "#191A1B",
+    "peekViewResult.fileForeground": "#bfbfbf",
+    "peekViewResult.lineForeground": "#8C8C8C",
+    "peekViewResult.matchHighlightBackground": "#3994BC33",
+    "peekViewResult.selectionBackground": "#3994BC26",
+    "peekViewResult.selectionForeground": "#bfbfbf",
+    "peekViewTitle.background": "#242526",
+    "peekViewTitleDescription.foreground": "#8C8C8C",
+    "peekViewTitleLabel.foreground": "#bfbfbf",
+    "editorGutter.background": "#121314",
+    "editorGutter.addedBackground": "#72C892",
+    "editorGutter.deletedBackground": "#F28772",
+    "diffEditor.insertedLineBackground": "#347d3926",
+    "diffEditor.insertedTextBackground": "#57ab5a4d",
+    "diffEditor.removedLineBackground": "#c93c3726",
+    "diffEditor.removedTextBackground": "#f470674d",
+    "editorOverviewRuler.border": "#2A2B2CFF",
+    "editorOverviewRuler.findMatchForeground": "#3a94bc99",
+    "editorOverviewRuler.modifiedForeground": "#6ab890",
+    "editorOverviewRuler.addedForeground": "#73c991",
+    "editorOverviewRuler.deletedForeground": "#f48771",
+    "editorOverviewRuler.errorForeground": "#f48771",
+    "editorOverviewRuler.warningForeground": "#e5ba7d",
+    "panel.background": "#191A1B",
+    "panel.border": "#2A2B2CFF",
+    "panelTitle.activeBorder": "#3994BC",
+    "panelTitle.activeForeground": "#bfbfbf",
+    "panelTitle.inactiveForeground": "#8C8C8C",
+    "statusBar.background": "#191A1B",
+    "statusBar.foreground": "#8C8C8C",
+    "statusBar.border": "#2A2B2CFF",
+    "statusBar.focusBorder": "#3994BCB3",
+    "statusBar.debuggingBackground": "#3994BC",
+    "statusBar.debuggingForeground": "#FFFFFF",
+    "statusBar.noFolderBackground": "#191A1B",
+    "statusBar.noFolderForeground": "#8C8C8C",
+    "statusBarItem.activeBackground": "#4B4C4D",
+    "statusBarItem.hoverBackground": "#262728",
+    "statusBarItem.focusBorder": "#3994BCB3",
+    "statusBarItem.prominentBackground": "#3994BC",
+    "statusBarItem.prominentForeground": "#FFFFFF",
+    "statusBarItem.prominentHoverBackground": "#3994BC",
+    "tab.activeBackground": "#121314",
+    "tab.activeForeground": "#bfbfbf",
+    "tab.inactiveBackground": "#191A1B",
+    "tab.inactiveForeground": "#8C8C8C",
+    "tab.border": "#2A2B2CFF",
+    "tab.lastPinnedBorder": "#2A2B2CFF",
+    "tab.activeBorderTop": "#3994BC",
+    "tab.hoverBackground": "#121314",
+    "tab.hoverForeground": "#bfbfbf",
+    "tab.unfocusedActiveBackground": "#121314",
+    "tab.unfocusedActiveForeground": "#8C8C8C",
+    "tab.unfocusedInactiveBackground": "#191A1B",
+    "tab.unfocusedInactiveForeground": "#444444",
+    "editorGroupHeader.tabsBackground": "#191A1B",
+    "tab.activeBorder": "#121314",
+    "editorGroupHeader.tabsBorder": "#2A2B2CFF",
+    "breadcrumb.foreground": "#8C8C8C",
+    "breadcrumb.background": "#121314",
+    "breadcrumb.focusForeground": "#bfbfbf",
+    "breadcrumb.activeSelectionForeground": "#bfbfbf",
+    "breadcrumbPicker.background": "#202122",
+    "notificationCenter.border": "#2A2B2CFF",
+    "notificationCenterHeader.foreground": "#bfbfbf",
+    "notificationCenterHeader.background": "#242526",
+    "notificationToast.border": "#2A2B2CFF",
+    "notifications.foreground": "#bfbfbf",
+    "notifications.background": "#202122",
+    "notifications.border": "#2A2B2CFF",
+    "notificationLink.foreground": "#3a94bc",
+    "notificationsWarningIcon.foreground": "#CCA700",
+    "notificationsErrorIcon.foreground": "#f48771",
+    "notificationsInfoIcon.foreground": "#3a94bc",
+    "activityWarningBadge.foreground": "#202020",
+    "activityWarningBadge.background": "#CCA700",
+    "activityErrorBadge.foreground": "#FFFFFF",
+    "activityErrorBadge.background": "#f48771",
+    "extensionButton.prominentBackground": "#297AA0",
+    "extensionButton.prominentForeground": "#FFFFFF",
+    "extensionButton.prominentHoverBackground": "#2B7DA3",
+    "pickerGroup.border": "#2A2B2CFF",
+    "pickerGroup.foreground": "#bfbfbf",
+    "quickInput.background": "#202122",
+    "quickInput.foreground": "#bfbfbf",
+    "quickInputList.focusBackground": "#297AA0",
+    "quickInputList.focusForeground": "#FFFFFF",
+    "quickInputList.focusIconForeground": "#FFFFFF",
+    "quickInputList.focusHighlightForeground": "#FFFFFF",
+    "quickInputList.hoverBackground": "#262728",
+    "terminal.selectionBackground": "#3994BC33",
+    "terminal.background": "#191A1B",
+    "terminal.border": "#2A2B2CFF",
+    "terminal.tab.activeBorder": "#3994BC00",
+    "terminalCursor.foreground": "#bfbfbf",
+    "terminalCursor.background": "#191A1B",
+    "gitDecoration.addedResourceForeground": "#73c991",
+    "gitDecoration.modifiedResourceForeground": "#e5ba7d",
+    "gitDecoration.deletedResourceForeground": "#f48771",
+    "gitDecoration.untrackedResourceForeground": "#73c991",
+    "gitDecoration.ignoredResourceForeground": "#8C8C8C",
+    "gitDecoration.conflictingResourceForeground": "#f48771",
+    "gitDecoration.stageModifiedResourceForeground": "#e5ba7d",
+    "gitDecoration.stageDeletedResourceForeground": "#f48771",
+    "quickInputTitle.background": "#202122",
+    "commandCenter.activeBorder": "#333536",
+    "quickInput.border": "#333536",
+    "gauge.foreground": "#59a4f9",
+    "gauge.background": "#58A4F94D",
+    "gauge.border": "#2A2C2EFF",
+    "gauge.warningForeground": "#e5ba7d",
+    "gauge.warningBackground": "#E3B97E4D",
+    "gauge.errorForeground": "#f48771",
+    "gauge.errorBackground": "#F287724D",
+    "chat.requestBubbleBackground": "#ffffff13",
+    "chat.requestBubbleHoverBackground": "#ffffff22",
+    "chat.inputWorkingBorderColor1": "#297AA0",
+    "chat.inputWorkingBorderColor2": "#1C546F",
+    "chat.inputWorkingBorderColor3": "#5BA8CC",
+    "editorCommentsWidget.rangeBackground": "#488FAE26",
+    "editorCommentsWidget.rangeActiveBackground": "#488FAE46",
+    "charts.foreground": "#CCCCCC",
+    "charts.lines": "#C8CACC80",
+    "charts.blue": "#57A3F8",
+    "charts.red": "#EF8773",
+    "charts.yellow": "#E0B97F",
+    "charts.orange": "#CD861A",
+    "charts.green": "#86CF86",
+    "charts.purple": "#AD80D7",
+    "inlineChat.border": "#00000000",
+    "minimapSlider.background": "#83848533",
+    "minimapSlider.hoverBackground": "#83848566",
+    "minimapSlider.activeBackground": "#83848599",
+
+    "agents.background": "#121314",
+    "agentsPanel.background": "#191A1B",
+    "agentsPanel.foreground": "#bfbfbf",
+    "agentsPanel.border": "#2A2B2CFF",
+    "agentsGradient.tintColor": "#297AA0",
+    "agentsChatInput.background": "#202122",
+    "agentsChatInput.foreground": "#bfbfbf",
+    "agentsChatInput.border": "#333536",
+    "agentsChatInput.focusBorder": "#3994BCB3",
+    "agentsChatInput.placeholderForeground": "#555555",
+    "agentsNewSessionButton.background": "#00000000",
+    "agentsNewSessionButton.foreground": "#bfbfbf",
+    "agentsNewSessionButton.border": "#333536",
+    "agentsNewSessionButton.hoverBackground": "#FFFFFF18",
+    "agentsBadge.background": "#3994BC",
+    "agentsBadge.foreground": "#FFFFFF",
+    "agentsUnreadBadge.background": "#3994BC",
+    "agentsUnreadBadge.foreground": "#FFFFFF"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "#8b949e"
+      }
+    },
+    {
+      "scope": ["constant.other.placeholder", "constant.character"],
+      "settings": {
+        "foreground": "#ff7b72"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language",
+        "entity"
+      ],
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
+      "settings": {
+        "foreground": "#ffa657"
+      }
+    },
+    {
+      "scope": [
+        "variable.parameter.function",
+        "meta.jsx.children",
+        "meta.block",
+        "meta.tag.attributes",
+        "entity.name.constant",
+        "meta.object.member",
+        "meta.embedded.expression"
+      ],
+      "settings": {
+        "foreground": "#c9d1d9"
+      }
+    },
+    {
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#d2a8ff"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "support.class.component"],
+      "settings": {
+        "foreground": "#7ee787"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#ff7b72"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type"],
+      "settings": {
+        "foreground": "#ff7b72"
+      }
+    },
+    {
+      "scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+      "settings": {
+        "foreground": "#c9d1d9"
+      }
+    },
+    {
+      "scope": ["string", "string punctuation.section.embedded source"],
+      "settings": {
+        "foreground": "#a5d6ff"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#ffa657"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#c9d1d9"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "foreground": "#ffa198",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "foreground": "#ffa198",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "foreground": "#ffa198",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "foreground": "#ffa198",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "carriage-return",
+      "settings": {
+        "foreground": "#f0f6fc",
+        "background": "#8b1111",
+        "fontStyle": "italic underline",
+        "content": "^M"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#ffa198"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": ["source.regexp", "string.regexp"],
+      "settings": {
+        "foreground": "#a5d6ff"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#a5d6ff"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "foreground": "#7ee787",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "support.type.property-name.json",
+      "settings": {
+        "foreground": "#7ee787"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#ffa657"
+      }
+    },
+    {
+      "scope": ["markup.heading", "markup.heading entity.name"],
+      "settings": {
+        "foreground": "#79c0ff",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#7ee787"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "foreground": "#c9d1d9",
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "foreground": "#c9d1d9",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": ["markup.underline"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": ["markup.strikethrough"],
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
+      "settings": {
+        "foreground": "#ffa198",
+        "background": "#490202"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded"],
+      "settings": {
+        "foreground": "#ff7b72"
+      }
+    },
+    {
+      "scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
+      "settings": {
+        "foreground": "#7ee787",
+        "background": "#04260f"
+      }
+    },
+    {
+      "scope": ["markup.changed", "punctuation.definition.changed"],
+      "settings": {
+        "foreground": "#ffa657",
+        "background": "#5a1e02"
+      }
+    },
+    {
+      "scope": ["markup.ignored", "markup.untracked"],
+      "settings": {
+        "foreground": "#0d1117",
+        "background": "#79c0ff"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "foreground": "#d2a8ff",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "foreground": "#79c0ff",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#79c0ff"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#8b949e"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#ffa198"
+      }
+    },
+    {
+      "scope": ["constant.other.reference.link", "string.other.link"],
+      "settings": {
+        "foreground": "#a5d6ff"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#6796E6"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#CD9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#F44747"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#B267E6"
+      }
+    }
+  ],
+  "semanticHighlighting": true
+}
@@ -0,0 +1,646 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "2026 Light",
+  "include": "./light_modern.json",
+  "type": "light",
+  "colors": {
+    "foreground": "#202020",
+    "disabledForeground": "#BBBBBB",
+    "errorForeground": "#ad0707",
+    "descriptionForeground": "#606060",
+    "icon.foreground": "#606060",
+    "focusBorder": "#0069CCFF",
+    "textBlockQuote.background": "#EAEAEA",
+    "textBlockQuote.border": "#F0F1F2FF",
+    "textCodeBlock.background": "#EAEAEA",
+    "textLink.foreground": "#0069CC",
+    "textLink.activeForeground": "#0069CC",
+    "textPreformat.foreground": "#606060",
+    "textPreformat.background": "#ECECEC",
+    "textSeparator.foreground": "#EEEEEEFF",
+    "button.background": "#0069CC",
+    "button.foreground": "#FFFFFF",
+    "button.hoverBackground": "#0063C1",
+    "button.border": "#EEEEF1",
+    "button.secondaryBackground": "#EAEAEA",
+    "button.secondaryForeground": "#202020",
+    "button.secondaryHoverBackground": "#F2F3F4",
+    "checkbox.background": "#EAEAEA",
+    "checkbox.border": "#D8D8D8",
+    "checkbox.foreground": "#606060",
+    "dropdown.background": "#FFFFFF",
+    "dropdown.border": "#D8D8D8",
+    "dropdown.foreground": "#202020",
+    "dropdown.listBackground": "#FFFFFF",
+    "input.background": "#FFFFFF",
+    "input.border": "#D8D8D866",
+    "input.foreground": "#202020",
+    "input.placeholderForeground": "#999999",
+    "inputOption.activeBackground": "#0069CC26",
+    "inputOption.activeForeground": "#202020",
+    "inputOption.activeBorder": "#F0F1F2FF",
+    "inputValidation.infoBackground": "#E6F2FA",
+    "inputValidation.infoBorder": "#0069CC",
+    "inputValidation.infoForeground": "#202020",
+    "inputValidation.warningBackground": "#FDF6E3",
+    "inputValidation.warningBorder": "#B69500",
+    "inputValidation.warningForeground": "#202020",
+    "inputValidation.errorBackground": "#FDEDED",
+    "inputValidation.errorBorder": "#ad0707",
+    "inputValidation.errorForeground": "#202020",
+    "scrollbar.shadow": "#00000000",
+    "widget.shadow": "#00000000",
+    "widget.border": "#E2E2E5",
+    "editorStickyScroll.shadow": "#00000000",
+    "editorStickyScrollHover.background": "#F0F0F3",
+    "editorStickyScroll.border": "#F0F1F2FF",
+    "sideBarStickyScroll.shadow": "#00000000",
+    "panelStickyScroll.shadow": "#00000000",
+    "listFilterWidget.shadow": "#00000000",
+    "scrollbarSlider.background": "#99999926",
+    "scrollbarSlider.hoverBackground": "#99999940",
+    "scrollbarSlider.activeBackground": "#99999955",
+    "badge.background": "#0069CC",
+    "badge.foreground": "#FFFFFF",
+    "progressBar.background": "#0069CC",
+    "list.activeSelectionBackground": "#0069CC1A",
+    "list.activeSelectionForeground": "#202020",
+    "list.inactiveSelectionBackground": "#DADADA99",
+    "list.inactiveSelectionForeground": "#202020",
+    "list.hoverBackground": "#DADADA4f",
+    "list.hoverForeground": "#202020",
+    "list.dropBackground": "#0069CC15",
+    "list.focusBackground": "#0069CC1A",
+    "list.focusForeground": "#202020",
+    "list.focusOutline": "#0069CCFF",
+    "list.highlightForeground": "#0069CC",
+    "list.invalidItemForeground": "#BBBBBB",
+    "list.errorForeground": "#ad0707",
+    "list.warningForeground": "#667309",
+    "activityBar.background": "#FAFAFD",
+    "activityBar.foreground": "#202020",
+    "activityBar.inactiveForeground": "#606060",
+    "activityBar.border": "#F0F1F2FF",
+    "activityBar.activeBorder": "#000000",
+    "activityBar.activeFocusBorder": "#0069CCFF",
+    "activityBarBadge.background": "#0069CC",
+    "activityBarBadge.foreground": "#FFFFFF",
+    "activityBarTop.activeBorder": "#000000",
+    "sideBar.background": "#FAFAFD",
+    "sideBar.foreground": "#202020",
+    "sideBar.border": "#F0F1F2FF",
+    "sideBarTitle.foreground": "#202020",
+    "sideBarSectionHeader.background": "#FAFAFD",
+    "sideBarSectionHeader.foreground": "#202020",
+    "sideBarSectionHeader.border": "#F0F1F2FF",
+    "titleBar.activeBackground": "#FAFAFD",
+    "titleBar.activeForeground": "#606060",
+    "titleBar.inactiveBackground": "#FAFAFD",
+    "titleBar.inactiveForeground": "#606060",
+    "titleBar.border": "#F0F1F2FF",
+    "menubar.selectionBackground": "#EAEAEA",
+    "menubar.selectionForeground": "#202020",
+    "menu.background": "#FAFAFD",
+    "menu.foreground": "#202020",
+    "menu.selectionBackground": "#0069CC1A",
+    "menu.selectionForeground": "#202020",
+    "menu.separatorBackground": "#EEEEF1",
+    "menu.border": "#E4E5E6FF",
+    "commandCenter.foreground": "#202020",
+    "commandCenter.activeForeground": "#202020",
+    "commandCenter.background": "#FFFFFF",
+    "commandCenter.activeBackground": "#DADADA4f",
+    "commandCenter.border": "#D8D8D8AA",
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#202020",
+    "editorLineNumber.foreground": "#606060",
+    "editorLineNumber.activeForeground": "#202020",
+    "editorCursor.foreground": "#202020",
+    "editor.selectionBackground": "#0069CC40",
+    "editor.inactiveSelectionBackground": "#0069CC1A",
+    "editor.selectionHighlightBackground": "#0069CC15",
+    "editor.wordHighlightBackground": "#0069CC26",
+    "editor.wordHighlightStrongBackground": "#0069CC26",
+    "editor.findMatchBackground": "#0069CC40",
+    "editor.findMatchHighlightBackground": "#0069CC1A",
+    "editor.findRangeHighlightBackground": "#EAEAEA",
+    "editor.hoverHighlightBackground": "#EAEAEA",
+    "editor.lineHighlightBackground": "#EAEAEA40",
+    "editor.rangeHighlightBackground": "#EAEAEA",
+    "editorLink.activeForeground": "#0069CC",
+    "editorWhitespace.foreground": "#60606040",
+    "editorIndentGuide.background": "#F7F7F740",
+    "editorIndentGuide.activeBackground": "#EEEEEE",
+    "editorRuler.foreground": "#F7F7F7",
+    "editorCodeLens.foreground": "#606060",
+    "editorBracketMatch.background": "#0069CC40",
+    "editorBracketMatch.border": "#F0F1F2FF",
+    "editorWidget.background": "#FAFAFD",
+    "editorWidget.border": "#E4E5E6FF",
+    "editorWidget.foreground": "#202020",
+    "editorSuggestWidget.background": "#FAFAFD",
+    "editorSuggestWidget.border": "#E4E5E6FF",
+    "editorSuggestWidget.foreground": "#202020",
+    "editorSuggestWidget.highlightForeground": "#0069CC",
+    "editorSuggestWidget.selectedBackground": "#0069CC26",
+    "editorSuggestWidget.selectedForeground": "#202020",
+    "editorSuggestWidget.selectedIconForeground": "#202020",
+    "editorHoverWidget.background": "#FAFAFD",
+    "editorHoverWidget.border": "#E4E5E6FF",
+    "peekView.border": "#0069CC",
+    "peekViewEditor.background": "#FAFAFD",
+    "peekViewEditor.matchHighlightBackground": "#0069CC33",
+    "peekViewResult.background": "#FAFAFD",
+    "peekViewResult.fileForeground": "#202020",
+    "peekViewResult.lineForeground": "#606060",
+    "peekViewResult.matchHighlightBackground": "#0069CC33",
+    "peekViewResult.selectionBackground": "#0069CC26",
+    "peekViewResult.selectionForeground": "#202020",
+    "peekViewTitle.background": "#FAFAFD",
+    "peekViewTitleDescription.foreground": "#606060",
+    "peekViewTitleLabel.foreground": "#202020",
+    "editorGutter.addedBackground": "#587c0c",
+    "editorGutter.deletedBackground": "#ad0707",
+    "diffEditor.insertedTextBackground": "#587c0c26",
+    "diffEditor.removedTextBackground": "#ad070726",
+    "editorOverviewRuler.border": "#F0F1F2FF",
+    "editorOverviewRuler.findMatchForeground": "#0069CC99",
+    "editorOverviewRuler.modifiedForeground": "#0069CC",
+    "editorOverviewRuler.addedForeground": "#587c0c",
+    "editorOverviewRuler.deletedForeground": "#ad0707",
+    "editorOverviewRuler.errorForeground": "#ad0707",
+    "editorOverviewRuler.warningForeground": "#667309",
+    "editorGutter.background": "#FFFFFF",
+    "panel.background": "#FAFAFD",
+    "panel.border": "#F0F1F2FF",
+    "panelTitle.activeBorder": "#000000",
+    "panelTitle.activeForeground": "#202020",
+    "panelTitle.inactiveForeground": "#606060",
+    "statusBar.background": "#FAFAFD",
+    "statusBar.foreground": "#606060",
+    "statusBar.border": "#F0F1F2FF",
+    "statusBar.focusBorder": "#0069CCFF",
+    "statusBar.debuggingBackground": "#0069CC",
+    "statusBar.debuggingForeground": "#FFFFFF",
+    "statusBar.noFolderBackground": "#F0F0F3",
+    "statusBar.noFolderForeground": "#606060",
+    "statusBarItem.activeBackground": "#EEEEEE",
+    "statusBarItem.hoverBackground": "#DADADA4f",
+    "statusBarItem.focusBorder": "#0069CCFF",
+    "statusBarItem.prominentBackground": "#0069CCDD",
+    "statusBarItem.prominentForeground": "#FFFFFF",
+    "statusBarItem.prominentHoverBackground": "#0069CC",
+    "toolbar.hoverBackground": "#00000010",
+    "tab.activeBackground": "#FFFFFF",
+    "tab.activeForeground": "#202020",
+    "tab.inactiveBackground": "#FAFAFD",
+    "tab.inactiveForeground": "#606060",
+    "tab.border": "#F0F1F2FF",
+    "tab.lastPinnedBorder": "#F0F1F2FF",
+    "tab.activeBorderTop": "#000000",
+    "tab.hoverBackground": "#FFFFFF",
+    "tab.hoverForeground": "#202020",
+    "tab.unfocusedActiveBackground": "#FAFAFD",
+    "tab.unfocusedActiveForeground": "#606060",
+    "tab.unfocusedInactiveBackground": "#FAFAFD",
+    "tab.unfocusedInactiveForeground": "#BBBBBB",
+    "editorGroupHeader.tabsBackground": "#FAFAFD",
+    "tab.activeBorder": "#FFFFFF",
+    "editorGroupHeader.tabsBorder": "#F0F1F2FF",
+    "breadcrumb.foreground": "#606060",
+    "breadcrumb.background": "#FFFFFF",
+    "breadcrumb.focusForeground": "#202020",
+    "breadcrumb.activeSelectionForeground": "#202020",
+    "breadcrumbPicker.background": "#FAFAFD",
+    "notificationCenter.border": "#F0F1F2FF",
+    "notificationCenterHeader.foreground": "#202020",
+    "notificationCenterHeader.background": "#FAFAFD",
+    "notificationToast.border": "#F0F1F2FF",
+    "notifications.foreground": "#202020",
+    "notifications.background": "#FAFAFD",
+    "notifications.border": "#F0F1F2FF",
+    "notificationLink.foreground": "#0069CC",
+    "notificationsWarningIcon.foreground": "#B69500",
+    "notificationsErrorIcon.foreground": "#ad0707",
+    "notificationsInfoIcon.foreground": "#0069CC",
+    "activityWarningBadge.foreground": "#202020",
+    "activityWarningBadge.background": "#F2C94C",
+    "activityErrorBadge.foreground": "#FFFFFF",
+    "activityErrorBadge.background": "#ad0707",
+    "extensionButton.prominentBackground": "#0069CC",
+    "extensionButton.prominentForeground": "#FFFFFF",
+    "extensionButton.prominentHoverBackground": "#0064CC",
+    "pickerGroup.border": "#EEEEF1",
+    "pickerGroup.foreground": "#202020",
+    "quickInput.background": "#FAFAFD",
+    "quickInput.foreground": "#202020",
+    "quickInputList.focusBackground": "#0069CC",
+    "quickInputList.focusForeground": "#FFFFFF",
+    "quickInputList.focusIconForeground": "#FFFFFF",
+    "quickInputList.focusHighlightForeground": "#FFFFFF",
+    "quickInputList.hoverBackground": "#EDF0F5",
+    "terminal.selectionBackground": "#0069CC26",
+    "terminalCursor.foreground": "#202020",
+    "terminalCursor.background": "#FFFFFF",
+    "gitDecoration.addedResourceForeground": "#587c0c",
+    "gitDecoration.modifiedResourceForeground": "#667309",
+    "gitDecoration.deletedResourceForeground": "#ad0707",
+    "gitDecoration.untrackedResourceForeground": "#587c0c",
+    "gitDecoration.ignoredResourceForeground": "#8E8E90",
+    "gitDecoration.conflictingResourceForeground": "#ad0707",
+    "gitDecoration.stageModifiedResourceForeground": "#667309",
+    "gitDecoration.stageDeletedResourceForeground": "#ad0707",
+    "commandCenter.activeBorder": "#D8D8D8",
+    "quickInput.border": "#D8D8D8",
+    "gauge.foreground": "#0069CC",
+    "gauge.background": "#0069CC40",
+    "gauge.border": "#F0F1F2FF",
+    "gauge.warningForeground": "#B69500",
+    "gauge.warningBackground": "#B6950040",
+    "gauge.errorForeground": "#ad0707",
+    "gauge.errorBackground": "#ad070740",
+    "statusBarItem.prominentHoverForeground": "#FFFFFF",
+    "quickInputTitle.background": "#FAFAFD",
+    "chat.requestBubbleBackground": "#EEF4FB",
+    "chat.requestBubbleHoverBackground": "#E6EDFA",
+    "chat.thinkingShimmer": "#999999",
+    "chat.inputWorkingBorderColor1": "#0069CC",
+    "chat.inputWorkingBorderColor2": "#004A99",
+    "chat.inputWorkingBorderColor3": "#3399E6",
+    "editorCommentsWidget.rangeBackground": "#EEF4FB",
+    "editorCommentsWidget.rangeActiveBackground": "#E6EDFA",
+    "charts.foreground": "#202020",
+    "charts.lines": "#20202066",
+    "charts.blue": "#1A5CFF",
+    "charts.red": "#ad0707",
+    "charts.yellow": "#667309",
+    "charts.orange": "#d18616",
+    "charts.green": "#388A34",
+    "charts.purple": "#652D90",
+    "agentStatusIndicator.background": "#FFFFFF",
+    "inlineChat.border": "#00000000",
+    "minimapSlider.background": "#99999926",
+    "minimapSlider.hoverBackground": "#99999940",
+    "minimapSlider.activeBackground": "#99999955",
+
+    "agents.background": "#FAFAFD",
+    "agentsPanel.background": "#FFFFFF",
+    "agentsPanel.foreground": "#202020",
+    "agentsPanel.border": "#E4E5E6FF",
+    "agentsGradient.tintColor": "#0069CC",
+    "agentsChatInput.background": "#F7F7FA",
+    "agentsChatInput.foreground": "#202020",
+    "agentsChatInput.border": "#D8D8D8",
+    "agentsChatInput.focusBorder": "#0069CCFF",
+    "agentsChatInput.placeholderForeground": "#999999",
+    "agentsNewSessionButton.background": "#00000000",
+    "agentsNewSessionButton.foreground": "#202020",
+    "agentsNewSessionButton.border": "#D8D8D8",
+    "agentsNewSessionButton.hoverBackground": "#00000010",
+    "agentsBadge.background": "#0069CC",
+    "agentsBadge.foreground": "#FFFFFF",
+    "agentsUnreadBadge.background": "#0069CC",
+    "agentsUnreadBadge.foreground": "#FFFFFF"
+  },
+  "tokenColors": [
+    {
+      "scope": ["comment", "punctuation.definition.comment", "string.comment"],
+      "settings": {
+        "foreground": "#6e7781"
+      }
+    },
+    {
+      "scope": ["constant.other.placeholder", "constant.character"],
+      "settings": {
+        "foreground": "#cf222e"
+      }
+    },
+    {
+      "scope": [
+        "constant",
+        "entity.name.constant",
+        "variable.other.constant",
+        "variable.other.enummember",
+        "variable.language",
+        "entity"
+      ],
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": ["entity.name", "meta.export.default", "meta.definition.variable"],
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": [
+        "variable.parameter.function",
+        "meta.jsx.children",
+        "meta.block",
+        "meta.tag.attributes",
+        "entity.name.constant",
+        "meta.object.member",
+        "meta.embedded.expression"
+      ],
+      "settings": {
+        "foreground": "#1f2328"
+      }
+    },
+    {
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#8250df"
+      }
+    },
+    {
+      "scope": ["entity.name.tag", "support.class.component"],
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#cf222e"
+      }
+    },
+    {
+      "scope": ["storage", "storage.type"],
+      "settings": {
+        "foreground": "#cf222e"
+      }
+    },
+    {
+      "scope": ["storage.modifier.package", "storage.modifier.import", "storage.type.java"],
+      "settings": {
+        "foreground": "#1f2328"
+      }
+    },
+    {
+      "scope": ["string", "string punctuation.section.embedded source"],
+      "settings": {
+        "foreground": "#0a3069"
+      }
+    },
+    {
+      "scope": "support",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "meta.property-name",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "variable",
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": "variable.other",
+      "settings": {
+        "foreground": "#1f2328"
+      }
+    },
+    {
+      "scope": "invalid.broken",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": "invalid.deprecated",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": "invalid.illegal",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": "invalid.unimplemented",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": "carriage-return",
+      "settings": {
+        "fontStyle": "italic underline",
+        "background": "#cf222e",
+        "foreground": "#f6f8fa",
+        "content": "^M"
+      }
+    },
+    {
+      "scope": "message.error",
+      "settings": {
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": "string variable",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": ["source.regexp", "string.regexp"],
+      "settings": {
+        "foreground": "#0a3069"
+      }
+    },
+    {
+      "scope": [
+        "string.regexp.character-class",
+        "string.regexp constant.character.escape",
+        "string.regexp source.ruby.embedded",
+        "string.regexp string.regexp.arbitrary-repitition"
+      ],
+      "settings": {
+        "foreground": "#0a3069"
+      }
+    },
+    {
+      "scope": "string.regexp constant.character.escape",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "support.constant",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "support.variable",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "support.type.property-name.json",
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "meta.module-reference",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": ["markup.heading", "markup.heading entity.name"],
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#1f2328"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#1f2328"
+      }
+    },
+    {
+      "scope": ["markup.underline"],
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": ["markup.strikethrough"],
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": ["markup.deleted", "meta.diff.header.from-file", "punctuation.definition.deleted"],
+      "settings": {
+        "background": "#ffebe9",
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded"],
+      "settings": {
+        "foreground": "#cf222e"
+      }
+    },
+    {
+      "scope": ["markup.inserted", "meta.diff.header.to-file", "punctuation.definition.inserted"],
+      "settings": {
+        "background": "#dafbe1",
+        "foreground": "#116329"
+      }
+    },
+    {
+      "scope": ["markup.changed", "punctuation.definition.changed"],
+      "settings": {
+        "background": "#ffd8b5",
+        "foreground": "#953800"
+      }
+    },
+    {
+      "scope": ["markup.ignored", "markup.untracked"],
+      "settings": {
+        "foreground": "#eaeef2",
+        "background": "#0550ae"
+      }
+    },
+    {
+      "scope": "meta.diff.range",
+      "settings": {
+        "foreground": "#8250df",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "meta.separator",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": "meta.output",
+      "settings": {
+        "foreground": "#0550ae"
+      }
+    },
+    {
+      "scope": [
+        "brackethighlighter.tag",
+        "brackethighlighter.curly",
+        "brackethighlighter.round",
+        "brackethighlighter.square",
+        "brackethighlighter.angle",
+        "brackethighlighter.quote"
+      ],
+      "settings": {
+        "foreground": "#57606a"
+      }
+    },
+    {
+      "scope": "brackethighlighter.unmatched",
+      "settings": {
+        "foreground": "#82071e"
+      }
+    },
+    {
+      "scope": ["constant.other.reference.link", "string.other.link"],
+      "settings": {
+        "foreground": "#0a3069"
+      }
+    }
+  ],
+  "semanticHighlighting": true
+}
@@ -0,0 +1,40 @@
+MIT License
+
+Copyright (c) 2015 - present Microsoft Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+These theme JSON files are vendored from:
+  https://github.com/microsoft/vscode
+
+Source paths:
+  extensions/theme-defaults/themes/dark_modern.json
+  extensions/theme-defaults/themes/dark_plus.json
+  extensions/theme-defaults/themes/dark_vs.json
+  extensions/theme-defaults/themes/hc_black.json
+  extensions/theme-defaults/themes/hc_light.json
+  extensions/theme-defaults/themes/light_modern.json
+  extensions/theme-defaults/themes/light_plus.json
+  extensions/theme-defaults/themes/light_vs.json
+  extensions/theme-defaults/themes/2026-dark.json
+  extensions/theme-defaults/themes/2026-light.json
+  extensions/theme-monokai/themes/monokai-color-theme.json
+  extensions/theme-solarized-light/themes/solarized-light-color-theme.json
@@ -0,0 +1,133 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Dark Modern",
+  "include": "./dark_plus.json",
+  "colors": {
+    "activityBar.activeBorder": "#0078D4",
+    "activityBar.background": "#181818",
+    "activityBar.border": "#2B2B2B",
+    "activityBar.foreground": "#D7D7D7",
+    "activityBar.inactiveForeground": "#868686",
+    "activityBarBadge.background": "#0078D4",
+    "activityBarBadge.foreground": "#FFFFFF",
+    "badge.background": "#616161",
+    "badge.foreground": "#F8F8F8",
+    "button.background": "#0078D4",
+    "button.border": "#ffffff1a",
+    "button.foreground": "#FFFFFF",
+    "button.hoverBackground": "#026EC1",
+    "button.secondaryBackground": "#00000000",
+    "button.secondaryForeground": "#CCCCCC",
+    "button.secondaryHoverBackground": "#2B2B2B",
+    "chat.slashCommandBackground": "#26477866",
+    "chat.slashCommandForeground": "#85B6FF",
+    "chat.editedFileForeground": "#E2C08D",
+    "checkbox.background": "#313131",
+    "checkbox.border": "#3C3C3C",
+    "debugToolBar.background": "#181818",
+    "descriptionForeground": "#9D9D9D",
+    "dropdown.background": "#313131",
+    "dropdown.border": "#3C3C3C",
+    "dropdown.foreground": "#CCCCCC",
+    "dropdown.listBackground": "#1F1F1F",
+    "editor.background": "#1F1F1F",
+    "editor.findMatchBackground": "#9E6A03",
+    "editor.foreground": "#CCCCCC",
+    "editorGroup.border": "#FFFFFF17",
+    "editorGroupHeader.tabsBackground": "#181818",
+    "editorGroupHeader.tabsBorder": "#2B2B2B",
+    "editorGutter.addedBackground": "#2EA043",
+    "editorGutter.deletedBackground": "#F85149",
+    "editorGutter.modifiedBackground": "#0078D4",
+    "editorLineNumber.activeForeground": "#CCCCCC",
+    "editorLineNumber.foreground": "#6E7681",
+    "editorOverviewRuler.border": "#010409",
+    "editorWidget.background": "#202020",
+    "errorForeground": "#F85149",
+    "focusBorder": "#0078D4",
+    "foreground": "#CCCCCC",
+    "icon.foreground": "#CCCCCC",
+    "input.background": "#313131",
+    "input.border": "#3C3C3C",
+    "input.foreground": "#CCCCCC",
+    "input.placeholderForeground": "#989898",
+    "inputOption.activeBackground": "#2489DB82",
+    "inputOption.activeBorder": "#2488DB",
+    "keybindingLabel.foreground": "#CCCCCC",
+    "menu.background": "#1F1F1F",
+    "menu.selectionBackground": "#0078d4",
+    "notificationCenterHeader.background": "#1F1F1F",
+    "notificationCenterHeader.foreground": "#CCCCCC",
+    "notifications.background": "#1F1F1F",
+    "notifications.border": "#2B2B2B",
+    "notifications.foreground": "#CCCCCC",
+    "panel.background": "#181818",
+    "panel.border": "#2B2B2B",
+    "panelInput.border": "#2B2B2B",
+    "panelTitle.activeBorder": "#0078D4",
+    "panelTitle.activeForeground": "#CCCCCC",
+    "panelTitle.inactiveForeground": "#9D9D9D",
+    "peekViewEditor.background": "#1F1F1F",
+    "peekViewEditor.matchHighlightBackground": "#BB800966",
+    "peekViewResult.background": "#1F1F1F",
+    "peekViewResult.matchHighlightBackground": "#BB800966",
+    "pickerGroup.border": "#3C3C3C",
+    "progressBar.background": "#0078D4",
+    "quickInput.background": "#222222",
+    "quickInput.foreground": "#CCCCCC",
+    "settings.dropdownBackground": "#313131",
+    "settings.dropdownBorder": "#3C3C3C",
+    "settings.headerForeground": "#FFFFFF",
+    "settings.modifiedItemIndicator": "#BB800966",
+    "sideBar.background": "#181818",
+    "sideBar.border": "#2B2B2B",
+    "sideBar.foreground": "#CCCCCC",
+    "sideBarSectionHeader.background": "#181818",
+    "sideBarSectionHeader.border": "#2B2B2B",
+    "sideBarSectionHeader.foreground": "#CCCCCC",
+    "sideBarTitle.foreground": "#CCCCCC",
+    "statusBar.background": "#181818",
+    "statusBar.border": "#2B2B2B",
+    "statusBarItem.hoverBackground": "#F1F1F133",
+    "statusBarItem.hoverForeground": "#FFFFFF",
+    "statusBar.debuggingBackground": "#0078D4",
+    "statusBar.debuggingForeground": "#FFFFFF",
+    "statusBar.focusBorder": "#0078D4",
+    "statusBar.foreground": "#CCCCCC",
+    "statusBar.noFolderBackground": "#1F1F1F",
+    "statusBarItem.focusBorder": "#0078D4",
+    "statusBarItem.prominentBackground": "#6E768166",
+    "statusBarItem.remoteBackground": "#0078D4",
+    "statusBarItem.remoteForeground": "#FFFFFF",
+    "tab.activeBackground": "#1F1F1F",
+    "tab.activeBorder": "#1F1F1F",
+    "tab.activeBorderTop": "#0078D4",
+    "tab.activeForeground": "#FFFFFF",
+    "tab.selectedBorderTop": "#6caddf",
+    "tab.border": "#2B2B2B",
+    "tab.hoverBackground": "#1F1F1F",
+    "tab.inactiveBackground": "#181818",
+    "tab.inactiveForeground": "#9D9D9D",
+    "tab.unfocusedActiveBorder": "#1F1F1F",
+    "tab.unfocusedActiveBorderTop": "#2B2B2B",
+    "tab.unfocusedHoverBackground": "#1F1F1F",
+    "terminal.foreground": "#CCCCCC",
+    "terminal.tab.activeBorder": "#0078D4",
+    "textBlockQuote.background": "#2B2B2B",
+    "textBlockQuote.border": "#616161",
+    "textCodeBlock.background": "#2B2B2B",
+    "textLink.activeForeground": "#4daafc",
+    "textLink.foreground": "#4daafc",
+    "textPreformat.foreground": "#D0D0D0",
+    "textPreformat.background": "#3C3C3C",
+    "textSeparator.foreground": "#21262D",
+    "titleBar.activeBackground": "#181818",
+    "titleBar.activeForeground": "#CCCCCC",
+    "titleBar.border": "#2B2B2B",
+    "titleBar.inactiveBackground": "#1F1F1F",
+    "titleBar.inactiveForeground": "#9D9D9D",
+    "welcomePage.tileBackground": "#2B2B2B",
+    "welcomePage.progress.foreground": "#0078D4",
+    "widget.border": "#313131"
+  }
+}
@@ -0,0 +1,194 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Dark+",
+  "include": "./dark_vs.json",
+  "tokenColors": [
+    {
+      "name": "Function declarations",
+      "scope": [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member",
+        "entity.name.operator.custom-literal" // See https://en.cppreference.com/w/cpp/language/user_literal
+      ],
+      "settings": {
+        "foreground": "#DCDCAA"
+      }
+    },
+    {
+      "name": "Types declaration and references",
+      "scope": [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.other.attribute",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.numeric.go",
+        "storage.type.byte.go",
+        "storage.type.boolean.go",
+        "storage.type.string.go",
+        "storage.type.uintptr.go",
+        "storage.type.error.go",
+        "storage.type.rune.go",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy"
+      ],
+      "settings": {
+        "foreground": "#4EC9B0"
+      }
+    },
+    {
+      "name": "Types declaration and references, TS grammar specific",
+      "scope": [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby"
+      ],
+      "settings": {
+        "foreground": "#4EC9B0"
+      }
+    },
+    {
+      "name": "Control flow / Special keywords",
+      "scope": [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator",
+        "entity.name.operator"
+      ],
+      "settings": {
+        "foreground": "#C586C0"
+      }
+    },
+    {
+      "name": "Variable and parameter name",
+      "scope": [
+        "variable",
+        "meta.definition.variable.name",
+        "support.variable",
+        "entity.name.variable",
+        "constant.other.placeholder" // placeholders in strings
+      ],
+      "settings": {
+        "foreground": "#9CDCFE"
+      }
+    },
+    {
+      "name": "Constants and enums",
+      "scope": ["variable.other.constant", "variable.other.enummember"],
+      "settings": {
+        "foreground": "#4FC1FF"
+      }
+    },
+    {
+      "name": "Object keys, TS grammar specific",
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "#9CDCFE"
+      }
+    },
+    {
+      "name": "CSS property value",
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#CE9178"
+      }
+    },
+    {
+      "name": "Regular expression groups",
+      "scope": [
+        "punctuation.definition.group.regexp",
+        "punctuation.definition.group.assertion.regexp",
+        "punctuation.definition.character-class.regexp",
+        "punctuation.character.set.begin.regexp",
+        "punctuation.character.set.end.regexp",
+        "keyword.operator.negation.regexp",
+        "support.other.parenthesis.regexp"
+      ],
+      "settings": {
+        "foreground": "#CE9178"
+      }
+    },
+    {
+      "scope": [
+        "constant.character.character-class.regexp",
+        "constant.other.character-class.set.regexp",
+        "constant.other.character-class.regexp",
+        "constant.character.set.regexp"
+      ],
+      "settings": {
+        "foreground": "#d16969"
+      }
+    },
+    {
+      "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+      "settings": {
+        "foreground": "#DCDCAA"
+      }
+    },
+    {
+      "scope": "keyword.operator.quantifier.regexp",
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": ["constant.character", "constant.other.option"],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": "entity.name.label",
+      "settings": {
+        "foreground": "#C8C8C8"
+      }
+    }
+  ],
+  "semanticTokenColors": {
+    "newOperator": "#C586C0",
+    "stringLiteral": "#ce9178",
+    "customLiteral": "#DCDCAA",
+    "numberLiteral": "#b5cea8"
+  }
+}
@@ -0,0 +1,395 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Dark (Visual Studio)",
+  "colors": {
+    "checkbox.border": "#6B6B6B",
+    "editor.background": "#1E1E1E",
+    "editor.foreground": "#D4D4D4",
+    "editor.inactiveSelectionBackground": "#3A3D41",
+    "editorIndentGuide.background1": "#404040",
+    "editorIndentGuide.activeBackground1": "#707070",
+    "editor.selectionHighlightBackground": "#ADD6FF26",
+    "list.dropBackground": "#383B3D",
+    "activityBarBadge.background": "#007ACC",
+    "sideBarTitle.foreground": "#BBBBBB",
+    "input.placeholderForeground": "#A6A6A6",
+    "menu.background": "#252526",
+    "menu.foreground": "#CCCCCC",
+    "menu.separatorBackground": "#454545",
+    "menu.border": "#454545",
+    "menu.selectionBackground": "#0078d4",
+    "statusBarItem.remoteForeground": "#FFF",
+    "statusBarItem.remoteBackground": "#16825D",
+    "ports.iconRunningProcessForeground": "#369432",
+    "sideBarSectionHeader.background": "#0000",
+    "sideBarSectionHeader.border": "#ccc3",
+    "tab.selectedBackground": "#222222",
+    "tab.selectedForeground": "#ffffffa0",
+    "tab.lastPinnedBorder": "#ccc3",
+    "list.activeSelectionIconForeground": "#FFF",
+    "terminal.inactiveSelectionBackground": "#3A3D41",
+    "widget.border": "#303031",
+    "actionBar.toggledBackground": "#383a49"
+  },
+  "tokenColors": [
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "#D4D4D4"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "strong",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "header",
+      "settings": {
+        "foreground": "#000080"
+      }
+    },
+    {
+      "scope": "comment",
+      "settings": {
+        "foreground": "#6A9955"
+      }
+    },
+    {
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "variable.other.enummember",
+        "keyword.operator.plus.exponent",
+        "keyword.operator.minus.exponent"
+      ],
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "constant.regexp",
+      "settings": {
+        "foreground": "#646695"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": ["entity.name.tag.css", "entity.name.tag.less"],
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss"
+      ],
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#f44747"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "markup.heading",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#C586C0"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "punctuation.definition.quote.begin.markdown",
+      "settings": {
+        "foreground": "#6A9955"
+      }
+    },
+    {
+      "scope": "punctuation.definition.list.begin.markdown",
+      "settings": {
+        "foreground": "#6796e6"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "name": "brackets of XML/HTML tags",
+      "scope": "punctuation.definition.tag",
+      "settings": {
+        "foreground": "#808080"
+      }
+    },
+    {
+      "scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.string",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.numeric",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "meta.structure.dictionary.key.python",
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "storage",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": ["storage.modifier", "keyword.operator.noexcept"],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": ["string", "meta.embedded.assembly"],
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.tag",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.value",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "#d16969"
+      }
+    },
+    {
+      "name": "String interpolation",
+      "scope": [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded"
+      ],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "name": "Reset JavaScript string interpolation expression",
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "scope": [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded"
+      ],
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.alignof",
+        "keyword.operator.typeid",
+        "keyword.operator.alignas",
+        "keyword.operator.instanceof",
+        "keyword.operator.logical.python",
+        "keyword.operator.wordlike"
+      ],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "support.function.git-rebase",
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": "constant.sha.git-rebase",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "name": "coloring of the Java import and package identifiers",
+      "scope": [
+        "storage.modifier.import.java",
+        "variable.language.wildcard.java",
+        "storage.modifier.package.java"
+      ],
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "name": "this.self",
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    }
+  ],
+  "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "newOperator": "#d4d4d4",
+    "stringLiteral": "#ce9178",
+    "customLiteral": "#D4D4D4",
+    "numberLiteral": "#b5cea8"
+  }
+}
@@ -0,0 +1,456 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Dark High Contrast",
+  "colors": {
+    "editor.background": "#000000",
+    "editor.foreground": "#FFFFFF",
+    "editorIndentGuide.background1": "#FFFFFF",
+    "editorIndentGuide.activeBackground1": "#FFFFFF",
+    "sideBarTitle.foreground": "#FFFFFF",
+    "selection.background": "#008000",
+    "editor.selectionBackground": "#FFFFFF",
+    "statusBarItem.remoteBackground": "#00000000",
+    "ports.iconRunningProcessForeground": "#FFFFFF",
+    "editorWhitespace.foreground": "#7c7c7c",
+    "actionBar.toggledBackground": "#383a49"
+  },
+  "tokenColors": [
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "#FFFFFF"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "strong",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#000080"
+      }
+    },
+    {
+      "scope": "comment",
+      "settings": {
+        "foreground": "#7ca668"
+      }
+    },
+    {
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "constant.regexp",
+      "settings": {
+        "foreground": "#b46695"
+      }
+    },
+    {
+      "scope": "constant.character",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": ["entity.name.tag.css", "entity.name.tag.less"],
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss"
+      ],
+      "settings": {
+        "foreground": "#d7ba7d"
+      }
+    },
+    {
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#f44747"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.heading",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#6796e6"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "name": "brackets of XML/HTML tags",
+      "scope": ["punctuation.definition.tag"],
+      "settings": {
+        "foreground": "#808080"
+      }
+    },
+    {
+      "scope": "meta.preprocessor",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.string",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.numeric",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "meta.structure.dictionary.key.python",
+      "settings": {
+        "foreground": "#9cdcfe"
+      }
+    },
+    {
+      "scope": "storage",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "storage.modifier",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "string",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.tag",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.value",
+      "settings": {
+        "foreground": "#ce9178"
+      }
+    },
+    {
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "#d16969"
+      }
+    },
+    {
+      "name": "String interpolation",
+      "scope": [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded"
+      ],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "name": "Reset JavaScript string interpolation expression",
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "#ffffff"
+      }
+    },
+    {
+      "scope": [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded"
+      ],
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.logical.python"
+      ],
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "scope": "support.function.git-rebase",
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "scope": "constant.sha.git-rebase",
+      "settings": {
+        "foreground": "#b5cea8"
+      }
+    },
+    {
+      "name": "coloring of the Java import and package identifiers",
+      "scope": [
+        "storage.modifier.import.java",
+        "variable.language.wildcard.java",
+        "storage.modifier.package.java"
+      ],
+      "settings": {
+        "foreground": "#d4d4d4"
+      }
+    },
+    {
+      "name": "coloring of the TS this",
+      "scope": "variable.language.this",
+      "settings": {
+        "foreground": "#569cd6"
+      }
+    },
+    {
+      "name": "Function declarations",
+      "scope": [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member"
+      ],
+      "settings": {
+        "foreground": "#DCDCAA"
+      }
+    },
+    {
+      "name": "Types declaration and references",
+      "scope": [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy"
+      ],
+      "settings": {
+        "foreground": "#4EC9B0"
+      }
+    },
+    {
+      "name": "Types declaration and references, TS grammar specific",
+      "scope": [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby"
+      ],
+      "settings": {
+        "foreground": "#4EC9B0"
+      }
+    },
+    {
+      "name": "Control flow / Special keywords",
+      "scope": [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "source.cpp keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator"
+      ],
+      "settings": {
+        "foreground": "#C586C0"
+      }
+    },
+    {
+      "name": "Variable and parameter name",
+      "scope": ["variable", "meta.definition.variable.name", "support.variable"],
+      "settings": {
+        "foreground": "#9CDCFE"
+      }
+    },
+    {
+      "name": "Object keys, TS grammar specific",
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "#9CDCFE"
+      }
+    },
+    {
+      "name": "CSS property value",
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#CE9178"
+      }
+    },
+    {
+      "name": "HC Search Editor context line override",
+      "scope": "meta.resultLinePrefix.contextLinePrefix.search",
+      "settings": {
+        "foreground": "#CBEDCB"
+      }
+    }
+  ],
+  "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "newOperator": "#FFFFFF",
+    "stringLiteral": "#ce9178",
+    "customLiteral": "#DCDCAA",
+    "numberLiteral": "#b5cea8"
+  }
+}
@@ -0,0 +1,570 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Light High Contrast",
+  "tokenColors": [
+    {
+      "scope": ["meta.embedded", "source.groovy.embedded", "variable.legacy.builtin.python"],
+      "settings": {
+        "foreground": "#292929"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "strong",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#062F4A"
+      }
+    },
+    {
+      "scope": "comment",
+      "settings": {
+        "foreground": "#515151"
+      }
+    },
+    {
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "variable.other.enummember",
+        "keyword.operator.plus.exponent",
+        "keyword.operator.minus.exponent"
+      ],
+      "settings": {
+        "foreground": "#096d48"
+      }
+    },
+    {
+      "scope": "constant.regexp",
+      "settings": {
+        "foreground": "#811F3F"
+      }
+    },
+    {
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "entity.name.selector",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "#264F78"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss"
+      ],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#B5200D"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "foreground": "#000080",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.heading",
+      "settings": {
+        "foreground": "#0F4A85",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#800080"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#096d48"
+      }
+    },
+    {
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "#5A5A5A"
+      }
+    },
+    {
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.quote.begin.markdown",
+        "punctuation.definition.list.begin.markdown"
+      ],
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "punctuation.definition.tag",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.string",
+      "settings": {
+        "foreground": "#b5200d"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.numeric",
+      "settings": {
+        "foreground": "#096d48"
+      }
+    },
+    {
+      "scope": "meta.structure.dictionary.key.python",
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": "storage",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": ["storage.modifier", "keyword.operator.noexcept"],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": ["string", "meta.embedded.assembly"],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": [
+        "string.comment.buffered.block.pug",
+        "string.quoted.pug",
+        "string.interpolated.pug",
+        "string.unquoted.plain.in.yaml",
+        "string.unquoted.plain.out.yaml",
+        "string.unquoted.block.yaml",
+        "string.quoted.single.yaml",
+        "string.quoted.double.xml",
+        "string.quoted.single.xml",
+        "string.unquoted.cdata.xml",
+        "string.quoted.double.html",
+        "string.quoted.single.html",
+        "string.unquoted.html",
+        "string.quoted.single.handlebars",
+        "string.quoted.double.handlebars"
+      ],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "#811F3F"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded"
+      ],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded"
+      ],
+      "settings": {
+        "foreground": "#264F78"
+      }
+    },
+    {
+      "scope": ["support.type.property-name.json"],
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.alignof",
+        "keyword.operator.typeid",
+        "keyword.operator.alignas",
+        "keyword.operator.instanceof",
+        "keyword.operator.logical.python",
+        "keyword.operator.wordlike"
+      ],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#096d48"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "support.function.git-rebase",
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": "constant.sha.git-rebase",
+      "settings": {
+        "foreground": "#096d48"
+      }
+    },
+    {
+      "scope": [
+        "storage.modifier.import.java",
+        "variable.language.wildcard.java",
+        "storage.modifier.package.java"
+      ],
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member",
+        "entity.name.operator.custom-literal"
+      ],
+      "settings": {
+        "foreground": "#5e2cbc"
+      }
+    },
+    {
+      "scope": [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.other.attribute",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.numeric.go",
+        "storage.type.byte.go",
+        "storage.type.boolean.go",
+        "storage.type.string.go",
+        "storage.type.uintptr.go",
+        "storage.type.error.go",
+        "storage.type.rune.go",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy"
+      ],
+      "settings": {
+        "foreground": "#185E73"
+      }
+    },
+    {
+      "scope": [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby"
+      ],
+      "settings": {
+        "foreground": "#185E73"
+      }
+    },
+    {
+      "scope": [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "source.cpp keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator",
+        "entity.name.operator"
+      ],
+      "settings": {
+        "foreground": "#b5200d"
+      }
+    },
+    {
+      "scope": [
+        "variable",
+        "meta.definition.variable.name",
+        "support.variable",
+        "entity.name.variable",
+        "constant.other.placeholder"
+      ],
+      "settings": {
+        "foreground": "#001080"
+      }
+    },
+    {
+      "scope": ["variable.other.constant", "variable.other.enummember"],
+      "settings": {
+        "foreground": "#02715D"
+      }
+    },
+    {
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "#001080"
+      }
+    },
+    {
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#0451A5"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.group.regexp",
+        "punctuation.definition.group.assertion.regexp",
+        "punctuation.definition.character-class.regexp",
+        "punctuation.character.set.begin.regexp",
+        "punctuation.character.set.end.regexp",
+        "keyword.operator.negation.regexp",
+        "support.other.parenthesis.regexp"
+      ],
+      "settings": {
+        "foreground": "#D16969"
+      }
+    },
+    {
+      "scope": [
+        "constant.character.character-class.regexp",
+        "constant.other.character-class.set.regexp",
+        "constant.other.character-class.regexp",
+        "constant.character.set.regexp"
+      ],
+      "settings": {
+        "foreground": "#811F3F"
+      }
+    },
+    {
+      "scope": "keyword.operator.quantifier.regexp",
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+      "settings": {
+        "foreground": "#EE0000"
+      }
+    },
+    {
+      "scope": "constant.character",
+      "settings": {
+        "foreground": "#0F4A85"
+      }
+    },
+    {
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#EE0000"
+      }
+    },
+    {
+      "scope": "entity.name.label",
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#316BCD"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#CD9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#CD3131"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#800080"
+      }
+    }
+  ],
+  "colors": {
+    "actionBar.toggledBackground": "#dddddd",
+    "statusBarItem.remoteBackground": "#FFFFFF",
+    "statusBarItem.remoteForeground": "#000000"
+  }
+}
@@ -0,0 +1,152 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Light Modern",
+  "include": "./light_plus.json",
+  "colors": {
+    "activityBar.activeBorder": "#005FB8",
+    "activityBar.background": "#F8F8F8",
+    "activityBar.border": "#E5E5E5",
+    "activityBar.foreground": "#1F1F1F",
+    "activityBar.inactiveForeground": "#616161",
+    "activityBarBadge.background": "#005FB8",
+    "activityBarBadge.foreground": "#FFFFFF",
+    "badge.background": "#CCCCCC",
+    "badge.foreground": "#3B3B3B",
+    "button.background": "#005FB8",
+    "button.border": "#0000001a",
+    "button.foreground": "#FFFFFF",
+    "button.hoverBackground": "#0258A8",
+    "button.secondaryBackground": "#E5E5E5",
+    "button.secondaryForeground": "#3B3B3B",
+    "button.secondaryHoverBackground": "#CCCCCC",
+    "chat.slashCommandBackground": "#ADCEFF7A",
+    "chat.slashCommandForeground": "#26569E",
+    "chat.editedFileForeground": "#895503",
+    "checkbox.background": "#F8F8F8",
+    "checkbox.border": "#CECECE",
+    "descriptionForeground": "#3B3B3B",
+    "dropdown.background": "#FFFFFF",
+    "dropdown.border": "#CECECE",
+    "dropdown.foreground": "#3B3B3B",
+    "dropdown.listBackground": "#FFFFFF",
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#3B3B3B",
+    "editor.inactiveSelectionBackground": "#E5EBF1",
+    "editor.selectionHighlightBackground": "#ADD6FF80",
+    "editorGroup.border": "#E5E5E5",
+    "editorGroupHeader.tabsBackground": "#F8F8F8",
+    "editorGroupHeader.tabsBorder": "#E5E5E5",
+    "editorGutter.addedBackground": "#2EA043",
+    "editorGutter.deletedBackground": "#F85149",
+    "editorGutter.modifiedBackground": "#005FB8",
+    "editorIndentGuide.background1": "#D3D3D3",
+    "editorLineNumber.activeForeground": "#171184",
+    "editorLineNumber.foreground": "#6E7681",
+    "editorOverviewRuler.border": "#E5E5E5",
+    "editorSuggestWidget.background": "#F8F8F8",
+    "editorWidget.background": "#F8F8F8",
+    "errorForeground": "#F85149",
+    "focusBorder": "#005FB8",
+    "foreground": "#3B3B3B",
+    "icon.foreground": "#3B3B3B",
+    "input.background": "#FFFFFF",
+    "input.border": "#CECECE",
+    "input.foreground": "#3B3B3B",
+    "input.placeholderForeground": "#767676",
+    "inputOption.activeBackground": "#BED6ED",
+    "inputOption.activeBorder": "#005FB8",
+    "inputOption.activeForeground": "#000000",
+    "keybindingLabel.foreground": "#3B3B3B",
+    "list.activeSelectionBackground": "#E8E8E8",
+    "list.activeSelectionForeground": "#000000",
+    "list.activeSelectionIconForeground": "#000000",
+    "list.hoverBackground": "#F2F2F2",
+    "list.focusAndSelectionOutline": "#005FB8",
+    "menu.border": "#CECECE",
+    "menu.selectionBackground": "#005FB8",
+    "menu.selectionForeground": "#ffffff",
+    "notebook.cellBorderColor": "#E5E5E5",
+    "notebook.selectedCellBackground": "#C8DDF150",
+    "notificationCenterHeader.background": "#FFFFFF",
+    "notificationCenterHeader.foreground": "#3B3B3B",
+    "notifications.background": "#FFFFFF",
+    "notifications.border": "#E5E5E5",
+    "notifications.foreground": "#3B3B3B",
+    "panel.background": "#F8F8F8",
+    "panel.border": "#E5E5E5",
+    "panelInput.border": "#E5E5E5",
+    "panelTitle.activeBorder": "#005FB8",
+    "panelTitle.activeForeground": "#3B3B3B",
+    "panelTitle.inactiveForeground": "#3B3B3B",
+    "peekViewEditor.matchHighlightBackground": "#BB800966",
+    "peekViewResult.background": "#FFFFFF",
+    "peekViewResult.matchHighlightBackground": "#BB800966",
+    "pickerGroup.border": "#E5E5E5",
+    "pickerGroup.foreground": "#8B949E",
+    "ports.iconRunningProcessForeground": "#369432",
+    "progressBar.background": "#005FB8",
+    "quickInput.background": "#F8F8F8",
+    "quickInput.foreground": "#3B3B3B",
+    "searchEditor.textInputBorder": "#CECECE",
+    "settings.dropdownBackground": "#FFFFFF",
+    "settings.dropdownBorder": "#CECECE",
+    "settings.headerForeground": "#1F1F1F",
+    "settings.modifiedItemIndicator": "#BB800966",
+    "settings.numberInputBorder": "#CECECE",
+    "settings.textInputBorder": "#CECECE",
+    "sideBar.background": "#F8F8F8",
+    "sideBar.border": "#E5E5E5",
+    "sideBar.foreground": "#3B3B3B",
+    "sideBarSectionHeader.background": "#F8F8F8",
+    "sideBarSectionHeader.border": "#E5E5E5",
+    "sideBarSectionHeader.foreground": "#3B3B3B",
+    "sideBarTitle.foreground": "#3B3B3B",
+    "statusBar.background": "#F8F8F8",
+    "statusBar.foreground": "#3B3B3B",
+    "statusBar.border": "#E5E5E5",
+    "statusBarItem.hoverBackground": "#1F1F1F11",
+    "statusBarItem.hoverForeground": "#000000",
+    "statusBarItem.compactHoverBackground": "#CCCCCC",
+    "statusBar.debuggingBackground": "#FD716C",
+    "statusBar.debuggingForeground": "#000000",
+    "statusBar.focusBorder": "#005FB8",
+    "statusBar.noFolderBackground": "#F8F8F8",
+    "statusBarItem.errorBackground": "#C72E0F",
+    "statusBarItem.focusBorder": "#005FB8",
+    "statusBarItem.prominentBackground": "#6E768166",
+    "statusBarItem.remoteBackground": "#005FB8",
+    "statusBarItem.remoteForeground": "#FFFFFF",
+    "tab.activeBackground": "#FFFFFF",
+    "tab.activeBorder": "#F8F8F8",
+    "tab.activeBorderTop": "#005FB8",
+    "tab.activeForeground": "#3B3B3B",
+    "tab.selectedBorderTop": "#68a3da",
+    "tab.border": "#E5E5E5",
+    "tab.hoverBackground": "#FFFFFF",
+    "tab.inactiveBackground": "#F8F8F8",
+    "tab.inactiveForeground": "#868686",
+    "tab.lastPinnedBorder": "#D4D4D4",
+    "tab.unfocusedActiveBorder": "#F8F8F8",
+    "tab.unfocusedActiveBorderTop": "#E5E5E5",
+    "tab.unfocusedHoverBackground": "#F8F8F8",
+    "terminalCursor.foreground": "#005FB8",
+    "terminal.foreground": "#3B3B3B",
+    "terminal.inactiveSelectionBackground": "#E5EBF1",
+    "terminal.tab.activeBorder": "#005FB8",
+    "textBlockQuote.background": "#F8F8F8",
+    "textBlockQuote.border": "#E5E5E5",
+    "textCodeBlock.background": "#F8F8F8",
+    "textLink.activeForeground": "#005FB8",
+    "textLink.foreground": "#005FB8",
+    "textPreformat.foreground": "#3B3B3B",
+    "textPreformat.background": "#0000001F",
+    "textSeparator.foreground": "#21262D",
+    "titleBar.activeBackground": "#F8F8F8",
+    "titleBar.activeForeground": "#1E1E1E",
+    "titleBar.border": "#E5E5E5",
+    "titleBar.inactiveBackground": "#F8F8F8",
+    "titleBar.inactiveForeground": "#8B949E",
+    "welcomePage.tileBackground": "#F3F3F3",
+    "widget.border": "#E5E5E5"
+  }
+}
@@ -0,0 +1,196 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Light+",
+  "include": "./light_vs.json",
+  "tokenColors": [
+    // adds rules to the light vs rules
+    {
+      "name": "Function declarations",
+      "scope": [
+        "entity.name.function",
+        "support.function",
+        "support.constant.handlebars",
+        "source.powershell variable.other.member",
+        "entity.name.operator.custom-literal" // See https://en.cppreference.com/w/cpp/language/user_literal
+      ],
+      "settings": {
+        "foreground": "#795E26"
+      }
+    },
+    {
+      "name": "Types declaration and references",
+      "scope": [
+        "support.class",
+        "support.type",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.other.attribute",
+        "entity.name.scope-resolution",
+        "entity.name.class",
+        "storage.type.numeric.go",
+        "storage.type.byte.go",
+        "storage.type.boolean.go",
+        "storage.type.string.go",
+        "storage.type.uintptr.go",
+        "storage.type.error.go",
+        "storage.type.rune.go",
+        "storage.type.cs",
+        "storage.type.generic.cs",
+        "storage.type.modifier.cs",
+        "storage.type.variable.cs",
+        "storage.type.annotation.java",
+        "storage.type.generic.java",
+        "storage.type.java",
+        "storage.type.object.array.java",
+        "storage.type.primitive.array.java",
+        "storage.type.primitive.java",
+        "storage.type.token.java",
+        "storage.type.groovy",
+        "storage.type.annotation.groovy",
+        "storage.type.parameters.groovy",
+        "storage.type.generic.groovy",
+        "storage.type.object.array.groovy",
+        "storage.type.primitive.array.groovy",
+        "storage.type.primitive.groovy"
+      ],
+      "settings": {
+        "foreground": "#267f99"
+      }
+    },
+    {
+      "name": "Types declaration and references, TS grammar specific",
+      "scope": [
+        "meta.type.cast.expr",
+        "meta.type.new.expr",
+        "support.constant.math",
+        "support.constant.dom",
+        "support.constant.json",
+        "entity.other.inherited-class",
+        "punctuation.separator.namespace.ruby"
+      ],
+      "settings": {
+        "foreground": "#267f99"
+      }
+    },
+    {
+      "name": "Control flow / Special keywords",
+      "scope": [
+        "keyword.control",
+        "source.cpp keyword.operator.new",
+        "source.cpp keyword.operator.delete",
+        "keyword.other.using",
+        "keyword.other.directive.using",
+        "keyword.other.operator",
+        "entity.name.operator"
+      ],
+      "settings": {
+        "foreground": "#AF00DB"
+      }
+    },
+    {
+      "name": "Variable and parameter name",
+      "scope": [
+        "variable",
+        "meta.definition.variable.name",
+        "support.variable",
+        "entity.name.variable",
+        "constant.other.placeholder" // placeholders in strings
+      ],
+      "settings": {
+        "foreground": "#001080"
+      }
+    },
+    {
+      "name": "Constants and enums",
+      "scope": ["variable.other.constant", "variable.other.enummember"],
+      "settings": {
+        "foreground": "#0070C1"
+      }
+    },
+    {
+      "name": "Object keys, TS grammar specific",
+      "scope": ["meta.object-literal.key"],
+      "settings": {
+        "foreground": "#001080"
+      }
+    },
+    {
+      "name": "CSS property value",
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "name": "Regular expression groups",
+      "scope": [
+        "punctuation.definition.group.regexp",
+        "punctuation.definition.group.assertion.regexp",
+        "punctuation.definition.character-class.regexp",
+        "punctuation.character.set.begin.regexp",
+        "punctuation.character.set.end.regexp",
+        "keyword.operator.negation.regexp",
+        "support.other.parenthesis.regexp"
+      ],
+      "settings": {
+        "foreground": "#d16969"
+      }
+    },
+    {
+      "scope": [
+        "constant.character.character-class.regexp",
+        "constant.other.character-class.set.regexp",
+        "constant.other.character-class.regexp",
+        "constant.character.set.regexp"
+      ],
+      "settings": {
+        "foreground": "#811f3f"
+      }
+    },
+    {
+      "scope": "keyword.operator.quantifier.regexp",
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": ["keyword.operator.or.regexp", "keyword.control.anchor.regexp"],
+      "settings": {
+        "foreground": "#EE0000"
+      }
+    },
+    {
+      "scope": ["constant.character", "constant.other.option"],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "constant.character.escape",
+      "settings": {
+        "foreground": "#EE0000"
+      }
+    },
+    {
+      "scope": "entity.name.label",
+      "settings": {
+        "foreground": "#000000"
+      }
+    }
+  ],
+  "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "newOperator": "#AF00DB",
+    "stringLiteral": "#a31515",
+    "customLiteral": "#795E26",
+    "numberLiteral": "#098658"
+  }
+}
@@ -0,0 +1,424 @@
+{
+  "$schema": "vscode://schemas/color-theme",
+  "name": "Light (Visual Studio)",
+  "colors": {
+    "checkbox.border": "#919191",
+    "editor.background": "#FFFFFF",
+    "editor.foreground": "#000000",
+    "editor.inactiveSelectionBackground": "#E5EBF1",
+    "editorIndentGuide.background1": "#D3D3D3",
+    "editorIndentGuide.activeBackground1": "#939393",
+    "editor.selectionHighlightBackground": "#ADD6FF80",
+    "editorSuggestWidget.background": "#F3F3F3",
+    "activityBarBadge.background": "#007ACC",
+    "sideBarTitle.foreground": "#6F6F6F",
+    "list.hoverBackground": "#E8E8E8",
+    "menu.border": "#D4D4D4",
+    "input.placeholderForeground": "#767676",
+    "searchEditor.textInputBorder": "#CECECE",
+    "settings.textInputBorder": "#CECECE",
+    "settings.numberInputBorder": "#CECECE",
+    "statusBarItem.remoteForeground": "#FFF",
+    "statusBarItem.remoteBackground": "#16825D",
+    "ports.iconRunningProcessForeground": "#369432",
+    "sideBarSectionHeader.background": "#0000",
+    "sideBarSectionHeader.border": "#61616130",
+    "tab.selectedForeground": "#333333b3",
+    "tab.selectedBackground": "#ffffffa5",
+    "tab.lastPinnedBorder": "#61616130",
+    "notebook.cellBorderColor": "#E8E8E8",
+    "notebook.selectedCellBackground": "#c8ddf150",
+    "statusBarItem.errorBackground": "#c72e0f",
+    "list.activeSelectionIconForeground": "#FFF",
+    "list.focusAndSelectionOutline": "#90C2F9",
+    "terminal.inactiveSelectionBackground": "#E5EBF1",
+    "widget.border": "#d4d4d4",
+    "actionBar.toggledBackground": "#dddddd",
+    "diffEditor.unchangedRegionBackground": "#f8f8f8",
+    "agentsNewSessionButton.border": "#D8D8D8",
+    "agentsChatInput.border": "#D8D8D8"
+  },
+  "tokenColors": [
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "#000000ff"
+      }
+    },
+    {
+      "scope": "emphasis",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "strong",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "scope": "meta.diff.header",
+      "settings": {
+        "foreground": "#000080"
+      }
+    },
+    {
+      "scope": "comment",
+      "settings": {
+        "foreground": "#008000"
+      }
+    },
+    {
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": [
+        "constant.numeric",
+        "variable.other.enummember",
+        "keyword.operator.plus.exponent",
+        "keyword.operator.minus.exponent"
+      ],
+      "settings": {
+        "foreground": "#098658"
+      }
+    },
+    {
+      "scope": "constant.regexp",
+      "settings": {
+        "foreground": "#811f3f"
+      }
+    },
+    {
+      "name": "css tags in selectors, xml tags",
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": "entity.name.selector",
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "#e50000"
+      }
+    },
+    {
+      "scope": [
+        "entity.other.attribute-name.class.css",
+        "source.css entity.other.attribute-name.class",
+        "entity.other.attribute-name.id.css",
+        "entity.other.attribute-name.parent-selector.css",
+        "entity.other.attribute-name.parent.less",
+        "source.css entity.other.attribute-name.pseudo-class",
+        "entity.other.attribute-name.pseudo-element.css",
+        "source.css.less entity.other.attribute-name.id",
+        "entity.other.attribute-name.scss"
+      ],
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#cd3131"
+      }
+    },
+    {
+      "scope": "markup.underline",
+      "settings": {
+        "fontStyle": "underline"
+      }
+    },
+    {
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#000080"
+      }
+    },
+    {
+      "scope": "markup.heading",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#800080"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#098658"
+      }
+    },
+    {
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "#a31515"
+      }
+    },
+    {
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": [
+        "punctuation.definition.quote.begin.markdown",
+        "punctuation.definition.list.begin.markdown"
+      ],
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": "markup.inline.raw",
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "name": "brackets of XML/HTML tags",
+      "scope": "punctuation.definition.tag",
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": ["meta.preprocessor", "entity.name.function.preprocessor"],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.string",
+      "settings": {
+        "foreground": "#a31515"
+      }
+    },
+    {
+      "scope": "meta.preprocessor.numeric",
+      "settings": {
+        "foreground": "#098658"
+      }
+    },
+    {
+      "scope": "meta.structure.dictionary.key.python",
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": "storage",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "storage.type",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": ["storage.modifier", "keyword.operator.noexcept"],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": ["string", "meta.embedded.assembly"],
+      "settings": {
+        "foreground": "#a31515"
+      }
+    },
+    {
+      "scope": [
+        "string.comment.buffered.block.pug",
+        "string.quoted.pug",
+        "string.interpolated.pug",
+        "string.unquoted.plain.in.yaml",
+        "string.unquoted.plain.out.yaml",
+        "string.unquoted.block.yaml",
+        "string.quoted.single.yaml",
+        "string.quoted.double.xml",
+        "string.quoted.single.xml",
+        "string.unquoted.cdata.xml",
+        "string.quoted.double.html",
+        "string.quoted.single.html",
+        "string.unquoted.html",
+        "string.quoted.single.handlebars",
+        "string.quoted.double.handlebars"
+      ],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "#811f3f"
+      }
+    },
+    {
+      "name": "String interpolation",
+      "scope": [
+        "punctuation.definition.template-expression.begin",
+        "punctuation.definition.template-expression.end",
+        "punctuation.section.embedded"
+      ],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "name": "Reset JavaScript string interpolation expression",
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": [
+        "support.constant.property-value",
+        "support.constant.font-name",
+        "support.constant.media-type",
+        "support.constant.media",
+        "constant.other.color.rgb-value",
+        "constant.other.rgb-value",
+        "support.constant.color"
+      ],
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": [
+        "support.type.vendored.property-name",
+        "support.type.property-name",
+        "source.css variable",
+        "source.coffee.embedded"
+      ],
+      "settings": {
+        "foreground": "#e50000"
+      }
+    },
+    {
+      "scope": ["support.type.property-name.json"],
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "keyword.control",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "keyword.operator",
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "scope": [
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.cast",
+        "keyword.operator.sizeof",
+        "keyword.operator.alignof",
+        "keyword.operator.typeid",
+        "keyword.operator.alignas",
+        "keyword.operator.instanceof",
+        "keyword.operator.logical.python",
+        "keyword.operator.wordlike"
+      ],
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    },
+    {
+      "scope": "keyword.other.unit",
+      "settings": {
+        "foreground": "#098658"
+      }
+    },
+    {
+      "scope": ["punctuation.section.embedded.begin.php", "punctuation.section.embedded.end.php"],
+      "settings": {
+        "foreground": "#800000"
+      }
+    },
+    {
+      "scope": "support.function.git-rebase",
+      "settings": {
+        "foreground": "#0451a5"
+      }
+    },
+    {
+      "scope": "constant.sha.git-rebase",
+      "settings": {
+        "foreground": "#098658"
+      }
+    },
+    {
+      "name": "coloring of the Java import and package identifiers",
+      "scope": [
+        "storage.modifier.import.java",
+        "variable.language.wildcard.java",
+        "storage.modifier.package.java"
+      ],
+      "settings": {
+        "foreground": "#000000"
+      }
+    },
+    {
+      "name": "this.self",
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#0000ff"
+      }
+    }
+  ],
+  "semanticHighlighting": true,
+  "semanticTokenColors": {
+    "newOperator": "#0000ff",
+    "stringLiteral": "#a31515",
+    "customLiteral": "#000000",
+    "numberLiteral": "#098658"
+  }
+}
@@ -0,0 +1,482 @@
+// This theme's colors are based on the original Monokai:
+//   #1e1f1c (tab well, borders)
+//   #272822 (editor background)
+//   #414339 (selection)
+//   #75715e (focus)
+//   #f8f8f2 (editor foreground)
+{
+  "type": "dark",
+  "colors": {
+    "dropdown.background": "#414339",
+    "list.activeSelectionBackground": "#75715E",
+    "quickInputList.focusBackground": "#414339",
+    "dropdown.listBackground": "#1e1f1c",
+    "list.inactiveSelectionBackground": "#414339",
+    "list.hoverBackground": "#3e3d32",
+    "list.dropBackground": "#414339",
+    "list.highlightForeground": "#f8f8f2",
+    "button.background": "#75715E",
+    "editor.background": "#272822",
+    "editor.foreground": "#f8f8f2",
+    "selection.background": "#878b9180",
+    "editor.selectionHighlightBackground": "#575b6180",
+    "editor.selectionBackground": "#878b9180",
+    "minimap.selectionHighlight": "#878b9180",
+    "editor.wordHighlightBackground": "#4a4a7680",
+    "editor.wordHighlightStrongBackground": "#6a6a9680",
+    "editor.lineHighlightBackground": "#3e3d32",
+    "editorLineNumber.activeForeground": "#c2c2bf",
+    "editorCursor.foreground": "#f8f8f0",
+    "editorWhitespace.foreground": "#464741",
+    "editorIndentGuide.background": "#464741",
+    "editorIndentGuide.activeBackground": "#767771",
+    "editorGroupHeader.tabsBackground": "#1e1f1c",
+    "editorGroup.dropBackground": "#41433980",
+    "tab.inactiveBackground": "#34352f",
+    "tab.border": "#1e1f1c",
+    "tab.inactiveForeground": "#ccccc7", // needs to be bright so it's readable when another editor group is focused
+    "tab.lastPinnedBorder": "#414339",
+    "widget.shadow": "#00000098",
+    "progressBar.background": "#75715E",
+    "badge.background": "#75715E",
+    "badge.foreground": "#f8f8f2",
+    "editorLineNumber.foreground": "#90908a",
+    "panelTitle.activeForeground": "#f8f8f2",
+    "panelTitle.activeBorder": "#75715E",
+    "panelTitle.inactiveForeground": "#75715E",
+    "panel.border": "#414339",
+    "settings.focusedRowBackground": "#4143395A",
+    "titleBar.activeBackground": "#1e1f1c",
+    "statusBar.background": "#414339",
+    "statusBar.noFolderBackground": "#414339",
+    "statusBar.debuggingBackground": "#75715E",
+    "statusBarItem.remoteBackground": "#AC6218",
+    "ports.iconRunningProcessForeground": "#ccccc7",
+    "activityBar.background": "#272822",
+    "activityBar.foreground": "#f8f8f2",
+    "sideBar.background": "#1e1f1c",
+    "sideBarSectionHeader.background": "#272822",
+    "menu.background": "#1e1f1c",
+    "menu.foreground": "#cccccc",
+    "pickerGroup.foreground": "#75715E",
+    "input.background": "#414339",
+    "inputOption.activeBorder": "#75715E",
+    "focusBorder": "#99947c",
+    "editorWidget.background": "#1e1f1c",
+    "debugToolBar.background": "#1e1f1c",
+    "diffEditor.insertedTextBackground": "#4b661680", // middle of #272822 and #a6e22e
+    "diffEditor.removedTextBackground": "#90274A70", // middle of #272822 and #f92672
+    "inputValidation.errorBackground": "#90274A", // middle of #272822 and #f92672
+    "inputValidation.errorBorder": "#f92672",
+    "inputValidation.warningBackground": "#848528", // middle of #272822 and #e2e22e
+    "inputValidation.warningBorder": "#e2e22e",
+    "inputValidation.infoBackground": "#546190", // middle of #272822 and #819aff
+    "inputValidation.infoBorder": "#819aff",
+    "editorHoverWidget.background": "#414339",
+    "editorHoverWidget.border": "#75715E",
+    "editorSuggestWidget.background": "#272822",
+    "editorSuggestWidget.border": "#75715E",
+    "editorGroup.border": "#34352f",
+    "peekView.border": "#75715E",
+    "peekViewEditor.background": "#272822",
+    "peekViewResult.background": "#1e1f1c",
+    "peekViewTitle.background": "#1e1f1c",
+    "peekViewResult.selectionBackground": "#414339",
+    "peekViewResult.matchHighlightBackground": "#75715E",
+    "peekViewEditor.matchHighlightBackground": "#75715E",
+    "terminal.ansiBlack": "#333333",
+    "terminal.ansiRed": "#C4265E", // the bright color with ~75% transparent on the background
+    "terminal.ansiGreen": "#86B42B",
+    "terminal.ansiYellow": "#B3B42B",
+    "terminal.ansiBlue": "#6A7EC8",
+    "terminal.ansiMagenta": "#8C6BC8",
+    "terminal.ansiCyan": "#56ADBC",
+    "terminal.ansiWhite": "#e3e3dd",
+    "terminal.ansiBrightBlack": "#666666",
+    "terminal.ansiBrightRed": "#f92672",
+    "terminal.ansiBrightGreen": "#A6E22E",
+    "terminal.ansiBrightYellow": "#e2e22e", // hue shifted #A6E22E
+    "terminal.ansiBrightBlue": "#819aff", // hue shifted #AE81FF
+    "terminal.ansiBrightMagenta": "#AE81FF",
+    "terminal.ansiBrightCyan": "#66D9EF",
+    "terminal.ansiBrightWhite": "#f8f8f2"
+  },
+  "tokenColors": [
+    {
+      "settings": {
+        "foreground": "#F8F8F2"
+      }
+    },
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "#F8F8F2"
+      }
+    },
+    {
+      "name": "Comment",
+      "scope": "comment",
+      "settings": {
+        "foreground": "#88846f"
+      }
+    },
+    {
+      "name": "String",
+      "scope": "string",
+      "settings": {
+        "foreground": "#E6DB74"
+      }
+    },
+    {
+      "name": "Template Definition",
+      "scope": ["punctuation.definition.template-expression", "punctuation.section.embedded"],
+      "settings": {
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "Reset JavaScript string interpolation expression",
+      "scope": ["meta.template.expression"],
+      "settings": {
+        "foreground": "#F8F8F2"
+      }
+    },
+    {
+      "name": "Number",
+      "scope": "constant.numeric",
+      "settings": {
+        "foreground": "#AE81FF"
+      }
+    },
+    {
+      "name": "Built-in constant",
+      "scope": "constant.language",
+      "settings": {
+        "foreground": "#AE81FF"
+      }
+    },
+    {
+      "name": "User-defined constant",
+      "scope": "constant.character, constant.other",
+      "settings": {
+        "foreground": "#AE81FF"
+      }
+    },
+    {
+      "name": "Variable",
+      "scope": "variable",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#F8F8F2"
+      }
+    },
+    {
+      "name": "Keyword",
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "Storage",
+      "scope": "storage",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "Storage type",
+      "scope": "storage.type",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#66D9EF"
+      }
+    },
+    {
+      "name": "Class name",
+      "scope": "entity.name.type, entity.name.class, entity.name.namespace, entity.name.scope-resolution",
+      "settings": {
+        "fontStyle": "underline",
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "Inherited class",
+      "scope": ["entity.other.inherited-class", "punctuation.separator.namespace.ruby"],
+      "settings": {
+        "fontStyle": "italic underline",
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "Function name",
+      "scope": "entity.name.function",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "Function argument",
+      "scope": "variable.parameter",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#FD971F"
+      }
+    },
+    {
+      "name": "Tag name",
+      "scope": "entity.name.tag",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "Tag attribute",
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "Library function",
+      "scope": "support.function",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#66D9EF"
+      }
+    },
+    {
+      "name": "Library constant",
+      "scope": "support.constant",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#66D9EF"
+      }
+    },
+    {
+      "name": "Library class/type",
+      "scope": "support.type, support.class",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#66D9EF"
+      }
+    },
+    {
+      "name": "Library variable",
+      "scope": "support.other.variable",
+      "settings": {
+        "fontStyle": ""
+      }
+    },
+    {
+      "name": "Invalid",
+      "scope": "invalid",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#F44747"
+      }
+    },
+    {
+      "name": "Invalid deprecated",
+      "scope": "invalid.deprecated",
+      "settings": {
+        "foreground": "#F44747"
+      }
+    },
+    {
+      "name": "JSON String",
+      "scope": "meta.structure.dictionary.json string.quoted.double.json",
+      "settings": {
+        "foreground": "#CFCFC2"
+      }
+    },
+    {
+      "name": "diff.header",
+      "scope": "meta.diff, meta.diff.header",
+      "settings": {
+        "foreground": "#75715E"
+      }
+    },
+    {
+      "name": "diff.deleted",
+      "scope": "markup.deleted",
+      "settings": {
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "diff.inserted",
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "diff.changed",
+      "scope": "markup.changed",
+      "settings": {
+        "foreground": "#E6DB74"
+      }
+    },
+    {
+      "scope": "constant.numeric.line-number.find-in-files - match",
+      "settings": {
+        "foreground": "#AE81FFA0"
+      }
+    },
+    {
+      "scope": "entity.name.filename.find-in-files",
+      "settings": {
+        "foreground": "#E6DB74"
+      }
+    },
+    {
+      "name": "Markup Quote",
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#F92672"
+      }
+    },
+    {
+      "name": "Markup Lists",
+      "scope": "markup.list",
+      "settings": {
+        "foreground": "#E6DB74"
+      }
+    },
+    {
+      "name": "Markup Styling",
+      "scope": "markup.bold, markup.italic",
+      "settings": {
+        "foreground": "#66D9EF"
+      }
+    },
+    {
+      "name": "Markup Inline",
+      "scope": "markup.inline.raw",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#FD971F"
+      }
+    },
+    {
+      "name": "Markup Headings",
+      "scope": "markup.heading",
+      "settings": {
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "name": "Markup Setext Header",
+      "scope": "markup.heading.setext",
+      "settings": {
+        "foreground": "#A6E22E",
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markup Headings",
+      "scope": "markup.heading.markdown",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markdown Quote",
+      "scope": "markup.quote.markdown",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#75715E"
+      }
+    },
+    {
+      "name": "Markdown Bold",
+      "scope": "markup.bold.markdown",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markdown Link Title/Description",
+      "scope": "string.other.link.title.markdown,string.other.link.description.markdown",
+      "settings": {
+        "foreground": "#AE81FF"
+      }
+    },
+    {
+      "name": "Markdown Underline Link/Image",
+      "scope": "markup.underline.link.markdown,markup.underline.link.image.markdown",
+      "settings": {
+        "foreground": "#E6DB74"
+      }
+    },
+    {
+      "name": "Markdown Emphasis",
+      "scope": "markup.italic.markdown",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "name": "Markdown Punctuation Definition Link",
+      "scope": "markup.list.unnumbered.markdown, markup.list.numbered.markdown",
+      "settings": {
+        "foreground": "#f8f8f2"
+      }
+    },
+    {
+      "name": "Markdown List Punctuation",
+      "scope": ["punctuation.definition.list.begin.markdown"],
+      "settings": {
+        "foreground": "#A6E22E"
+      }
+    },
+    {
+      "scope": "token.info-token",
+      "settings": {
+        "foreground": "#6796e6"
+      }
+    },
+    {
+      "scope": "token.warn-token",
+      "settings": {
+        "foreground": "#cd9731"
+      }
+    },
+    {
+      "scope": "token.error-token",
+      "settings": {
+        "foreground": "#f44747"
+      }
+    },
+    {
+      "scope": "token.debug-token",
+      "settings": {
+        "foreground": "#b267e6"
+      }
+    },
+    {
+      "name": "this.self",
+      "scope": "variable.language",
+      "settings": {
+        "foreground": "#FD971F"
+      }
+    }
+  ],
+  "semanticHighlighting": true
+}
@@ -0,0 +1,473 @@
+{
+  "name": "Solarized (light)",
+  "tokenColors": [
+    {
+      "settings": {
+        "foreground": "#657B83"
+      }
+    },
+    {
+      "scope": [
+        "meta.embedded",
+        "source.groovy.embedded",
+        "string meta.image.inline.markdown",
+        "variable.legacy.builtin.python"
+      ],
+      "settings": {
+        "foreground": "#657B83"
+      }
+    },
+    {
+      "name": "Comment",
+      "scope": "comment",
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#93A1A1"
+      }
+    },
+    {
+      "name": "String",
+      "scope": "string",
+      "settings": {
+        "foreground": "#2AA198"
+      }
+    },
+    {
+      "name": "Regexp",
+      "scope": "string.regexp",
+      "settings": {
+        "foreground": "#DC322F"
+      }
+    },
+    {
+      "name": "Number",
+      "scope": "constant.numeric",
+      "settings": {
+        "foreground": "#D33682"
+      }
+    },
+    {
+      "name": "Variable",
+      "scope": ["variable.language", "variable.other"],
+      "settings": {
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "Keyword",
+      "scope": "keyword",
+      "settings": {
+        "foreground": "#859900"
+      }
+    },
+    {
+      "name": "Storage",
+      "scope": "storage",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#586E75"
+      }
+    },
+    {
+      "name": "Class name",
+      "scope": [
+        "entity.name.class",
+        "entity.name.type",
+        "entity.name.namespace",
+        "entity.name.scope-resolution"
+      ],
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#CB4B16"
+      }
+    },
+    {
+      "name": "Function name",
+      "scope": "entity.name.function",
+      "settings": {
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "Variable start",
+      "scope": "punctuation.definition.variable",
+      "settings": {
+        "foreground": "#859900"
+      }
+    },
+    {
+      "name": "Embedded code markers",
+      "scope": ["punctuation.section.embedded.begin", "punctuation.section.embedded.end"],
+      "settings": {
+        "foreground": "#DC322F"
+      }
+    },
+    {
+      "name": "Built-in constant",
+      "scope": ["constant.language", "meta.preprocessor"],
+      "settings": {
+        "foreground": "#B58900"
+      }
+    },
+    {
+      "name": "Support.construct",
+      "scope": ["support.function.construct", "keyword.other.new"],
+      "settings": {
+        "foreground": "#CB4B16"
+      }
+    },
+    {
+      "name": "User-defined constant",
+      "scope": ["constant.character", "constant.other"],
+      "settings": {
+        "foreground": "#CB4B16"
+      }
+    },
+    {
+      "name": "Inherited class",
+      "scope": ["entity.other.inherited-class", "punctuation.separator.namespace.ruby"],
+      "settings": {
+        "foreground": "#6C71C4"
+      }
+    },
+    {
+      "name": "Function argument",
+      "scope": "variable.parameter",
+      "settings": {}
+    },
+    {
+      "name": "Tag name",
+      "scope": "entity.name.tag",
+      "settings": {
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "Tag start/end",
+      "scope": "punctuation.definition.tag",
+      "settings": {
+        "foreground": "#93A1A1"
+      }
+    },
+    {
+      "name": "Tag attribute",
+      "scope": "entity.other.attribute-name",
+      "settings": {
+        "foreground": "#93A1A1"
+      }
+    },
+    {
+      "name": "Library function",
+      "scope": "support.function",
+      "settings": {
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "Continuation",
+      "scope": "punctuation.separator.continuation",
+      "settings": {
+        "foreground": "#DC322F"
+      }
+    },
+    {
+      "name": "Library constant",
+      "scope": ["support.constant", "support.variable"],
+      "settings": {}
+    },
+    {
+      "name": "Library class/type",
+      "scope": ["support.type", "support.class"],
+      "settings": {
+        "foreground": "#859900"
+      }
+    },
+    {
+      "name": "Library Exception",
+      "scope": "support.type.exception",
+      "settings": {
+        "foreground": "#CB4B16"
+      }
+    },
+    {
+      "name": "Library variable",
+      "scope": "support.other.variable",
+      "settings": {}
+    },
+    {
+      "name": "Invalid",
+      "scope": "invalid",
+      "settings": {
+        "foreground": "#DC322F"
+      }
+    },
+    {
+      "name": "diff: header",
+      "scope": ["meta.diff", "meta.diff.header"],
+      "settings": {
+        "fontStyle": "italic",
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "diff: deleted",
+      "scope": "markup.deleted",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#DC322F"
+      }
+    },
+    {
+      "name": "diff: changed",
+      "scope": "markup.changed",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#CB4B16"
+      }
+    },
+    {
+      "name": "diff: inserted",
+      "scope": "markup.inserted",
+      "settings": {
+        "foreground": "#859900"
+      }
+    },
+    {
+      "name": "Markup Quote",
+      "scope": "markup.quote",
+      "settings": {
+        "foreground": "#859900"
+      }
+    },
+    {
+      "name": "Markup Lists",
+      "scope": "markup.list",
+      "settings": {
+        "foreground": "#B58900"
+      }
+    },
+    {
+      "name": "Markup Styling",
+      "scope": ["markup.bold", "markup.italic"],
+      "settings": {
+        "foreground": "#D33682"
+      }
+    },
+    {
+      "name": "Markup: Strong",
+      "scope": "markup.bold",
+      "settings": {
+        "fontStyle": "bold"
+      }
+    },
+    {
+      "name": "Markup: Emphasis",
+      "scope": "markup.italic",
+      "settings": {
+        "fontStyle": "italic"
+      }
+    },
+    {
+      "scope": "markup.strikethrough",
+      "settings": {
+        "fontStyle": "strikethrough"
+      }
+    },
+    {
+      "name": "Markup Inline",
+      "scope": "markup.inline.raw",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#2AA198"
+      }
+    },
+    {
+      "name": "Markup Headings",
+      "scope": "markup.heading",
+      "settings": {
+        "fontStyle": "bold",
+        "foreground": "#268BD2"
+      }
+    },
+    {
+      "name": "Markup Setext Header",
+      "scope": "markup.heading.setext",
+      "settings": {
+        "fontStyle": "",
+        "foreground": "#268BD2"
+      }
+    }
+  ],
+  "colors": {
+    // Base
+    // "foreground": "",
+    "focusBorder": "#b49471",
+    // "contrastActiveBorder": "",
+    // "contrastBorder": "",
+    // "widget.shadow": "",
+    "input.background": "#DDD6C1",
+    // "input.border": "",
+    "input.foreground": "#586E75",
+    "input.placeholderForeground": "#586E75AA",
+    "inputOption.activeBorder": "#D3AF86",
+    // "inputValidation.infoBorder": "",
+    // "inputValidation.infoBackground": "",
+    // "inputValidation.warningBackground": "",
+    // "inputValidation.warningBorder": "",
+    // "inputValidation.errorBackground": "",
+    // "inputValidation.errorBorder": "",
+    "badge.background": "#B58900AA",
+    "progressBar.background": "#B58900",
+    "dropdown.background": "#EEE8D5",
+    // "dropdown.foreground": "",
+    "dropdown.border": "#D3AF86",
+    "button.background": "#AC9D57",
+    // "button.foreground": "",
+    "selection.background": "#878b9180",
+    "list.activeSelectionBackground": "#DFCA88",
+    "list.activeSelectionForeground": "#6C6C6C",
+    "quickInputList.focusBackground": "#DFCA8866",
+    "list.hoverBackground": "#DFCA8844",
+    "list.inactiveSelectionBackground": "#D1CBB8",
+    "list.highlightForeground": "#B58900",
+    // "scrollbar.shadow": "",
+    // "scrollbarSlider.activeBackground": "",
+    // "scrollbarSlider.background": "",
+    // "scrollbarSlider.hoverBackground": "",
+    // Editor
+    "editor.background": "#FDF6E3",
+    "editor.foreground": "#657B83",
+    "notebook.cellEditorBackground": "#F7F0E0",
+    "editorWidget.background": "#EEE8D5",
+    "editorCursor.foreground": "#657B83",
+    "editorWhitespace.foreground": "#586E7580",
+    "editor.lineHighlightBackground": "#EEE8D5",
+    "editor.selectionBackground": "#EEE8D5",
+    "minimap.selectionHighlight": "#EEE8D5",
+    "editorIndentGuide.background": "#586E7580",
+    "editorIndentGuide.activeBackground": "#081E2580",
+    "editorHoverWidget.background": "#CCC4B0",
+    "editorLineNumber.activeForeground": "#567983",
+    // "editorHoverWidget.border": "",
+    // "editorLineNumber.foreground": "",
+    // "editorMarkerNavigation.background": "",
+    // "editorMarkerNavigationError.background": "",
+    // "editorMarkerNavigationWarning.background": "",
+    // "editorLink.activeForeground": "",
+    // "editor.findMatchBackground": "",
+    // "editor.findMatchHighlightBackground": "",
+    // "editor.findRangeHighlightBackground": "",
+    // "editor.hoverHighlightBackground": "",
+    // "editor.inactiveSelectionBackground": "",
+    // "editor.lineHighlightBorder": "",
+    // "editor.rangeHighlightBackground": "",
+    // "editor.selectionHighlightBackground": "",
+    // "editor.wordHighlightBackground": "",
+    // "editor.wordHighlightStrongBackground": "",
+    // Editor: Suggest Widget
+    // "editorSuggestWidget.background": "",
+    // "editorSuggestWidget.border": "",
+    // "editorSuggestWidget.foreground": "",
+    // "editorSuggestWidget.highlightForeground": "",
+    // "editorSuggestWidget.selectedBackground": "",
+    // Editor: Peek View
+    "peekViewResult.background": "#EEE8D5",
+    // "peekViewResult.lineForeground": "",
+    // "peekViewResult.selectionBackground": "",
+    // "peekViewResult.selectionForeground": "",
+    "peekViewEditor.background": "#FFFBF2",
+    "peekViewTitle.background": "#EEE8D5",
+    "peekView.border": "#B58900",
+    "peekViewEditor.matchHighlightBackground": "#7744AA40",
+    // "peekViewResult.fileForeground": "",
+    // "peekViewResult.matchHighlightBackground": "",
+    // "peekViewTitleLabel.foreground": "",
+    // "peekViewTitleDescription.foreground": "",
+    // Editor: Diff
+    // "diffEditor.insertedTextBackground": "",
+    // "diffEditor.insertedTextBorder": "",
+    // "diffEditor.removedTextBackground": "",
+    // "diffEditor.removedTextBorder": "",
+    // Workbench: Title
+    "titleBar.activeBackground": "#EEE8D5",
+    // "titleBar.activeForeground": "",
+    // "titleBar.inactiveBackground": "",
+    // "titleBar.inactiveForeground": "",
+    // Workbench: Editors
+    // "editorGroupHeader.noTabsBackground": "",
+    "editorGroup.border": "#DDD6C1",
+    "editorGroup.dropBackground": "#DDD6C1AA",
+    "editorGroupHeader.tabsBackground": "#D9D2C2",
+    // Workbench: Tabs
+    "tab.border": "#DDD6C1",
+    "tab.activeBackground": "#FDF6E3",
+    "tab.inactiveForeground": "#586E75",
+    "tab.inactiveBackground": "#D3CBB7",
+    "tab.activeModifiedBorder": "#cb4b16",
+    // "tab.activeBackground": "",
+    // "tab.activeForeground": "",
+    // "tab.inactiveForeground": "",
+    "tab.lastPinnedBorder": "#FDF6E3",
+    // Workbench: Activity Bar
+    "activityBar.background": "#DDD6C1",
+    "activityBar.foreground": "#584c27",
+    "activityBarBadge.background": "#B58900",
+    // "activityBarBadge.foreground": "",
+    // Workbench: Panel
+    // "panel.background": "",
+    "panel.border": "#DDD6C1",
+    // "panelTitle.activeBorder": "",
+    // "panelTitle.activeForeground": "",
+    // "panelTitle.inactiveForeground": "",
+    // Workbench: Side Bar
+    "sideBar.background": "#EEE8D5",
+    "sideBarTitle.foreground": "#586E75",
+    // "sideBarSectionHeader.background": "",
+    // Workbench: Status Bar
+    "statusBar.foreground": "#586E75",
+    "statusBar.background": "#EEE8D5",
+    "statusBar.debuggingBackground": "#EEE8D5",
+    "statusBar.noFolderBackground": "#EEE8D5",
+    // "statusBar.foreground": "",
+    "statusBarItem.remoteBackground": "#AC9D57",
+    "ports.iconRunningProcessForeground": "#2AA19899",
+    "statusBarItem.prominentBackground": "#DDD6C1",
+    "statusBarItem.prominentHoverBackground": "#DDD6C199",
+    // "statusBarItem.activeBackground": "",
+    // "statusBarItem.hoverBackground": "",
+    // Workbench: Debug
+    "debugToolBar.background": "#DDD6C1",
+    "debugExceptionWidget.background": "#DDD6C1",
+    "debugExceptionWidget.border": "#AB395B",
+    // Workbench: Quick Open
+    "pickerGroup.border": "#2AA19899",
+    "pickerGroup.foreground": "#2AA19899",
+    // Extensions
+    "extensionButton.prominentBackground": "#b58900",
+    "extensionButton.prominentHoverBackground": "#584c27aa",
+    // Workbench: Terminal
+    // Colors sourced from the official palette http://ethanschoonover.com/solarized
+    "terminal.ansiBlack": "#073642",
+    "terminal.ansiRed": "#dc322f",
+    "terminal.ansiGreen": "#859900",
+    "terminal.ansiYellow": "#b58900",
+    "terminal.ansiBlue": "#268bd2",
+    "terminal.ansiMagenta": "#d33682",
+    "terminal.ansiCyan": "#2aa198",
+    "terminal.ansiWhite": "#eee8d5",
+    "terminal.ansiBrightBlack": "#002b36",
+    "terminal.ansiBrightRed": "#cb4b16",
+    "terminal.ansiBrightGreen": "#586e75",
+    "terminal.ansiBrightYellow": "#657b83",
+    "terminal.ansiBrightBlue": "#839496",
+    "terminal.ansiBrightMagenta": "#6c71c4",
+    "terminal.ansiBrightCyan": "#93a1a1",
+    "terminal.ansiBrightWhite": "#fdf6e3",
+    // Set terminal background explicitly, otherwise selection becomes invisible when the
+    // terminal is in the side bar
+    "terminal.background": "#FDF6E3",
+    // Interactive Playground
+    "walkThrough.embeddedEditorBackground": "#00000014"
+  },
+  "semanticHighlighting": true
+}
@@ -0,0 +1,137 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>VS Code Theme Sequence</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #vscode-theme-sequence {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="vscode-theme-sequence"
+      data-composition-id="vscode-theme-sequence"
+      data-start="0"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-light-2026"
+        data-composition-id="vscode-light-2026"
+        data-composition-src="compositions/light-2026.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-dark-2026"
+        data-composition-id="vscode-dark-2026"
+        data-composition-src="compositions/dark-2026.html"
+        data-start="11"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-dark-plus"
+        data-composition-id="vscode-dark-plus"
+        data-composition-src="compositions/dark-plus.html"
+        data-start="22"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-dark-modern"
+        data-composition-id="vscode-dark-modern"
+        data-composition-src="compositions/dark-modern.html"
+        data-start="33"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-light-plus"
+        data-composition-id="vscode-light-plus"
+        data-composition-src="compositions/light-plus.html"
+        data-start="44"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-light-modern"
+        data-composition-id="vscode-light-modern"
+        data-composition-src="compositions/light-modern.html"
+        data-start="55"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-visual-studio-dark"
+        data-composition-id="vscode-visual-studio-dark"
+        data-composition-src="compositions/visual-studio-dark.html"
+        data-start="66"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-visual-studio-light"
+        data-composition-id="vscode-visual-studio-light"
+        data-composition-src="compositions/visual-studio-light.html"
+        data-start="77"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-high-contrast"
+        data-composition-id="vscode-high-contrast"
+        data-composition-src="compositions/high-contrast.html"
+        data-start="88"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-high-contrast-light"
+        data-composition-id="vscode-high-contrast-light"
+        data-composition-src="compositions/high-contrast-light.html"
+        data-start="99"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-solarized-light"
+        data-composition-id="vscode-solarized-light"
+        data-composition-src="compositions/solarized-light.html"
+        data-start="110"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <div
+        id="clip-monokai"
+        data-composition-id="vscode-monokai"
+        data-composition-src="compositions/monokai.html"
+        data-start="121"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["vscode-theme-sequence"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,115 @@
+{
+  "$schema": "https://hyperframes.heygen.com/schema/registry-item.json",
+  "name": "vscode-theme-visualizer",
+  "type": "hyperframes:example",
+  "title": "VS Code Theme Visualizer",
+  "description": "Faithful VS Code workbench recreation with per-character typing animation across 12 built-in themes. Activity bar, sidebar, tabs, editor, terminal, and status bar — all driven by official theme JSON files.",
+  "tags": ["code", "developer", "showcase", "vscode", "themes"],
+  "dimensions": {
+    "width": 1920,
+    "height": 1080
+  },
+  "duration": 132,
+  "files": [
+    {
+      "path": "index.html",
+      "target": "index.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/dark-2026.html",
+      "target": "compositions/dark-2026.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/dark-modern.html",
+      "target": "compositions/dark-modern.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/dark-plus.html",
+      "target": "compositions/dark-plus.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/high-contrast-light.html",
+      "target": "compositions/high-contrast-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/high-contrast.html",
+      "target": "compositions/high-contrast.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/light-2026.html",
+      "target": "compositions/light-2026.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/light-modern.html",
+      "target": "compositions/light-modern.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/light-plus.html",
+      "target": "compositions/light-plus.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/monokai.html",
+      "target": "compositions/monokai.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/solarized-light.html",
+      "target": "compositions/solarized-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/visual-studio-dark.html",
+      "target": "compositions/visual-studio-dark.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "compositions/visual-studio-light.html",
+      "target": "compositions/visual-studio-light.html",
+      "type": "hyperframes:composition"
+    },
+    {
+      "path": "assets/background.jpeg",
+      "target": "assets/background.jpeg",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-sequence.css",
+      "target": "assets/vscode-sequence.css",
+      "type": "hyperframes:style"
+    },
+    {
+      "path": "assets/vscode-sequence-runtime.js",
+      "target": "assets/vscode-sequence-runtime.js",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "assets/vscode-theme-registry.js",
+      "target": "assets/vscode-theme-registry.js",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "scripts/build-compositions.mjs",
+      "target": "scripts/build-compositions.mjs",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "scripts/build-theme-registry.mjs",
+      "target": "scripts/build-theme-registry.mjs",
+      "type": "hyperframes:asset"
+    },
+    {
+      "path": "DESIGN.md",
+      "target": "DESIGN.md",
+      "type": "hyperframes:asset"
+    }
+  ]
+}
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark 2026 Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-dark-2026 {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-dark-2026"
+      data-composition-id="render-dark-2026"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-dark-2026"
+        data-composition-id="vscode-dark-2026"
+        data-composition-src="../compositions/dark-2026.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-dark-2026"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark Modern Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-dark-modern {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-dark-modern"
+      data-composition-id="render-dark-modern"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-dark-modern"
+        data-composition-id="vscode-dark-modern"
+        data-composition-src="../compositions/dark-modern.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-dark-modern"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Dark+ Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-dark-plus {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-dark-plus"
+      data-composition-id="render-dark-plus"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-dark-plus"
+        data-composition-id="vscode-dark-plus"
+        data-composition-src="../compositions/dark-plus.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-dark-plus"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast Light Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-high-contrast-light {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-high-contrast-light"
+      data-composition-id="render-high-contrast-light"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-high-contrast-light"
+        data-composition-id="vscode-high-contrast-light"
+        data-composition-src="../compositions/high-contrast-light.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-high-contrast-light"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Default High Contrast Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-high-contrast {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-high-contrast"
+      data-composition-id="render-high-contrast"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-high-contrast"
+        data-composition-id="vscode-high-contrast"
+        data-composition-src="../compositions/high-contrast.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-high-contrast"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light 2026 Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-light-2026 {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-light-2026"
+      data-composition-id="render-light-2026"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-light-2026"
+        data-composition-id="vscode-light-2026"
+        data-composition-src="../compositions/light-2026.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-light-2026"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light Modern Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-light-modern {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-light-modern"
+      data-composition-id="render-light-modern"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-light-modern"
+        data-composition-id="vscode-light-modern"
+        data-composition-src="../compositions/light-modern.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-light-modern"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Light+ Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-light-plus {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-light-plus"
+      data-composition-id="render-light-plus"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-light-plus"
+        data-composition-id="vscode-light-plus"
+        data-composition-src="../compositions/light-plus.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-light-plus"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Monokai Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-monokai {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-monokai"
+      data-composition-id="render-monokai"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-monokai"
+        data-composition-id="vscode-monokai"
+        data-composition-src="../compositions/monokai.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-monokai"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Solarized Light Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-solarized-light {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-solarized-light"
+      data-composition-id="render-solarized-light"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-solarized-light"
+        data-composition-id="vscode-solarized-light"
+        data-composition-src="../compositions/solarized-light.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-solarized-light"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Dark Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-visual-studio-dark {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-visual-studio-dark"
+      data-composition-id="render-visual-studio-dark"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-visual-studio-dark"
+        data-composition-id="vscode-visual-studio-dark"
+        data-composition-src="../compositions/visual-studio-dark.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-visual-studio-dark"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>Visual Studio Light Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-visual-studio-light {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div
+      id="render-visual-studio-light"
+      data-composition-id="render-visual-studio-light"
+      data-start="0"
+      data-duration="11"
+      data-width="1920"
+      data-height="1080"
+    >
+      <div
+        id="clip-visual-studio-light"
+        data-composition-id="vscode-visual-studio-light"
+        data-composition-src="../compositions/visual-studio-light.html"
+        data-start="0"
+        data-duration="11"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-visual-studio-light"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
@@ -0,0 +1,932 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const repoRoot = path.resolve(projectRoot, "../../..");
+const assetsDir = path.join(projectRoot, "assets");
+const compositionsDir = path.join(projectRoot, "compositions");
+const renderEntriesDir = path.join(projectRoot, "render-entries");
+const blocksDir = path.join(repoRoot, "registry", "blocks");
+
+fs.mkdirSync(compositionsDir, { recursive: true });
+fs.mkdirSync(renderEntriesDir, { recursive: true });
+
+const registrySource = fs.readFileSync(path.join(assetsDir, "vscode-theme-registry.js"), "utf8");
+const registryBody = registrySource
+  .replace(/^.*window\.VSCODE_THEME_REGISTRY\s*=\s*/s, "")
+  .replace(/;\s*$/, "");
+const registry = new Function("return (" + registryBody + ")")();
+const clipDuration = 11;
+
+const css = String.raw`* {
+  box-sizing: border-box;
+  letter-spacing: 0;
+}
+
+html,
+body {
+  margin: 0;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  background: #000000;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.vscode-theme-scene {
+  --activity-bg: #181818;
+  --activity-fg: #d7d7d7;
+  --activity-muted: #868686;
+  --activity-active: #0078d4;
+  --sidebar-bg: #181818;
+  --sidebar-fg: #cccccc;
+  --sidebar-border: #2b2b2b;
+  --tab-bg: #181818;
+  --tab-active-bg: #1f1f1f;
+  --tab-active-fg: #ffffff;
+  --tab-inactive-fg: #9d9d9d;
+  --tab-border: #2b2b2b;
+  --editor-bg: #1f1f1f;
+  --editor-fg: #cccccc;
+  --editor-line: rgba(255, 255, 255, 0.04);
+  --gutter-fg: #6e7681;
+  --gutter-active-fg: #cccccc;
+  --panel-bg: #181818;
+  --panel-border: #2b2b2b;
+  --status-bg: #181818;
+  --status-fg: #cccccc;
+  --status-border: #2b2b2b;
+  --title-bg: #181818;
+  --title-fg: #cccccc;
+  --token-comment: #6a9955;
+  --token-keyword: #c586c0;
+  --token-function: #dcdcaa;
+  --token-string: #ce9178;
+  --token-number: #b5cea8;
+  --token-variable: #9cdcfe;
+  --token-parameter: #9cdcfe;
+  --token-operator: #d4d4d4;
+  --token-punctuation: #d4d4d4;
+  --token-class-name: #4ec9b0;
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),
+    url("../assets/background.jpeg") center / cover no-repeat;
+  color: var(--editor-fg);
+}
+
+.scene-content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  padding: 54px 70px 92px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  perspective: 2200px;
+  perspective-origin: 56% 52%;
+}
+
+.header {
+  display: flex;
+  align-items: end;
+  justify-content: space-between;
+  min-height: 66px;
+  text-shadow:
+    0 2px 12px rgba(0, 0, 0, 0.42),
+    0 14px 34px rgba(0, 0, 0, 0.32);
+}
+
+.kicker {
+  margin: 0 0 7px;
+  color: var(--gutter-fg);
+  font-size: 15px;
+  font-weight: 650;
+  text-transform: uppercase;
+  text-shadow:
+    0 2px 8px rgba(0, 0, 0, 0.48),
+    0 10px 26px rgba(0, 0, 0, 0.36);
+}
+
+.title {
+  margin: 0;
+  color: var(--editor-fg);
+  font-size: 44px;
+  line-height: 1;
+  font-weight: 760;
+}
+
+.source-note {
+  width: 510px;
+  color: var(--gutter-fg);
+  font-size: 16px;
+  line-height: 1.35;
+  text-align: right;
+  text-shadow:
+    0 2px 10px rgba(0, 0, 0, 0.46),
+    0 12px 30px rgba(0, 0, 0, 0.34);
+}
+
+.workbench {
+  height: 824px;
+  display: grid;
+  grid-template-columns: 54px 290px 1fr;
+  grid-template-rows: 36px 1fr 26px;
+  overflow: hidden;
+  border: 1px solid var(--sidebar-border);
+  border-radius: 8px;
+  background: var(--editor-bg);
+  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);
+  transform: translateZ(0);
+  transform-origin: 82% 50%;
+  transform-style: preserve-3d;
+  will-change: transform;
+}
+
+.titlebar {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: 120px 1fr 210px;
+  align-items: center;
+  background: var(--title-bg);
+  color: var(--title-fg);
+  border-bottom: 1px solid var(--tab-border);
+  font-size: 12px;
+}
+
+.traffic {
+  display: flex;
+  gap: 8px;
+  padding-left: 18px;
+}
+
+.traffic span {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+}
+
+.traffic span:nth-child(1) { background: #ff5f57; }
+.traffic span:nth-child(2) { background: #ffbd2e; }
+.traffic span:nth-child(3) { background: #28c840; }
+
+.window-title {
+  justify-self: center;
+  opacity: 0.84;
+}
+
+.command-center {
+  justify-self: end;
+  width: 176px;
+  height: 22px;
+  margin-right: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);
+  border-radius: 5px;
+  color: color-mix(in srgb, var(--title-fg), transparent 18%);
+}
+
+.activity {
+  grid-row: 2 / 3;
+  background: var(--activity-bg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 0;
+  gap: 18px;
+}
+
+.activity-icon {
+  width: 28px;
+  height: 28px;
+  color: var(--activity-muted);
+}
+
+.activity-icon.active {
+  color: var(--activity-fg);
+  border-left: 2px solid var(--activity-active);
+  padding-left: 4px;
+}
+
+.sidebar {
+  grid-row: 2 / 3;
+  background: var(--sidebar-bg);
+  color: var(--sidebar-fg);
+  border-right: 1px solid var(--sidebar-border);
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.sidebar-title {
+  height: 38px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  color: var(--sidebar-fg);
+  font-size: 11px;
+  text-transform: uppercase;
+}
+
+.section-title {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);
+  border-top: 1px solid var(--sidebar-border);
+  border-bottom: 1px solid var(--sidebar-border);
+  color: var(--sidebar-fg);
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.tree {
+  padding: 8px 0;
+  font-size: 13px;
+  line-height: 24px;
+}
+
+.tree-row {
+  height: 24px;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 10px 0 18px;
+  color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);
+  white-space: nowrap;
+}
+
+.tree-row.child {
+  padding-left: 34px;
+}
+
+.tree-row.selected {
+  background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);
+  color: var(--sidebar-fg);
+}
+
+.editor-area {
+  grid-row: 2 / 3;
+  display: grid;
+  grid-template-rows: 36px 30px 1fr 138px;
+  min-width: 0;
+  background: var(--editor-bg);
+}
+
+.tabs {
+  display: flex;
+  background: var(--tab-bg);
+  border-bottom: 1px solid var(--tab-border);
+}
+
+.tab {
+  width: 205px;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 13px;
+  border-right: 1px solid var(--tab-border);
+  background: var(--tab-active-bg);
+  color: var(--tab-active-fg);
+  border-top: 2px solid var(--activity-active);
+  font-size: 13px;
+}
+
+.tab.inactive {
+  background: var(--tab-bg);
+  color: var(--tab-inactive-fg);
+  border-top-color: transparent;
+}
+
+.breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 0 18px;
+  color: var(--gutter-fg);
+  border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);
+  font-size: 12px;
+}
+
+.editor {
+  position: relative;
+  overflow: hidden;
+  background: var(--editor-bg);
+  color: var(--editor-fg);
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 18px;
+  line-height: 1.52;
+}
+
+.active-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  height: 28px;
+  background: var(--editor-line);
+  will-change: transform;
+}
+
+.code {
+  position: relative;
+  padding: 20px 36px 18px 0;
+}
+
+.line {
+  height: 28px;
+  display: grid;
+  grid-template-columns: 72px 1fr;
+  align-items: center;
+}
+
+.line-number {
+  padding-right: 18px;
+  color: var(--gutter-fg);
+  text-align: right;
+  user-select: none;
+}
+
+.line.is-active .line-number {
+  color: var(--gutter-active-fg);
+}
+
+.line-code {
+  white-space: pre;
+}
+
+.char {
+  opacity: 0;
+}
+
+.tok-comment { color: var(--token-comment); }
+.tok-keyword { color: var(--token-keyword); }
+.tok-function { color: var(--token-function); }
+.tok-string { color: var(--token-string); }
+.tok-number { color: var(--token-number); }
+.tok-variable { color: var(--token-variable); }
+.tok-parameter { color: var(--token-parameter); }
+.tok-operator { color: var(--token-operator); }
+.tok-punctuation { color: var(--token-punctuation); }
+.tok-class-name { color: var(--token-class-name); }
+
+.caret {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 3;
+  display: block;
+  width: 2px;
+  height: 22px;
+  background: var(--editor-fg);
+  pointer-events: none;
+  will-change: transform, opacity;
+}
+
+.terminal {
+  display: grid;
+  grid-template-rows: 32px 1fr;
+  background: var(--panel-bg);
+  border-top: 1px solid var(--panel-border);
+  color: var(--editor-fg);
+  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
+  font-size: 14px;
+}
+
+.panel-tabs {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  padding: 0 18px;
+  border-bottom: 1px solid var(--panel-border);
+  color: var(--gutter-fg);
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.panel-tabs .active {
+  color: var(--editor-fg);
+  border-bottom: 1px solid var(--activity-active);
+  height: 32px;
+  display: flex;
+  align-items: center;
+}
+
+.terminal-body {
+  padding: 12px 20px;
+  color: var(--editor-fg);
+  line-height: 1.8;
+}
+
+.prompt {
+  color: var(--token-function);
+}
+
+.statusbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: var(--status-bg);
+  color: var(--status-fg);
+  border-top: 1px solid var(--status-border);
+  font-size: 12px;
+}
+
+.status-left,
+.status-right {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 0 12px;
+}
+
+.remote {
+  align-self: stretch;
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  margin-left: -12px;
+  background: var(--status-remote-bg, var(--activity-active));
+  color: var(--status-remote-fg, #ffffff);
+}
+
+svg {
+  display: block;
+}
+`;
+
+const runtime = String.raw`(() => {
+  const codeLines = [
+    [{ text: "# A small functional toolkit", token: "comment" }],
+    [{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "pluck_deep", token: "function" }, { text: "(", token: "punctuation" }, { text: "key", token: "parameter" }, { text: "):", token: "punctuation" }],
+    [{ text: "    ", token: "plain" }, { text: "return", token: "keyword" }, { text: " ", token: "plain" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "obj", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "reduce", token: "function" }, { text: "(", token: "punctuation" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "k", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "acc", token: "variable" }, { text: "[", token: "punctuation" }, { text: "k", token: "variable" }, { text: "]", token: "punctuation" }, { text: ", ", token: "punctuation" }, { text: "key", token: "variable" }, { text: ".split", token: "function" }, { text: "(", token: "punctuation" }, { text: "'.'", token: "string" }, { text: "), ", token: "punctuation" }, { text: "obj", token: "variable" }, { text: ")", token: "punctuation" }],
+    [],
+    [{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "compose", token: "function" }, { text: "(", token: "punctuation" }, { text: "*", token: "operator" }, { text: "fns", token: "parameter" }, { text: "):", token: "punctuation" }],
+    [{ text: "    ", token: "plain" }, { text: "return", token: "keyword" }, { text: " ", token: "plain" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "res", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "reduce", token: "function" }, { text: "(", token: "punctuation" }, { text: "lambda", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "fn", token: "parameter" }, { text: ": ", token: "punctuation" }, { text: "fn", token: "function" }, { text: "(", token: "punctuation" }, { text: "acc", token: "variable" }, { text: "), ", token: "punctuation" }, { text: "fns", token: "variable" }, { text: ", ", token: "punctuation" }, { text: "res", token: "variable" }, { text: ")", token: "punctuation" }],
+    [],
+    [{ text: "def", token: "keyword" }, { text: " ", token: "plain" }, { text: "unfold", token: "function" }, { text: "(", token: "punctuation" }, { text: "f", token: "parameter" }, { text: ", ", token: "punctuation" }, { text: "seed", token: "parameter" }, { text: "):", token: "punctuation" }],
+    [{ text: "    ", token: "plain" }, { text: "\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"", token: "string" }],
+    [{ text: "    acc", token: "variable" }, { text: " = ", token: "operator" }, { text: "[]", token: "punctuation" }],
+    [{ text: "    while", token: "keyword" }, { text: " ", token: "plain" }, { text: "True", token: "className" }, { text: ":", token: "punctuation" }],
+    [{ text: "        result", token: "variable" }, { text: " = ", token: "operator" }, { text: "f", token: "function" }, { text: "(", token: "punctuation" }, { text: "seed", token: "variable" }, { text: ")", token: "punctuation" }],
+    [{ text: "        if", token: "keyword" }, { text: " ", token: "plain" }, { text: "result", token: "variable" }, { text: " is ", token: "keyword" }, { text: "None", token: "className" }, { text: ":", token: "punctuation" }],
+    [{ text: "            return", token: "keyword" }, { text: " ", token: "plain" }, { text: "acc", token: "variable" }],
+    [{ text: "        acc", token: "variable" }, { text: ".append", token: "function" }, { text: "(", token: "punctuation" }, { text: "result", token: "variable" }, { text: "[", token: "punctuation" }, { text: "0", token: "number" }, { text: "])", token: "punctuation" }],
+    [{ text: "        seed", token: "variable" }, { text: " = ", token: "operator" }, { text: "result", token: "variable" }, { text: "[", token: "punctuation" }, { text: "1", token: "number" }, { text: "]", token: "punctuation" }],
+    [],
+  ];
+
+  const fallback = {
+    "activityBar.background": "#181818",
+    "activityBar.foreground": "#d7d7d7",
+    "activityBar.inactiveForeground": "#868686",
+    "activityBar.activeBorder": "#0078d4",
+    "sideBar.background": "#181818",
+    "sideBar.foreground": "#cccccc",
+    "sideBar.border": "#2b2b2b",
+    "tab.activeBackground": "#1f1f1f",
+    "tab.activeForeground": "#ffffff",
+    "tab.inactiveBackground": "#181818",
+    "tab.inactiveForeground": "#9d9d9d",
+    "tab.border": "#2b2b2b",
+    "editor.background": "#1f1f1f",
+    "editor.foreground": "#cccccc",
+    "editor.lineHighlightBackground": "#ffffff0a",
+    "editorLineNumber.foreground": "#6e7681",
+    "editorLineNumber.activeForeground": "#cccccc",
+    "panel.background": "#181818",
+    "panel.border": "#2b2b2b",
+    "statusBar.background": "#181818",
+    "statusBar.foreground": "#cccccc",
+    "statusBar.border": "#2b2b2b",
+    "titleBar.activeBackground": "#181818",
+    "titleBar.activeForeground": "#cccccc",
+  };
+
+  function color(theme, key) {
+    return theme.colors[key] || fallback[key] || theme.colors.foreground || "#cccccc";
+  }
+
+  function solarizedGrey(theme) {
+    return theme.colors["tab.inactiveForeground"] || theme.colors["editor.foreground"] || "#586E75";
+  }
+
+  function setVar(root, name, value) {
+    root.style.setProperty(name, value);
+  }
+
+  function applyTheme(root, theme) {
+    const solarizedUiGrey = theme.id === "solarized-light" ? solarizedGrey(theme) : null;
+    setVar(root, "--activity-bg", color(theme, "activityBar.background"));
+    setVar(root, "--activity-fg", solarizedUiGrey || color(theme, "activityBar.foreground"));
+    setVar(root, "--activity-muted", solarizedUiGrey || color(theme, "activityBar.inactiveForeground"));
+    setVar(root, "--activity-active", color(theme, "activityBar.activeBorder"));
+    setVar(root, "--sidebar-bg", color(theme, "sideBar.background"));
+    setVar(root, "--sidebar-fg", solarizedUiGrey || color(theme, "sideBar.foreground"));
+    setVar(root, "--sidebar-border", color(theme, "sideBar.border"));
+    setVar(root, "--tab-bg", color(theme, "tab.inactiveBackground"));
+    setVar(root, "--tab-active-bg", color(theme, "tab.activeBackground"));
+    setVar(root, "--tab-active-fg", solarizedUiGrey || color(theme, "tab.activeForeground"));
+    setVar(root, "--tab-inactive-fg", solarizedUiGrey || color(theme, "tab.inactiveForeground"));
+    setVar(root, "--tab-border", color(theme, "tab.border"));
+    setVar(root, "--editor-bg", color(theme, "editor.background"));
+    setVar(root, "--editor-fg", color(theme, "editor.foreground"));
+    setVar(root, "--editor-line", color(theme, "editor.lineHighlightBackground"));
+    setVar(root, "--gutter-fg", color(theme, "editorLineNumber.foreground"));
+    setVar(root, "--gutter-active-fg", color(theme, "editorLineNumber.activeForeground"));
+    setVar(root, "--panel-bg", color(theme, "panel.background"));
+    setVar(root, "--panel-border", color(theme, "panel.border"));
+    setVar(root, "--status-bg", color(theme, "statusBar.background"));
+    setVar(root, "--status-fg", color(theme, "statusBar.foreground"));
+    setVar(root, "--status-border", color(theme, "statusBar.border"));
+    setVar(root, "--status-remote-bg", color(theme, "statusBarItem.remoteBackground"));
+    setVar(root, "--status-remote-fg", solarizedUiGrey || color(theme, "statusBarItem.remoteForeground"));
+    setVar(root, "--title-bg", color(theme, "titleBar.activeBackground"));
+    setVar(root, "--title-fg", solarizedUiGrey || color(theme, "titleBar.activeForeground"));
+    setVar(root, "--token-comment", theme.tokens.comment);
+    setVar(root, "--token-keyword", theme.tokens.keyword);
+    setVar(root, "--token-function", theme.tokens.function);
+    setVar(root, "--token-string", theme.tokens.string);
+    setVar(root, "--token-number", theme.tokens.number);
+    setVar(root, "--token-variable", theme.tokens.variable);
+    setVar(root, "--token-parameter", theme.tokens.parameter);
+    setVar(root, "--token-operator", theme.tokens.operator);
+    setVar(root, "--token-punctuation", theme.tokens.punctuation);
+    setVar(root, "--token-class-name", theme.tokens.className);
+  }
+
+  function renderCode(root) {
+    const code = root.querySelector(".code");
+    codeLines.forEach((segments, index) => {
+      const line = document.createElement("div");
+      line.className = "line";
+      line.dataset.lineIndex = String(index);
+
+      const lineNumber = document.createElement("span");
+      lineNumber.className = "line-number";
+      lineNumber.textContent = String(index + 1);
+      line.appendChild(lineNumber);
+
+      const lineCode = document.createElement("span");
+      lineCode.className = "line-code";
+      segments.forEach((segment) => {
+        [...segment.text].forEach((char) => {
+          const span = document.createElement("span");
+          span.className = segment.token === "plain" ? "char" : "char tok-" + segment.token.replace(/[A-Z]/g, (match) => "-" + match.toLowerCase());
+          span.dataset.lineIndex = String(index);
+          span.textContent = char;
+          lineCode.appendChild(span);
+        });
+      });
+      line.appendChild(lineCode);
+      code.appendChild(line);
+    });
+
+    const caret = document.createElement("span");
+    caret.className = "caret";
+    root.querySelector(".editor").appendChild(caret);
+  }
+
+  function caretPointForElement(editor, el) {
+    const editorBox = editor.getBoundingClientRect();
+    const charBox = el.getBoundingClientRect();
+    return {
+      x: charBox.right - editorBox.left + 2,
+      y: charBox.top - editorBox.top + 3,
+    };
+  }
+
+  function caretPointForLineStart(editor, line) {
+    const editorBox = editor.getBoundingClientRect();
+    const lineBox = line.getBoundingClientRect();
+    const codeBox = line.querySelector(".line-code").getBoundingClientRect();
+    return {
+      x: codeBox.left - editorBox.left,
+      y: lineBox.top - editorBox.top + 3,
+    };
+  }
+
+  function lineHighlightY(editor, line) {
+    const editorBox = editor.getBoundingClientRect();
+    const lineBox = line.getBoundingClientRect();
+    return lineBox.top - editorBox.top;
+  }
+
+  function buildTimeline(root, compositionId) {
+    const tl = gsap.timeline({ paused: true });
+    const editor = root.querySelector(".editor");
+    const caret = root.querySelector(".caret");
+    const activeLine = root.querySelector(".active-line");
+    const lineEls = gsap.utils.toArray(root.querySelectorAll(".line"));
+    const lineStartTimes = [];
+    const charSchedule = [];
+    let cursorTime = 0.95;
+
+    lineEls.forEach((line, lineIndex) => {
+      const lineChars = gsap.utils.toArray(line.querySelectorAll(".char"));
+      lineStartTimes[lineIndex] = cursorTime;
+      lineChars.forEach((char, charIndex) => {
+        charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });
+      });
+      cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;
+    });
+
+    gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });
+    gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));
+
+    tl.from(root.querySelector(".header"), { y: 24, opacity: 0, duration: 0.45, ease: "power3.out" }, 0);
+    tl.from(root.querySelector(".workbench"), { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: "power3.out" }, 0.1);
+    tl.from(activeLine, { opacity: 0, duration: 0.22, ease: "power2.out" }, 0.74);
+    lineStartTimes.forEach((time, lineIndex) => {
+      const line = lineEls[lineIndex];
+      tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);
+      tl.set(caret, caretPointForLineStart(editor, line), time);
+      tl.call(() => {
+        lineEls.forEach((item) => item.classList.toggle("is-active", item === line));
+      }, [], time);
+    });
+    charSchedule.forEach(({ char, time }) => {
+      tl.set(char, { opacity: 1 }, time);
+      tl.set(caret, caretPointForElement(editor, char), time + 0.002);
+    });
+    tl.to(root.querySelector(".caret"), { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: "steps(1)" }, 0.95);
+    tl.from(root.querySelector(".terminal"), { y: 140, opacity: 0, duration: 0.56, ease: "power3.out" }, 7.55);
+    tl.from(root.querySelector(".terminal-body").children, { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: "power2.out" }, 8.05);
+    tl.to(root.querySelector(".workbench"), { rotateY: -10.5, z: 74, duration: 0.72, ease: "power2.inOut" }, 9.35);
+    tl.to(root.querySelector(".workbench"), { rotateY: 0, z: 0, duration: 0.62, ease: "power2.inOut" }, 10.08);
+
+    window.__timelines = window.__timelines || {};
+    window.__timelines[compositionId] = tl;
+
+    const previewTime = new URLSearchParams(window.location.search).get("t");
+    if (previewTime !== null) {
+      tl.time(Number(previewTime));
+    }
+  }
+
+  window.createVSCodeThemeComposition = (compositionId, themeOrId) => {
+    const root =
+      document.querySelector('[data-composition-id="' + compositionId + '"] .vscode-theme-scene') ||
+      document.querySelector('.vscode-theme-scene[data-composition-id="' + compositionId + '"]') ||
+      document.querySelector('[data-composition-id="' + compositionId + '"]');
+    const theme = typeof themeOrId === "string"
+      ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)
+      : themeOrId;
+    if (!root || !theme) return;
+    root.querySelector(".theme-label").textContent = theme.label;
+    root.querySelector(".theme-source").textContent = theme.sourceFile;
+    applyTheme(root, theme);
+    renderCode(root);
+    buildTimeline(root, compositionId);
+  };
+})();
+`;
+
+function compositionMarkup(compositionId, theme) {
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>${theme.label} VS Code Theme Composition</title>
+  </head>
+  <body>
+    <template id="${compositionId}-template">
+      <div class="vscode-theme-scene" data-composition-id="${compositionId}" data-width="1920" data-height="1080">
+        <main class="scene-content">
+          <section class="header">
+            <div>
+              <p class="kicker">Official VS Code built-in theme</p>
+              <h1 class="title"><span class="theme-label">${theme.label}</span></h1>
+            </div>
+            <p class="source-note">
+              Typing \`functional_toolkit.py\` with workbench colors from
+              <span class="theme-source">${theme.sourceFile}</span>.
+            </p>
+          </section>
+
+          ${workbenchMarkup()}
+        </main>
+        <style>
+${css}
+        </style>
+        <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+        <script>
+${runtime}
+        </script>
+        <script>
+          window.__timelines = window.__timelines || {};
+          window.__timelines["${compositionId}"] = window.__timelines["${compositionId}"] || gsap.timeline({ paused: true });
+          window.createVSCodeThemeComposition("${compositionId}", ${JSON.stringify(theme)});
+        </script>
+      </div>
+    </template>
+  </body>
+</html>
+`;
+}
+
+function workbenchMarkup() {
+  return `<section class="workbench">
+  <div class="titlebar">
+    <div class="traffic"><span></span><span></span><span></span></div>
+    <div class="window-title">functional-toolkit - Visual Studio Code</div>
+    <div class="command-center">Search</div>
+  </div>
+
+  <aside class="activity" aria-label="Activity bar">
+    <svg class="activity-icon active" viewBox="0 0 24 24" aria-hidden="true"><path fill="currentColor" d="M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z" /></svg>
+    <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z" /></svg>
+    <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="M8 18 3 12l5-6m8 12 5-6-5-6" /></svg>
+    <svg class="activity-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="none" stroke="currentColor" stroke-width="2" d="M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6" /></svg>
+  </aside>
+
+  <aside class="sidebar">
+    <div class="sidebar-title">Explorer</div>
+    <div class="section-title">⌄ Functional Toolkit</div>
+    <div class="tree">
+      <div class="tree-row">⌄ src</div>
+      <div class="tree-row child selected">◇ functional_toolkit.py</div>
+      <div class="tree-row child">◇ test_toolkit.py</div>
+      <div class="tree-row">◇ pyproject.toml</div>
+      <div class="tree-row">◇ README.md</div>
+    </div>
+  </aside>
+
+  <section class="editor-area">
+    <div class="tabs">
+      <div class="tab">◇ functional_toolkit.py</div>
+      <div class="tab inactive">README.md</div>
+    </div>
+    <div class="breadcrumbs">functional-toolkit › src › functional_toolkit.py</div>
+    <div class="editor">
+      <div class="active-line"></div>
+      <div class="code"></div>
+    </div>
+    <div class="terminal">
+      <div class="panel-tabs"><span class="active">Terminal</span><span>Problems</span><span>Output</span></div>
+      <div class="terminal-body">
+        <div><span class="prompt">functional-toolkit %</span> python -m pytest</div>
+        <div>collected 3 items</div>
+        <div>tests/test_toolkit.py ... <span class="tok-comment">passed</span></div>
+      </div>
+    </div>
+  </section>
+
+  <footer class="statusbar">
+    <div class="status-left">
+      <span class="remote">main</span>
+      <span>0 errors</span>
+      <span>0 warnings</span>
+    </div>
+    <div class="status-right">
+      <span>Ln 17, Col 1</span>
+      <span>Spaces: 4</span>
+      <span>UTF-8</span>
+      <span>Python 3.12</span>
+    </div>
+  </footer>
+</section>`;
+}
+
+function rootIndexMarkup() {
+  const clips = registry
+    .map((theme, index) => {
+      const compositionId = `vscode-${theme.id}`;
+      return `      <div
+        id="clip-${theme.id}"
+        data-composition-id="${compositionId}"
+        data-composition-src="compositions/${theme.id}.html"
+        data-start="${index * clipDuration}"
+        data-duration="${clipDuration}"
+        data-track-index="1"
+      ></div>`;
+    })
+    .join("\n");
+
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>VS Code Theme Sequence</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #vscode-theme-sequence {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="vscode-theme-sequence" data-composition-id="vscode-theme-sequence" data-start="0" data-width="1920" data-height="1080">
+${clips}
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["vscode-theme-sequence"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
+`;
+}
+
+function renderEntryMarkup(theme) {
+  const compositionId = `vscode-${theme.id}`;
+  return `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=1920, height=1080" />
+    <title>${theme.label} Render Entry</title>
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+
+      #render-${theme.id} {
+        position: relative;
+        width: 1920px;
+        height: 1080px;
+        overflow: hidden;
+        background: #000000;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="render-${theme.id}" data-composition-id="render-${theme.id}" data-start="0" data-duration="${clipDuration}" data-width="1920" data-height="1080">
+      <div
+        id="clip-${theme.id}"
+        data-composition-id="${compositionId}"
+        data-composition-src="../compositions/${theme.id}.html"
+        data-start="0"
+        data-duration="${clipDuration}"
+        data-track-index="1"
+      ></div>
+      <script>
+        window.__timelines = window.__timelines || {};
+        window.__timelines["render-${theme.id}"] = gsap.timeline({ paused: true });
+      </script>
+    </div>
+  </body>
+</html>
+`;
+}
+
+fs.writeFileSync(path.join(assetsDir, "vscode-sequence.css"), css);
+fs.writeFileSync(path.join(assetsDir, "vscode-sequence-runtime.js"), runtime);
+
+for (const theme of registry) {
+  const compositionId = `vscode-${theme.id}`;
+  fs.writeFileSync(
+    path.join(compositionsDir, `${theme.id}.html`),
+    compositionMarkup(compositionId, theme),
+  );
+  fs.writeFileSync(path.join(renderEntriesDir, `${theme.id}.html`), renderEntryMarkup(theme));
+
+  const blockName = `code-snippet-${theme.id}`;
+  const blockDir = path.join(blocksDir, blockName);
+  fs.mkdirSync(blockDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(blockDir, `${blockName}.html`),
+    compositionMarkup(compositionId, theme),
+  );
+}
+
+fs.writeFileSync(path.join(projectRoot, "index.html"), rootIndexMarkup());
+
+console.log(
+  `Wrote ${registry.length} themed compositions, render entries, block HTMLs, and root sequence`,
+);
@@ -0,0 +1,237 @@
+import fs from "node:fs";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const projectRoot = path.resolve(__dirname, "..");
+const themeDir = path.join(projectRoot, "assets", "vscode-themes");
+const outFile = path.join(projectRoot, "assets", "vscode-theme-registry.js");
+
+const themeEntries = [
+  ["light-2026", "Light 2026", "2026-light.json"],
+  ["dark-2026", "Dark 2026", "2026-dark.json"],
+  ["dark-plus", "Dark+", "dark_plus.json"],
+  ["dark-modern", "Dark Modern", "dark_modern.json"],
+  ["light-plus", "Light+", "light_plus.json"],
+  ["light-modern", "Light Modern", "light_modern.json"],
+  ["visual-studio-dark", "Visual Studio Dark", "dark_vs.json"],
+  ["visual-studio-light", "Visual Studio Light", "light_vs.json"],
+  ["high-contrast", "Default High Contrast", "hc_black.json"],
+  ["high-contrast-light", "Default High Contrast Light", "hc_light.json"],
+  ["solarized-light", "Solarized Light", "solarized-light-color-theme.json"],
+  ["monokai", "Monokai", "monokai-color-theme.json"],
+];
+
+const workbenchKeys = [
+  "activityBar.activeBorder",
+  "activityBar.background",
+  "activityBar.border",
+  "activityBar.foreground",
+  "activityBar.inactiveForeground",
+  "editor.background",
+  "editor.foreground",
+  "editor.lineHighlightBackground",
+  "editor.selectionBackground",
+  "editorGroup.border",
+  "editorGroupHeader.tabsBackground",
+  "editorGroupHeader.tabsBorder",
+  "editorLineNumber.activeForeground",
+  "editorLineNumber.foreground",
+  "foreground",
+  "icon.foreground",
+  "panel.background",
+  "panel.border",
+  "sideBar.background",
+  "sideBar.border",
+  "sideBar.foreground",
+  "sideBarSectionHeader.background",
+  "sideBarSectionHeader.border",
+  "sideBarSectionHeader.foreground",
+  "sideBarTitle.foreground",
+  "statusBar.background",
+  "statusBar.border",
+  "statusBar.foreground",
+  "statusBarItem.remoteBackground",
+  "statusBarItem.remoteForeground",
+  "tab.activeBackground",
+  "tab.activeBorder",
+  "tab.activeBorderTop",
+  "tab.activeForeground",
+  "tab.border",
+  "tab.inactiveBackground",
+  "tab.inactiveForeground",
+  "terminal.background",
+  "terminal.foreground",
+  "terminalCursor.foreground",
+  "titleBar.activeBackground",
+  "titleBar.activeForeground",
+];
+
+const tokenScopes = {
+  comment: ["comment", "punctuation.definition.comment"],
+  keyword: ["keyword", "storage", "storage.type"],
+  function: ["entity.name.function", "support.function"],
+  string: ["string", "punctuation.definition.string"],
+  number: ["constant.numeric"],
+  variable: ["variable", "variable.other"],
+  parameter: ["variable.parameter", "meta.function.parameters"],
+  operator: ["keyword.operator"],
+  punctuation: ["punctuation", "meta.brace"],
+  className: ["entity.name.type", "support.class", "support.type"],
+};
+
+const fallbackColors = {
+  comment: "#6A9955",
+  keyword: "#C586C0",
+  function: "#DCDCAA",
+  string: "#CE9178",
+  number: "#B5CEA8",
+  variable: "#9CDCFE",
+  parameter: "#9CDCFE",
+  operator: "#D4D4D4",
+  punctuation: "#D4D4D4",
+  className: "#4EC9B0",
+};
+
+function stripJsonComments(source) {
+  let output = "";
+  let inString = false;
+  let escaped = false;
+  for (let i = 0; i < source.length; i += 1) {
+    const char = source[i];
+    const next = source[i + 1];
+    if (inString) {
+      output += char;
+      escaped = char === "\\" && !escaped;
+      if (char === '"' && !escaped) inString = false;
+      if (char !== "\\") escaped = false;
+      continue;
+    }
+    if (char === '"') {
+      inString = true;
+      output += char;
+      continue;
+    }
+    if (char === "/" && next === "/") {
+      while (i < source.length && source[i] !== "\n") i += 1;
+      output += "\n";
+      continue;
+    }
+    if (char === "/" && next === "*") {
+      i += 2;
+      while (i < source.length && !(source[i] === "*" && source[i + 1] === "/")) i += 1;
+      i += 1;
+      continue;
+    }
+    output += char;
+  }
+  return output;
+}
+
+function stripTrailingCommas(source) {
+  let output = "";
+  let inString = false;
+  let escaped = false;
+  for (let i = 0; i < source.length; i += 1) {
+    const char = source[i];
+    if (inString) {
+      output += char;
+      escaped = char === "\\" && !escaped;
+      if (char === '"' && !escaped) inString = false;
+      if (char !== "\\") escaped = false;
+      continue;
+    }
+    if (char === '"') {
+      inString = true;
+      output += char;
+      continue;
+    }
+    if (char === ",") {
+      let j = i + 1;
+      while (/\s/.test(source[j])) j += 1;
+      if (source[j] === "}" || source[j] === "]") continue;
+    }
+    output += char;
+  }
+  return output;
+}
+
+function readTheme(fileName, seen = new Set()) {
+  const filePath = path.join(themeDir, fileName);
+  if (seen.has(filePath)) throw new Error(`Circular theme include: ${fileName}`);
+  seen.add(filePath);
+
+  const raw = fs.readFileSync(filePath, "utf8");
+  const theme = JSON.parse(stripTrailingCommas(stripJsonComments(raw)));
+  let parent = { colors: {}, tokenColors: [], semanticTokenColors: {} };
+
+  if (theme.include) {
+    parent = readTheme(path.basename(theme.include), seen);
+  }
+
+  return {
+    name: theme.name || parent.name,
+    type: theme.type || parent.type,
+    colors: { ...parent.colors, ...(theme.colors || {}) },
+    tokenColors: [...(parent.tokenColors || []), ...(theme.tokenColors || [])],
+    semanticTokenColors: {
+      ...(parent.semanticTokenColors || {}),
+      ...(theme.semanticTokenColors || {}),
+    },
+  };
+}
+
+function scopeList(scope) {
+  if (!scope) return [];
+  if (Array.isArray(scope)) return scope;
+  return String(scope)
+    .split(",")
+    .map((item) => item.trim());
+}
+
+function scopeMatches(actual, wanted) {
+  return actual === wanted || actual.startsWith(`${wanted}.`) || wanted.startsWith(`${actual}.`);
+}
+
+function findTokenColor(theme, wantedScopes) {
+  for (let i = theme.tokenColors.length - 1; i >= 0; i -= 1) {
+    const tokenColor = theme.tokenColors[i];
+    const foreground = tokenColor.settings?.foreground;
+    if (!foreground) continue;
+    const scopes = scopeList(tokenColor.scope);
+    if (scopes.some((scope) => wantedScopes.some((wanted) => scopeMatches(scope, wanted)))) {
+      return foreground;
+    }
+  }
+  return null;
+}
+
+function pickColors(colors) {
+  const picked = {};
+  for (const key of workbenchKeys) {
+    if (colors[key]) picked[key] = colors[key];
+  }
+  return picked;
+}
+
+const registry = themeEntries.map(([id, label, file]) => {
+  const theme = readTheme(file);
+  const tokens = {};
+  for (const [tokenName, scopes] of Object.entries(tokenScopes)) {
+    tokens[tokenName] = findTokenColor(theme, scopes) || fallbackColors[tokenName];
+  }
+
+  return {
+    id,
+    label,
+    sourceFile: file,
+    uiTheme: file.includes("light") || file.includes("2026-light") ? "vs" : "vs-dark",
+    colors: pickColors(theme.colors),
+    tokens,
+  };
+});
+
+const generated = `// Generated by scripts/build-theme-registry.mjs from official VS Code theme JSON.\nwindow.VSCODE_THEME_REGISTRY = ${JSON.stringify(registry, null, 2)};\n`;
+
+fs.writeFileSync(outFile, generated);
+console.log(`Wrote ${path.relative(projectRoot, outFile)} with ${registry.length} themes`);