diff --git a/plugins/theme-pack/src/js/CLAUDE.md b/plugins/theme-pack/src/js/CLAUDE.md
new file mode 100644
index 000000000..31aa575ae
--- /dev/null
+++ b/plugins/theme-pack/src/js/CLAUDE.md
@@ -0,0 +1,678 @@
+# Theme Creation Guide
+
+This document captures the approach for creating new Deephaven themes using color.js to generate complete color palettes from base brand colors.
+
+## Overview
+
+Deephaven themes require complete color scales matching the Adobe Spectrum-based design system:
+
+- **Gray scale**: 11 shades (50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900)
+- **Chromatic colors**: 14 shades each (100-1400) for: red, orange, yellow, chartreuse, celery, green, seafoam, cyan, blue, indigo, purple, fuchsia, magenta
+
+Dark themes, override the dark template. Light themes override the light template. Based on primary background and foreground colors.
+
+## CRITICAL: No Hex Colors Outside Palette Definitions
+
+**NEVER use hex color codes outside of the palette variable definitions.** This is a strict rule with no exceptions.
+
+- Hex colors (`#xxxxxx`) are ONLY allowed when defining `--dh-color-gray-*` and `--dh-color-{color}-*` palette variables
+- ALL semantic overrides, editor tokens, component overrides, etc. MUST use `var(--dh-color-*)` references
+- If a desired color doesn't exist in the palette, use the nearest palette color
+- When in doubt, choose the closest palette color rather than introducing a hex value
+
+**Correct:**
+
+```css
+--dh-color-editor-comment: var(--dh-color-gray-700);
+--dh-color-editor-keyword: var(--dh-color-green-800);
+```
+
+**WRONG - Never do this:**
+
+```css
+--dh-color-editor-comment: #586e75; /* NO! Use palette reference */
+--dh-color-editor-keyword: #859900; /* NO! Use palette reference */
+```
+
+If asked to override colors, do not guess at variable names, look them up in the Deephaven design system or existing themes.
+
+https://github.com/deephaven/web-client-ui/blob/main/packages/components/src/theme/theme-dark/
+
+(or theme-light for light themes)
+
+Contains:
+
+themeDarkPalette.css,
+themeDarkSemantic.css,
+themeDarkSemanticChart.css,
+themeDarkSemanticEditor.css,
+themeDarkSemanticGrid.css,
+themeDarkComponents.css,
+
+They can be used as references for semantic and component overrides. Do not add overides unless requested. For example if the user or theme instructs errors to be pink, then add the negative color overrides. Otherwise leave them out.
+
+When adding semantic colors, always add both the standard and "visual-" variants. The visual variants are used for charts and data visualizations, while the standard variants are used for UI elements like buttons, alerts, etc.
+
+Ex.
+
+```
+--dh-color-accent: var(--dh-color-accent-600);
+
+...
+
+--dh-color-visual-positive: var(--dh-color-green-1200);
+--dh-color-visual-negative: var(--dh-color-red-800);
+
+--dh-color-negative: var(--dh-color-red-600);
+--dh-color-negative-bg: var(--dh-color-negative);
+--dh-color-negative-hover-bg: var(--dh-color-red-500);
+--dh-color-negative-down-bg: var(--dh-color-red-400);
+--dh-color-negative-key-focus-bg: var(--dh-color-red-500);
+--dh-color-negative-contrast: var(--dh-color-contrast-light);
+
+...
+
+--dh-color-grid-header-bg: var(--dh-color-gray-100);
+
+```
+
+If specifying semantic negative, positve, notice or info colors, also specify the "visual-" variants as well as the -bg, -hover-bg, -down-bg, -key-focus-bg etc variants.
+
+## Process
+
+### 1. Gather Base Colors
+
+Start with a color scheme's base colors either provide by the user or extracted from a broader theme. Example:
+
+```
+Background: #282A36
+Foreground: #F8F8F2
+Red: #FF5555
+Orange: #FFB86C
+Yellow: #F1FA8C
+Green: #50FA7B
+Purple: #BD93F9
+Cyan: #8BE9FD
+Pink: #FF79C6
+```
+
+If supplied with a VS Code theme file, extract the primary background and foreground colors, as well as any token colors used for syntax highlighting like red, orange, yellow, green, blue, purple, cyan, pink, etc. Determine which colors are most representative of the brand or theme, for accent, positive and negative colors.
+
+Accent should be determined off of button.background, if the scale differs, adjust --dh-color-accent, -hover, -bg and semantic so that they align correctly. For the background, use both the editor.background and sideBar.background, with editor.background being exactly gray-100, but sideBar should also appear in as part of the gray scale range.
+
+```
+{
+	"$schema": "vscode://schemas/color-theme",
+	"type": "dark",
+  "colors": {
+    		"editor.background": "#282a36",
+        "sideBar.background": "#3b3d4b",
+         ...
+  },
+  ...
+}
+```
+
+If instructed fetch the colors, and context for their use from a design system or guidlines.
+
+For colors that are missing (e.g., chartreuse, celery, magenta, fuchsia, indigo, blue, seafoam), select appropriate base colors that have the desired hue and saturation. These colors exist between the provided colors in the color wheel.
+
+For example fussia can be chosen as a midpoint between pink and magenta. Pink can be chosen as a midpoint between red and magenta.
+
+Orange can be chosen as a midpoint between red and yellow. Fill out this missing colors before proceeding.
+
+No two colors should be too close in hue, and cannot be the same.
+
+### 2. Create Ephemeral Generator Script
+
+Install colorjs.io temporarily and create a script to generate scales:
+
+```bash
+npm install colorjs.io
+```
+
+Create `tools/generate-palette.mjs`:
+
+```javascript
+import Color from 'colorjs.io';
+
+// Gray scale steps (for dark theme: 50=darkest, 900=lightest)
+const GRAY_STEPS = [50, 75, 100, 200, 300, 400, 500, 600, 700, 800, 900];
+
+// Chromatic steps (100=darkest, 1400=lightest)
+const COLOR_STEPS = [
+  100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200, 1300, 1400,
+];
+
+/**
+ * Generate gray scale with multiple anchor points.
+ * VS Code themes typically provide several background shades that should
+ * appear at specific gray scale steps.
+ *
+ * Common VS Code background colors and their typical gray scale mappings:
+ *   - editor.background → gray-100 (primary background)
+ *   - sideBar.background → gray-75 or gray-200 (depending on if lighter/darker)
+ *   - activityBar.background → gray-50 or gray-75 (usually darkest)
+ *   - editorGroupHeader.tabsBackground → gray-75 or gray-200
+ *   - input.background → gray-200 or gray-300
+ *   - foreground/editor.foreground → gray-900
+ *
+ * @param {Object} anchors - Object mapping gray step numbers to hex colors
+ *   Example: { 50: '#1a1c27', 100: '#282a36', 200: '#343d46', 900: '#f8f8f2' }
+ *   At minimum, provide: 100 (background) and 900 (foreground)
+ */
+function generateGrayScale(anchors) {
+  // Validate required anchors
+  if (!anchors[100] || !anchors[900]) {
+    throw new Error(
+      'Gray scale requires at least anchors at 100 (background) and 900 (foreground)'
+    );
+  }
+
+  const scale = {};
+  const sortedSteps = GRAY_STEPS.slice().sort((a, b) => a - b);
+
+  // Convert all anchors to OKLCH
+  const anchorColors = {};
+  for (const [step, hex] of Object.entries(anchors)) {
+    const color = new Color(hex);
+    color.to('oklch');
+    anchorColors[parseInt(step)] = color;
+  }
+
+  // For steps without explicit anchors, interpolate between nearest anchors
+  const anchorSteps = Object.keys(anchorColors)
+    .map(Number)
+    .sort((a, b) => a - b);
+
+  for (const step of sortedSteps) {
+    if (anchorColors[step]) {
+      // Use exact anchor color
+      scale[step] = anchorColors[step].to('srgb').toString({ format: 'hex' });
+    } else {
+      // Find surrounding anchors and interpolate
+      let lowerAnchor = anchorSteps[0];
+      let upperAnchor = anchorSteps[anchorSteps.length - 1];
+
+      for (const anchor of anchorSteps) {
+        if (anchor < step) lowerAnchor = anchor;
+        if (
+          anchor > step &&
+          upperAnchor === anchorSteps[anchorSteps.length - 1]
+        ) {
+          upperAnchor = anchor;
+          break;
+        }
+      }
+
+      // Handle edge cases (step below lowest or above highest anchor)
+      if (step < anchorSteps[0]) {
+        // Extrapolate darker than lowest anchor
+        const baseColor = anchorColors[anchorSteps[0]];
+        const darkenAmount = ((anchorSteps[0] - step) / 100) * 0.04;
+        const color = new Color(baseColor);
+        color.oklch.l = Math.max(0.02, color.oklch.l - darkenAmount);
+        if (!color.inGamut('srgb')) color.toGamut('srgb');
+        scale[step] = color.to('srgb').toString({ format: 'hex' });
+      } else if (step > anchorSteps[anchorSteps.length - 1]) {
+        // Extrapolate lighter than highest anchor
+        const baseColor = anchorColors[anchorSteps[anchorSteps.length - 1]];
+        const lightenAmount =
+          ((step - anchorSteps[anchorSteps.length - 1]) / 100) * 0.04;
+        const color = new Color(baseColor);
+        color.oklch.l = Math.min(0.98, color.oklch.l + lightenAmount);
+        if (!color.inGamut('srgb')) color.toGamut('srgb');
+        scale[step] = color.to('srgb').toString({ format: 'hex' });
+      } else {
+        // Interpolate between anchors
+        const t = (step - lowerAnchor) / (upperAnchor - lowerAnchor);
+        const color = anchorColors[lowerAnchor].range(
+          anchorColors[upperAnchor],
+          { space: 'oklch' }
+        )(t);
+        scale[step] = color.to('srgb').toString({ format: 'hex' });
+      }
+    }
+  }
+  return scale;
+}
+
+/**
+ * Generate chromatic color scale with exact anchor point.
+ * The base color appears EXACTLY at the specified anchorStep.
+ *
+ * Recommended anchor steps by color (dark theme):
+ *   - yellow/chartreuse/celery: 1000 (these are naturally light)
+ *   - red: 600
+ *   - most colors: 900
+ *
+ * For light themes, shift anchors:
+ *   - yellow: 500
+ *   - red: 800
+ *   - most colors: 900
+ */
+function generateColorScale(baseHex, anchorStep = 800) {
+  const base = new Color(baseHex);
+  base.to('oklch');
+  const baseLightness = base.oklch.l;
+  const baseChroma = base.oklch.c;
+  const baseHue = base.oklch.h;
+
+  // Define lightness targets for all steps
+  const defaultLightness = {
+    100: 0.15,
+    200: 0.2,
+    300: 0.25,
+    400: 0.32,
+    500: 0.4,
+    600: 0.48,
+    700: 0.56,
+    800: 0.64,
+    900: 0.72,
+    1000: 0.78,
+    1100: 0.84,
+    1200: 0.89,
+    1300: 0.93,
+    1400: 0.96,
+  };
+
+  // Calculate offset to place base color exactly at anchorStep
+  const targetLightnessAtAnchor = defaultLightness[anchorStep];
+  const lightnessOffset = baseLightness - targetLightnessAtAnchor;
+
+  // Chroma multipliers - full chroma near anchor, reduced at extremes
+  const chromaMultipliers = {
+    100: 0.5,
+    200: 0.6,
+    300: 0.7,
+    400: 0.8,
+    500: 0.9,
+    600: 0.95,
+    700: 1.0,
+    800: 1.0,
+    900: 1.0,
+    1000: 0.95,
+    1100: 0.85,
+    1200: 0.7,
+    1300: 0.5,
+    1400: 0.3,
+  };
+
+  const scale = {};
+  for (const step of COLOR_STEPS) {
+    if (step === anchorStep) {
+      // Use exact base color
+      scale[step] = base.to('srgb').toString({ format: 'hex' });
+    } else {
+      // Adjust lightness relative to anchor, clamping to valid range
+      let adjustedLightness = defaultLightness[step] + lightnessOffset;
+      adjustedLightness = Math.max(0.05, Math.min(0.98, adjustedLightness));
+
+      const color = new Color('oklch', [
+        adjustedLightness,
+        baseChroma * chromaMultipliers[step],
+        baseHue,
+      ]);
+      if (!color.inGamut('srgb')) color.toGamut('srgb');
+      scale[step] = color.to('srgb').toString({ format: 'hex' });
+    }
+  }
+  return scale;
+}
+
+// Example usage for dark theme with multiple gray anchors:
+// Extract background colors from VS Code theme:
+//   editor.background: #282a36 → gray-100
+//   sideBar.background: #21222c → gray-75
+//   activityBar.background: #1a1c27 → gray-50
+//   input.background: #343d46 → gray-200
+//   foreground: #f8f8f2 → gray-900
+const grays = generateGrayScale({
+  50: '#1a1c27', // activityBar.background (darkest)
+  75: '#21222c', // sideBar.background
+  100: '#282a36', // editor.background (primary)
+  200: '#343d46', // input.background
+  900: '#f8f8f2', // foreground (lightest)
+});
+
+// Simple usage with just background and foreground:
+const graysSimple = generateGrayScale({
+  100: '#282a36', // editor.background
+  900: '#f8f8f2', // foreground
+});
+
+// Chromatic scales
+const reds = generateColorScale('#FF5555', 600); // red anchored at 600
+const yellows = generateColorScale('#F1FA8C', 500); // yellow anchored at 500
+const purples = generateColorScale('#BD93F9', 800); // purple anchored at 800
+```
+
+### 3. Run Generator
+
+```bash
+node tools/generate-palette.mjs > src/my-theme.css
+```
+
+### 4. Map Editor Token Colors
+
+After generating the palette, map VS Code's syntax highlighting colors to Deephaven editor variables:
+
+1. **Re-read the generated palette** to see exactly which hex values were assigned to each step
+2. **Extract VS Code tokenColors** from the theme JSON (look for `tokenColors` array)
+3. **Find closest palette matches** for each token color using the helper function in "Editor Token Color Mapping" section
+4. **Add editor overrides** to your theme CSS using `var(--dh-color-visual-*)` or direct palette references
+
+Key token mappings to check:
+
+- Keywords (`keyword`, `storage.type`) → typically cyan or purple
+- Strings (`string`) → typically yellow or green
+- Numbers (`constant.numeric`) → typically purple or orange
+- Comments (`comment`) → typically gray-600 or gray-700
+- Functions (`support.function`, `entity.name.function`) → typically green or cyan
+- Operators (`keyword.operator`) → typically red or purple
+
+```
+  /* Code rules */
+  --dh-color-editor-comment: var(--dh-color-gray-700);
+  --dh-color-editor-delimiter: var(--dh-color-gray-700);
+  --dh-color-editor-identifier-js: var(--dh-color-visual-yellow);
+  --dh-color-editor-identifier-namespace: var(--dh-color-visual-red);
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+  --dh-color-editor-keyword: var(--dh-color-visual-cyan);
+  --dh-color-editor-number: var(--dh-color-visual-purple);
+  --dh-color-editor-operator: var(--dh-color-visual-red);
+  --dh-color-editor-predefined: var(--dh-color-visual-green);
+  --dh-color-editor-storage: var(--dh-color-visual-red);
+  --dh-color-editor-string-delim: var(--dh-color-gray-700);
+  --dh-color-editor-string: var(--dh-color-visual-yellow);
+
+  /* Brackets */
+  --dh-color-editor-bracket-fg1: var(--dh-color-visual-yellow);
+  --dh-color-editor-bracket-fg2: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg3: var(--dh-color-visual-blue);
+  --dh-color-editor-bracket-fg4: var(--dh-color-visual-yellow);
+  --dh-color-editor-bracket-fg5: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg6: var(--dh-color-visual-blue);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-visual-negative);
+```
+
+See the "Editor Token Color Mapping" section below for the complete mapping table and helper code.
+
+### 5. Add Theme to index.ts
+
+Update `src/index.ts` to export multiple themes:
+
+```typescript
+import type { ThemePlugin } from '@deephaven/plugin';
+import ftStyleContent from './theme.css?inline';
+import myThemeStyleContent from './my-theme.css?inline';
+
+const plugin: ThemePlugin = {
+  name: 'theme-pack',
+  type: 'ThemePlugin',
+  themes: [
+    {
+      name: 'FT Theme',
+      baseTheme: 'light',
+      styleContent: ftStyleContent,
+    },
+    {
+      name: 'My Theme',
+      baseTheme: 'dark', // or 'light'
+      styleContent: myThemeStyleContent,
+    },
+  ],
+};
+
+export default plugin;
+```
+
+### 6. Cleanup
+
+Delete the generator script after use:
+
+```bash
+rm -rf tools/
+```
+
+### 7. Test
+
+Run e2e tests to verify the theme renders correctly:
+
+```bash
+# From repo root
+PLAYWRIGHT_HTML_OPEN=never npm run e2e:update-snapshots -- ./tests/theme.spec.ts
+```
+
+## CSS Structure
+
+The generated CSS should include:
+
+All overides are OPTIONAL, do not any more than requested or needed to match the brand.
+
+```css
+:root {
+  /* Gray palette */
+  --dh-color-gray-50: #...;
+  /* ... through gray-900 */
+
+  /* Chromatic palettes (red, orange, yellow, etc.) */
+  --dh-color-red-100: #...;
+  /* ... through red-1400 */
+  /* Repeat for all 13 color families */
+
+  /* Semantic - map accent to your brand color */
+  --dh-color-accent-100: var(--dh-color-purple-100);
+  /* ... through accent-1400 */
+}
+```
+
+https://github.com/deephaven/web-client-ui/blob/main/packages/components/src/theme/theme-dark/
+
+Contains:
+
+themeDarkPalette.css,
+themeDarkSemantic.css,
+themeDarkSemanticChart.css,
+themeDarkSemanticEditor.css,
+themeDarkSemanticGrid.css,
+themeDarkComponents.css,
+
+They can be used as references for semantic and component overrides.
+
+## Key Concepts
+
+- **OKLCH color space**: Used for perceptually uniform lightness interpolation
+- **Dark vs Light themes**:
+  - Dark: gray-50 is darkest, gray-900 is lightest (foreground)
+  - Light: gray-50 is lightest, gray-900 is darkest
+- **Gray scale multi-anchor support**: VS Code themes provide multiple background shades. Map them to appropriate gray steps:
+  - `editor.background` → gray-100 (required, primary background)
+  - `sideBar.background` → gray-75 or gray-200 (depending on lighter/darker than editor)
+  - `activityBar.background` → gray-50 or gray-75 (often darkest element)
+  - `editorGroupHeader.tabsBackground` → gray-75 or gray-200
+  - `input.background` / `dropdown.background` → gray-200 or gray-300
+  - `foreground` / `editor.foreground` → gray-900 (required)
+  - Steps without anchors are interpolated between nearest anchors
+- **Exact anchor points**:
+  - Gray scale: All provided colors appear exactly at their specified steps
+  - Chromatic: base color appears exactly at the specified anchor step
+- **Anchor step recommendations (dark theme)**:
+  - Yellow/chartreuse/celery: 500 (naturally light colors)
+  - Red: 600
+  - Most colors (purple, cyan, green, etc.): 700-900
+- **Anchor step recommendations (light theme)**:
+  - Yellow: 1000
+  - Red: 800
+  - Most colors: 900-1100
+- **Chroma reduction**: Reduce saturation at extreme light/dark ends for natural appearance
+- **sRGB gamut**: All colors must be in sRGB color space for browser compatibility
+
+## Editor Token Color Mapping
+
+After generating the palette, re-read the generated CSS to identify which palette colors best match VS Code's syntax highlighting tokens. This ensures the editor colors match the original theme's intent.
+
+### VS Code Token Scopes to Deephaven Editor Variables
+
+VS Code themes define syntax highlighting in `tokenColors` with scopes. Map these to Deephaven editor variables:
+
+| VS Code Scope(s)                                          | Deephaven Variable                       | Default Palette                 |
+| --------------------------------------------------------- | ---------------------------------------- | ------------------------------- |
+| `comment`, `punctuation.definition.comment`               | `--dh-color-editor-comment`              | `var(--dh-color-gray-700)`      |
+| `punctuation`, `meta.brace`                               | `--dh-color-editor-delimiter`            | `var(--dh-color-gray-700)`      |
+| `variable.other.readwrite.js`, `variable.other.object.js` | `--dh-color-editor-identifier-js`        | `var(--dh-color-visual-yellow)` |
+| `entity.name.type.namespace`, `entity.name.type.module`   | `--dh-color-editor-identifier-namespace` | `var(--dh-color-visual-red)`    |
+| `variable`, `variable.other`                              | `--dh-color-editor-identifier`           | `var(--dh-color-gray-900)`      |
+| `keyword`, `storage.type`, `keyword.control`              | `--dh-color-editor-keyword`              | `var(--dh-color-visual-cyan)`   |
+| `constant.numeric`                                        | `--dh-color-editor-number`               | `var(--dh-color-visual-purple)` |
+| `keyword.operator`                                        | `--dh-color-editor-operator`             | `var(--dh-color-visual-red)`    |
+| `support.function`, `entity.name.function`                | `--dh-color-editor-predefined`           | `var(--dh-color-visual-green)`  |
+| `storage`, `storage.modifier`                             | `--dh-color-editor-storage`              | `var(--dh-color-visual-red)`    |
+| `punctuation.definition.string`                           | `--dh-color-editor-string-delim`         | `var(--dh-color-gray-700)`      |
+| `string`, `string.quoted`                                 | `--dh-color-editor-string`               | `var(--dh-color-visual-yellow)` |
+
+### Bracket Colors
+
+Bracket pair colorization uses 6 rotating colors:
+
+| Variable                                  | Default Palette                   |
+| ----------------------------------------- | --------------------------------- |
+| `--dh-color-editor-bracket-fg1`           | `var(--dh-color-visual-yellow)`   |
+| `--dh-color-editor-bracket-fg2`           | `var(--dh-color-visual-purple)`   |
+| `--dh-color-editor-bracket-fg3`           | `var(--dh-color-visual-blue)`     |
+| `--dh-color-editor-bracket-fg4`           | `var(--dh-color-visual-yellow)`   |
+| `--dh-color-editor-bracket-fg5`           | `var(--dh-color-visual-purple)`   |
+| `--dh-color-editor-bracket-fg6`           | `var(--dh-color-visual-blue)`     |
+| `--dh-color-editor-unexpected-bracket-fg` | `var(--dh-color-visual-negative)` |
+
+### Process for Finding Best Palette Match
+
+After palette generation, for each VS Code token color:
+
+1. **Extract the hex color** from the VS Code theme's `tokenColors` for the relevant scope
+2. **Compare to generated palette colors** to find the closest visual match
+3. **Map to the visual-\* semantic color** that uses that palette range
+
+Example: If the VS Code theme uses `#8BE9FD` for keywords and your generated cyan-800 is `#8be9fd`, use:
+
+```css
+--dh-color-editor-keyword: var(--dh-color-visual-cyan);
+```
+
+### Adding to Generator Script
+
+Add this helper function to find the closest palette color:
+
+```javascript
+import Color from 'colorjs.io';
+
+/**
+ * Find the closest palette color to a target hex color.
+ * Returns the palette variable name and the color distance.
+ */
+function findClosestPaletteColor(targetHex, palette) {
+  const target = new Color(targetHex);
+  let bestMatch = { name: null, distance: Infinity };
+
+  for (const [colorName, shades] of Object.entries(palette)) {
+    for (const [step, hex] of Object.entries(shades)) {
+      const color = new Color(hex);
+      const distance = target.deltaE(color, 'oklch');
+      if (distance < bestMatch.distance) {
+        bestMatch = {
+          name: `--dh-color-${colorName}-${step}`,
+          distance,
+          hex,
+        };
+      }
+    }
+  }
+  return bestMatch;
+}
+
+/**
+ * Map VS Code token colors to Deephaven editor variables.
+ * @param {Object} vsCodeTokenColors - Token colors from VS Code theme
+ * @param {Object} palette - Generated palette { gray: {...}, red: {...}, ... }
+ */
+function generateEditorOverrides(vsCodeTokenColors, palette) {
+  // Token scope to Deephaven variable mapping
+  const scopeMap = {
+    comment: 'editor-comment',
+    punctuation: 'editor-delimiter',
+    keyword: 'editor-keyword',
+    'constant.numeric': 'editor-number',
+    'keyword.operator': 'editor-operator',
+    string: 'editor-string',
+    'support.function': 'editor-predefined',
+    storage: 'editor-storage',
+    variable: 'editor-identifier',
+  };
+
+  const overrides = {};
+
+  for (const token of vsCodeTokenColors) {
+    const scopes = Array.isArray(token.scope) ? token.scope : [token.scope];
+    const color = token.settings?.foreground;
+    if (!color) continue;
+
+    for (const scope of scopes) {
+      for (const [scopeKey, dhVar] of Object.entries(scopeMap)) {
+        if (scope?.startsWith(scopeKey)) {
+          const match = findClosestPaletteColor(color, palette);
+          if (match.distance < 5) {
+            // Close enough match
+            overrides[`--dh-color-${dhVar}`] = `var(${match.name})`;
+          }
+        }
+      }
+    }
+  }
+
+  return overrides;
+}
+```
+
+### Visual Color Aliases
+
+The `visual-*` semantic colors are the preferred way to reference palette colors for editor tokens.
+
+**CRITICAL: Visual colors must map to their matching palette color family.** The visual alias only selects the brightness/step within a color scale - it does NOT remap to a different hue.
+
+- `--dh-color-visual-red` → MUST use `var(--dh-color-red-*)` (e.g., red-600, red-800)
+- `--dh-color-visual-yellow` → MUST use `var(--dh-color-yellow-*)` (e.g., yellow-1000, yellow-1100)
+- `--dh-color-visual-orange` → MUST use `var(--dh-color-orange-*)` (e.g., orange-800, orange-900)
+
+**WRONG - Never do this:**
+
+```css
+--dh-color-visual-yellow: var(--dh-color-orange-900); /* NO! Yellow must use yellow-* */
+--dh-color-visual-red: var(--dh-color-magenta-700); /* NO! Red must use red-* */
+```
+
+**Correct:**
+
+```css
+--dh-color-visual-yellow: var(--dh-color-yellow-1000); /* Adjust step for brightness */
+--dh-color-visual-red: var(--dh-color-red-700); /* Adjust step for brightness */
+```
+
+| Visual Alias                 | Must Use Palette Family | Typical Step (Dark Theme) |
+| ---------------------------- | ----------------------- | ------------------------- |
+| `--dh-color-visual-yellow`   | `yellow-*`              | 1000-1100                 |
+| `--dh-color-visual-purple`   | `purple-*`              | 800-900                   |
+| `--dh-color-visual-blue`     | `blue-*`                | 700-800                   |
+| `--dh-color-visual-cyan`     | `cyan-*`                | 800-900                   |
+| `--dh-color-visual-green`    | `green-*`               | 800-1000                  |
+| `--dh-color-visual-red`      | `red-*`                 | 700-800                   |
+| `--dh-color-visual-orange`   | `orange-*`              | 800-900                   |
+| `--dh-color-visual-positive` | `green-*`               | 900-1000                  |
+| `--dh-color-visual-negative` | `red-*`                 | 600-700                   |
+| `--dh-color-visual-positive` | `var(--dh-color-green-1000)`  |
+
+When a VS Code token color closely matches a palette color, prefer using the corresponding `visual-*` alias if one exists. This maintains consistency with the design system.
+
+## Reference
+
+- Deephaven dark palette: https://github.com/deephaven/web-client-ui/tree/main/packages/components/src/theme/theme-dark
+- color.js documentation: https://colorjs.io/
diff --git a/plugins/theme-pack/src/js/README.md b/plugins/theme-pack/src/js/README.md
index 0c2b5f51e..b65952fc6 100644
--- a/plugins/theme-pack/src/js/README.md
+++ b/plugins/theme-pack/src/js/README.md
@@ -4,6 +4,10 @@ This plugin demonstrates how to create a custom theme for the Deephaven web UI.
 
 ![Example Theme](example-theme.jpg)
 
+## Claude.md
+
+A CLAUDE.md file is available to assist in generating new themes based on a supplied color palette from an agentic CLI. You can find it in the same directory as this README. You can prompt it with providing a theme name and a set of base colors to generate a new theme CSS file, or pass in an existing VS Code scheme file to convert it to a Deephaven theme.
+
 ## Prerequisites
 
 Requires Deephaven Core version 0.33.0 or higher.
@@ -92,6 +96,8 @@ The Deephaven design system is based on the [Adobe spectrum](https://spectrum.ad
 
 You can create color palettes with shades for each color using tools like Adobe's [Leonardo](https://leonardocolor.io/theme.html) color tool (recommended), or [Coolors](https://coolors.co/gradient-palette/fae7d5-24211d?number=11). You may already have an existing brand guide at your company that gives you full palettes. Leonardo is a great tool for creating color ramps, and has an "Export as CSS" feature to get the HEX values for each color in the ramp. Below we use hsl values, but you can use any color format listed in the previous section.
 
+You can inspect VS code themes for inspiration by running `Developer: Generate Color Theme From Current Settings` from the VS Code command palette.
+
 The background colors are defined using a set of 11 colors, ranging from light to dark for light themes, and inverted from dark to light for dark themes. The 50, 75, and 100 colors are closer together, and 100-900 are a more equal distribution. The other colors are more evenly distributed across lightness.
 
 Our example theme used a background color inspired by the Financial Times site to create a palette using Leonardo. The example theme uses the following palette for the "gray" background colors:
diff --git a/plugins/theme-pack/src/js/src/dracula-theme.css b/plugins/theme-pack/src/js/src/dracula-theme.css
new file mode 100644
index 000000000..0a4d8cdb4
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/dracula-theme.css
@@ -0,0 +1,346 @@
+/* Dracula Theme for Deephaven */
+/* Generated with exact anchor points from official Dracula colors */
+/* Source: https://spec.draculatheme.com/ */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Background (#282A36) at gray-100, Foreground (#F8F8F2) at gray-900 */
+  --dh-color-gray-50: #1a1c27;
+  --dh-color-gray-75: #20232e;
+  --dh-color-gray-100: #282a36; /* Dracula Background */
+  --dh-color-gray-200: #343d46;
+  --dh-color-gray-300: #455157;
+  --dh-color-gray-400: #616e71;
+  --dh-color-gray-500: #818d8b;
+  --dh-color-gray-600: #a3aca7;
+  --dh-color-gray-700: #c7ccc5;
+  --dh-color-gray-800: #e4e6e0;
+  --dh-color-gray-900: #f8f8f2; /* Dracula Foreground */
+
+  /* ============ RED PALETTE ============ */
+  /* Dracula Red - errors, warnings, deletion anchored at 600 */
+  --dh-color-red-100: #671f1e;
+  --dh-color-red-200: #7e2424;
+  --dh-color-red-300: #96292a;
+  --dh-color-red-400: #b53536;
+  --dh-color-red-500: #da4545;
+  --dh-color-red-600: #f55; /* #FF5555 */
+  --dh-color-red-700: #ff827c;
+  --dh-color-red-800: #ffafa8;
+  --dh-color-red-900: #ffd6d1;
+  --dh-color-red-1000: #fff1ee;
+  --dh-color-red-1100: #fff1ee;
+  --dh-color-red-1200: #fff1ee;
+  --dh-color-red-1300: #fff1ee;
+  --dh-color-red-1400: #fff1ee;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* Dracula Orange - numbers, constants, booleans anchored at 900 */
+  --dh-color-orange-100: #391e00;
+  --dh-color-orange-200: #4a2800;
+  --dh-color-orange-300: #5c3300;
+  --dh-color-orange-400: #754400;
+  --dh-color-orange-500: #915806;
+  --dh-color-orange-600: #ad6e22;
+  --dh-color-orange-700: #c98637;
+  --dh-color-orange-800: #e49f52;
+  --dh-color-orange-900: #ffb86c; /* #FFB86C */
+  --dh-color-orange-1000: #ffce8f;
+  --dh-color-orange-1100: #ffe9c4;
+  --dh-color-orange-1200: #fff3da;
+  --dh-color-orange-1300: #fff3da;
+  --dh-color-orange-1400: #fff4df;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* Dracula Yellow - functions, methods (naturally light) anchored at 1000 */
+  --dh-color-yellow-100: #353706;
+  --dh-color-yellow-200: #424505;
+  --dh-color-yellow-300: #4f5301;
+  --dh-color-yellow-400: #636808;
+  --dh-color-yellow-500: #7a8016;
+  --dh-color-yellow-600: #92982d;
+  --dh-color-yellow-700: #abb242;
+  --dh-color-yellow-800: #c4cc5e;
+  --dh-color-yellow-900: #dde678;
+  --dh-color-yellow-1000: #f1fa8c; /* #F1FA8C */
+  --dh-color-yellow-1100: #f9ffa6;
+  --dh-color-yellow-1200: #f9ffb6;
+  --dh-color-yellow-1300: #f8feca;
+  --dh-color-yellow-1400: #f8fcdd;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived - between yellow and green anchored at 1000 */
+  --dh-color-chartreuse-100: #0f1f00;
+  --dh-color-chartreuse-200: #182c00;
+  --dh-color-chartreuse-300: #223a00;
+  --dh-color-chartreuse-400: #314e00;
+  --dh-color-chartreuse-500: #426600;
+  --dh-color-chartreuse-600: #557f00;
+  --dh-color-chartreuse-700: #689a00;
+  --dh-color-chartreuse-800: #7cb500;
+  --dh-color-chartreuse-900: #91d000;
+  --dh-color-chartreuse-1000: #a4e400; /* #A4E400 */
+  --dh-color-chartreuse-1100: #bdf561;
+  --dh-color-chartreuse-1200: #d3ff8f;
+  --dh-color-chartreuse-1300: #e5ffb9;
+  --dh-color-chartreuse-1400: #ecffd2;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - yellowish green anchored at 1000 */
+  --dh-color-celery-100: #091b00;
+  --dh-color-celery-200: #122800;
+  --dh-color-celery-300: #1b3600;
+  --dh-color-celery-400: #284a00;
+  --dh-color-celery-500: #396300;
+  --dh-color-celery-600: #4a7c00;
+  --dh-color-celery-700: #5c9600;
+  --dh-color-celery-800: #6eb200;
+  --dh-color-celery-900: #85cc00;
+  --dh-color-celery-1000: #98e024; /* #98E024 */
+  --dh-color-celery-1100: #b2f166;
+  --dh-color-celery-1200: #cafe90;
+  --dh-color-celery-1300: #e1ffbc;
+  --dh-color-celery-1400: #ebffd5;
+
+  /* ============ GREEN PALETTE ============ */
+  /* Dracula Green - strings, inherited classes anchored at 900 */
+  --dh-color-green-100: #003b05;
+  --dh-color-green-200: #004b05;
+  --dh-color-green-300: #005b09;
+  --dh-color-green-400: #007214;
+  --dh-color-green-500: #008d20;
+  --dh-color-green-600: #00a932;
+  --dh-color-green-700: #00c446;
+  --dh-color-green-800: #25df61;
+  --dh-color-green-900: #50fa7b; /* #50FA7B */
+  --dh-color-green-1000: #95ffa8;
+  --dh-color-green-1100: #d9ffde;
+  --dh-color-green-1200: #d9ffde;
+  --dh-color-green-1300: #d9ffde;
+  --dh-color-green-1400: #dbffe0;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived - between green and cyan anchored at 900 */
+  --dh-color-seafoam-100: #003a10;
+  --dh-color-seafoam-200: #004a15;
+  --dh-color-seafoam-300: #005a1a;
+  --dh-color-seafoam-400: #007125;
+  --dh-color-seafoam-500: #008c34;
+  --dh-color-seafoam-600: #00a648;
+  --dh-color-seafoam-700: #00c25c;
+  --dh-color-seafoam-800: #36dc75;
+  --dh-color-seafoam-900: #5af78e; /* #5AF78E */
+  --dh-color-seafoam-1000: #8dffae;
+  --dh-color-seafoam-1100: #d8ffe1;
+  --dh-color-seafoam-1200: #d8ffe1;
+  --dh-color-seafoam-1300: #d8ffe1;
+  --dh-color-seafoam-1400: #ddffe5;
+
+  /* ============ CYAN PALETTE ============ */
+  /* Dracula Cyan - support functions, regex anchored at 900 */
+  --dh-color-cyan-100: #0d373f;
+  --dh-color-cyan-200: #10454f;
+  --dh-color-cyan-300: #125460;
+  --dh-color-cyan-400: #1d6977;
+  --dh-color-cyan-500: #2b8293;
+  --dh-color-cyan-600: #419bad;
+  --dh-color-cyan-700: #56b5c8;
+  --dh-color-cyan-800: #71cfe2;
+  --dh-color-cyan-900: #8be9fd; /* #8BE9FD */
+  --dh-color-cyan-1000: #a9fbff;
+  --dh-color-cyan-1100: #d0ffff;
+  --dh-color-cyan-1200: #d0ffff;
+  --dh-color-cyan-1300: #d6ffff;
+  --dh-color-cyan-1400: #e4feff;
+
+  /* ============ BLUE PALETTE ============ */
+  /* Dracula Comment - comments, disabled code anchored at 700 */
+  --dh-color-blue-100: #05091c;
+  --dh-color-blue-200: #0e142c;
+  --dh-color-blue-300: #171f3c;
+  --dh-color-blue-400: #263053;
+  --dh-color-blue-500: #39456f;
+  --dh-color-blue-600: #4d5b89;
+  --dh-color-blue-700: #6272a4; /* #6272A4 */
+  --dh-color-blue-800: #798abe;
+  --dh-color-blue-900: #91a3d8;
+  --dh-color-blue-1000: #a4b6e9;
+  --dh-color-blue-1100: #b9c9f8;
+  --dh-color-blue-1200: #ccdaff;
+  --dh-color-blue-1300: #dde7ff;
+  --dh-color-blue-1400: #ebf1ff;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived - between blue and purple anchored at 700 */
+  --dh-color-indigo-100: #0b0a2a;
+  --dh-color-indigo-200: #15143d;
+  --dh-color-indigo-300: #1f1f51;
+  --dh-color-indigo-400: #2f306b;
+  --dh-color-indigo-500: #42448a;
+  --dh-color-indigo-600: #575aa6;
+  --dh-color-indigo-700: #6c71c4; /* #6C71C4 */
+  --dh-color-indigo-800: #8389df;
+  --dh-color-indigo-900: #9ba2fa;
+  --dh-color-indigo-1000: #aeb6ff;
+  --dh-color-indigo-1100: #c5ccff;
+  --dh-color-indigo-1200: #d8deff;
+  --dh-color-indigo-1300: #e8edff;
+  --dh-color-indigo-1400: #f4f7ff;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* Dracula Purple - classes, types, variables anchored at 900 */
+  --dh-color-purple-100: #16042a;
+  --dh-color-purple-200: #230b3c;
+  --dh-color-purple-300: #311450;
+  --dh-color-purple-400: #45246a;
+  --dh-color-purple-500: #5c3689;
+  --dh-color-purple-600: #734ca6;
+  --dh-color-purple-700: #8c62c3;
+  --dh-color-purple-800: #a47ade;
+  --dh-color-purple-900: #bd93f9; /* #BD93F9 */
+  --dh-color-purple-1000: #cfa8ff;
+  --dh-color-purple-1100: #dec1ff;
+  --dh-color-purple-1200: #ebd7ff;
+  --dh-color-purple-1300: #f5e8ff;
+  --dh-color-purple-1400: #fdf3ff;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Dracula Pink - keywords, storage types anchored at 900 */
+  --dh-color-fuchsia-100: #2b001a;
+  --dh-color-fuchsia-200: #3e0028;
+  --dh-color-fuchsia-300: #510036;
+  --dh-color-fuchsia-400: #6c034a;
+  --dh-color-fuchsia-500: #8b1862;
+  --dh-color-fuchsia-600: #a92f7b;
+  --dh-color-fuchsia-700: #c74594;
+  --dh-color-fuchsia-800: #e35fad;
+  --dh-color-fuchsia-900: #ff79c6; /* #FF79C6 */
+  --dh-color-fuchsia-1000: #ff95d6;
+  --dh-color-fuchsia-1100: #ffb8e4;
+  --dh-color-fuchsia-1200: #ffd3f0;
+  --dh-color-fuchsia-1300: #ffe7fa;
+  --dh-color-fuchsia-1400: #ffeffe;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Derived - purple-magenta (distinct hue) anchored at 900 */
+  --dh-color-magenta-100: #170017;
+  --dh-color-magenta-200: #280028;
+  --dh-color-magenta-300: #390039;
+  --dh-color-magenta-400: #510051;
+  --dh-color-magenta-500: #6d0e6c;
+  --dh-color-magenta-600: #892787;
+  --dh-color-magenta-700: #a53da2;
+  --dh-color-magenta-800: #bf57bc;
+  --dh-color-magenta-900: #da70d6; /* #DA70D6 */
+  --dh-color-magenta-1000: #ec86e7;
+  --dh-color-magenta-1100: #fb9ff6;
+  --dh-color-magenta-1200: #ffb7fe;
+  --dh-color-magenta-1300: #ffcdff;
+  --dh-color-magenta-1400: #ffe0fe;
+
+  /* ============ SEMANTIC - ACCENT (Purple) ============ */
+  --dh-color-accent-100: var(--dh-color-purple-100);
+  --dh-color-accent-200: var(--dh-color-purple-200);
+  --dh-color-accent-300: var(--dh-color-purple-300);
+  --dh-color-accent-400: var(--dh-color-purple-400);
+  --dh-color-accent-500: var(--dh-color-purple-500);
+  --dh-color-accent-600: var(--dh-color-purple-600);
+  --dh-color-accent-700: var(--dh-color-purple-700);
+  --dh-color-accent-800: var(--dh-color-purple-800);
+  --dh-color-accent-900: var(--dh-color-purple-900);
+  --dh-color-accent-1000: var(--dh-color-purple-1000);
+  --dh-color-accent-1100: var(--dh-color-purple-1100);
+  --dh-color-accent-1200: var(--dh-color-purple-1200);
+  --dh-color-accent-1300: var(--dh-color-purple-1300);
+  --dh-color-accent-1400: var(--dh-color-purple-1400);
+
+  /** ============ SEMANTIC - POSITIVE (Green) ============ */
+  --dh-color-visual-positive: var(--dh-color-green-900);
+
+  /* ============ SEMANTIC - NEGATIVE (Pink/Fuchsia) ============ */
+  /* Dracula uses Pink for emphasis instead of traditional red */
+  --dh-color-negative: var(--dh-color-fuchsia-900);
+  --dh-color-negative-bg: var(--dh-color-negative);
+  --dh-color-negative-hover-bg: var(--dh-color-fuchsia-800);
+  --dh-color-negative-down-bg: var(--dh-color-fuchsia-700);
+  --dh-color-negative-key-focus-bg: var(--dh-color-fuchsia-800);
+  --dh-color-visual-negative: var(--dh-color-fuchsia-900);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using Dracula background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using Dracula colors at anchor points */
+  --dh-color-chart-colorway: var(--dh-color-purple-900) var(--dh-color-cyan-900)
+    var(--dh-color-green-900) var(--dh-color-orange-900)
+    var(--dh-color-fuchsia-900) var(--dh-color-yellow-1000)
+    var(--dh-color-red-600) var(--dh-color-blue-700) var(--dh-color-magenta-900)
+    var(--dh-color-indigo-700);
+
+  /* ============ EDITOR SEMANTIC - DRACULA SYNTAX ============ */
+  /* Based on official Dracula spec using palette variables */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-100);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-bg: var(--dh-color-gray-300);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);
+
+  /* Code syntax highlighting per Dracula spec */
+  --dh-color-editor-comment: var(--dh-color-blue-700); /* Comments - #6272A4 */
+  --dh-color-editor-keyword: var(
+    --dh-color-fuchsia-900
+  ); /* Keywords - Pink #FF79C6 */
+  --dh-color-editor-storage: var(
+    --dh-color-fuchsia-900
+  ); /* Storage types - Pink */
+  --dh-color-editor-number: var(
+    --dh-color-purple-1000
+  ); /* Numbers, constants - Orange #FFB86C */
+  --dh-color-editor-string: var(
+    --dh-color-yellow-1000
+  ); /* Strings - Yellow #F1FA8C */
+  --dh-color-editor-string-delim: var(
+    --dh-color-green-900
+  ); /* String delimiters - Green */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-900
+  ); /* Default identifiers - Foreground */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-yellow-1000
+  ); /* Functions, methods - Yellow #F1FA8C */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-purple-900
+  ); /* Classes, types - Purple #BD93F9 */
+  --dh-color-editor-predefined: var(
+    --dh-color-cyan-900
+  ); /* Support functions, regex - Cyan #8BE9FD */
+  --dh-color-editor-operator: var(
+    --dh-color-fuchsia-900
+  ); /* Operators - Pink */
+  --dh-color-editor-delimiter: var(
+    --dh-color-gray-900
+  ); /* Delimiters - Foreground */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-600
+  ); /* Errors - Red #FF5555 */
+
+  /* Bracket colors - Dracula style cycling through accent colors */
+  --dh-color-editor-bracket-fg1: var(--dh-color-fuchsia-900); /* Pink */
+  --dh-color-editor-bracket-fg2: var(--dh-color-purple-900); /* Purple */
+  --dh-color-editor-bracket-fg3: var(--dh-color-cyan-900); /* Cyan */
+  --dh-color-editor-bracket-fg4: var(--dh-color-green-900); /* Green */
+  --dh-color-editor-bracket-fg5: var(--dh-color-orange-900); /* Orange */
+  --dh-color-editor-bracket-fg6: var(--dh-color-yellow-1000); /* Yellow */
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-600); /* Red */
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(
+    --dh-color-blue-700
+  ); /* Comment color */
+  --dh-color-editor-line-number-active-fg: var(
+    --dh-color-gray-900
+  ); /* Foreground */
+}
diff --git a/plugins/theme-pack/src/js/src/index.ts b/plugins/theme-pack/src/js/src/index.ts
index aa381c90e..8a8c6397e 100644
--- a/plugins/theme-pack/src/js/src/index.ts
+++ b/plugins/theme-pack/src/js/src/index.ts
@@ -1,14 +1,76 @@
 import type { ThemePlugin } from '@deephaven/plugin';
-import styleContent from './theme.css?inline';
+import draculaStyleContent from './dracula-theme.css?inline';
+import ftStyleContent from './theme.css?inline';
+import intellijDarkStyleContent from './intellij-dark-theme.css?inline';
+import intellijLightStyleContent from './intellij-light-theme.css?inline';
+import kimbieDarkStyleContent from './kimbie-dark-theme.css?inline';
+import nightOwlStyleContent from './night-owl-theme.css?inline';
+import redStyleContent from './red-theme.css?inline';
+import solarizedDarkStyleContent from './solarized-dark-theme.css?inline';
+import solarizedLightStyleContent from './solarized-light-theme.css?inline';
+import synthwave84StyleContent from './synthwave84-theme.css?inline';
+import tomorrowNightBlueStyleContent from './tomorrow-night-blue-theme.css?inline';
 
 const plugin: ThemePlugin = {
   name: 'theme-pack', // match the plugin name in the package.json, and the folder name
   type: 'ThemePlugin',
-  themes: {
-    name: 'FT Theme', // A human-readable name for the theme
-    baseTheme: 'light', // The base theme to extend from, either 'light' or 'dark'
-    styleContent, // this is a string containing your .css file contents, you could also manually inline css rules here
-  },
+  themes: [
+    {
+      name: 'Dracula',
+      baseTheme: 'dark',
+      styleContent: draculaStyleContent,
+    },
+    {
+      name: 'FT Theme', // A human-readable name for the theme
+      baseTheme: 'light', // The base theme to extend from, either 'light' or 'dark'
+      styleContent: ftStyleContent, // this is a string containing your .css file contents
+    },
+    {
+      name: 'IntelliJ Dark',
+      baseTheme: 'dark',
+      styleContent: intellijDarkStyleContent,
+    },
+    {
+      name: 'IntelliJ Light',
+      baseTheme: 'light',
+      styleContent: intellijLightStyleContent,
+    },
+    {
+      name: 'Kimbie Dark',
+      baseTheme: 'dark',
+      styleContent: kimbieDarkStyleContent,
+    },
+    {
+      name: 'Night Owl',
+      baseTheme: 'dark',
+      styleContent: nightOwlStyleContent,
+    },
+    {
+      name: 'Red',
+      baseTheme: 'dark',
+      styleContent: redStyleContent,
+    },
+    {
+      name: 'Solarized Dark',
+      baseTheme: 'dark',
+      styleContent: solarizedDarkStyleContent,
+    },
+    {
+      name: 'Solarized Light',
+      baseTheme: 'light',
+      styleContent: solarizedLightStyleContent,
+    },
+    {
+      name: "SynthWave '84",
+      baseTheme: 'dark',
+      styleContent: synthwave84StyleContent,
+    },
+    {
+      name: 'Tomorrow Night Blue',
+      baseTheme: 'dark',
+      styleContent: tomorrowNightBlueStyleContent,
+    },
+  ],
 };
 
 export default plugin;
diff --git a/plugins/theme-pack/src/js/src/intellij-dark-theme.css b/plugins/theme-pack/src/js/src/intellij-dark-theme.css
new file mode 100644
index 000000000..403dbbd89
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/intellij-dark-theme.css
@@ -0,0 +1,343 @@
+/* IntelliJ Dark Theme for Deephaven */
+/* Generated from JetBrains IntelliJ IDEA Dark theme colors */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Background (#1e1f22) at gray-100, Foreground (#bcbec3) at gray-800 */
+  --dh-color-gray-50: #131416;
+  --dh-color-gray-75: #191a1d;
+  --dh-color-gray-100: #1e1f22; /* IntelliJ editor background */
+  --dh-color-gray-200: #2b2d30; /* IntelliJ sidebar/panel background */
+  --dh-color-gray-300: #393b40;
+  --dh-color-gray-400: #4f5156;
+  --dh-color-gray-500: #6f737a;
+  --dh-color-gray-600: #868a91;
+  --dh-color-gray-700: #9ea0a8;
+  --dh-color-gray-800: #bcbec3; /* IntelliJ editor foreground */
+  --dh-color-gray-900: #dfe1e5; /* IntelliJ bright foreground */
+
+  /* ============ RED PALETTE ============ */
+  /* IntelliJ Red - errors, invalid anchored at 600 */
+  --dh-color-red-100: #3d0c13;
+  --dh-color-red-200: #4f1018;
+  --dh-color-red-300: #62141e;
+  --dh-color-red-400: #7c1b27;
+  --dh-color-red-500: #9e2533;
+  --dh-color-red-600: #d64d5b; /* IntelliJ error red */
+  --dh-color-red-700: #e77380;
+  --dh-color-red-800: #f59aa3;
+  --dh-color-red-900: #ffbfc5;
+  --dh-color-red-1000: #ffdde0;
+  --dh-color-red-1100: #ffedef;
+  --dh-color-red-1200: #fff5f6;
+  --dh-color-red-1300: #fffafb;
+  --dh-color-red-1400: #fffcfc;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* IntelliJ Orange - keywords, storage anchored at 700 */
+  --dh-color-orange-100: #2d1500;
+  --dh-color-orange-200: #3d1d00;
+  --dh-color-orange-300: #4e2600;
+  --dh-color-orange-400: #653200;
+  --dh-color-orange-500: #814200;
+  --dh-color-orange-600: #a15814;
+  --dh-color-orange-700: #ce8e6d; /* IntelliJ keyword orange #CE8E6D */
+  --dh-color-orange-800: #e0a584;
+  --dh-color-orange-900: #f0be9f;
+  --dh-color-orange-1000: #fcd6bb;
+  --dh-color-orange-1100: #ffead6;
+  --dh-color-orange-1200: #fff4eb;
+  --dh-color-orange-1300: #fffaf5;
+  --dh-color-orange-1400: #fffcfa;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* IntelliJ Yellow/Gold - tags, classes anchored at 900 */
+  --dh-color-yellow-100: #2c2200;
+  --dh-color-yellow-200: #3a2d00;
+  --dh-color-yellow-300: #493900;
+  --dh-color-yellow-400: #5e4a00;
+  --dh-color-yellow-500: #786000;
+  --dh-color-yellow-600: #947a0e;
+  --dh-color-yellow-700: #b19530;
+  --dh-color-yellow-800: #c9ad51;
+  --dh-color-yellow-900: #d5b778; /* IntelliJ tags/classes #D5B778 */
+  --dh-color-yellow-1000: #e4ca97;
+  --dh-color-yellow-1100: #f0ddb5;
+  --dh-color-yellow-1200: #faedcf;
+  --dh-color-yellow-1300: #fff7e4;
+  --dh-color-yellow-1400: #fffbf1;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived - between yellow and green anchored at 900 */
+  --dh-color-chartreuse-100: #1a2100;
+  --dh-color-chartreuse-200: #242d00;
+  --dh-color-chartreuse-300: #2f3a00;
+  --dh-color-chartreuse-400: #3f4c00;
+  --dh-color-chartreuse-500: #526300;
+  --dh-color-chartreuse-600: #687b00;
+  --dh-color-chartreuse-700: #7f9500;
+  --dh-color-chartreuse-800: #96af00;
+  --dh-color-chartreuse-900: #afc926;
+  --dh-color-chartreuse-1000: #c5de5a;
+  --dh-color-chartreuse-1100: #d9f083;
+  --dh-color-chartreuse-1200: #eaffab;
+  --dh-color-chartreuse-1300: #f4ffcc;
+  --dh-color-chartreuse-1400: #faffea;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - yellowish green anchored at 900 */
+  --dh-color-celery-100: #132000;
+  --dh-color-celery-200: #1c2c00;
+  --dh-color-celery-300: #253900;
+  --dh-color-celery-400: #324b00;
+  --dh-color-celery-500: #426200;
+  --dh-color-celery-600: #557b00;
+  --dh-color-celery-700: #699500;
+  --dh-color-celery-800: #7daf00;
+  --dh-color-celery-900: #93c926;
+  --dh-color-celery-1000: #aadf5b;
+  --dh-color-celery-1100: #c0f184;
+  --dh-color-celery-1200: #d5ffac;
+  --dh-color-celery-1300: #e8ffcc;
+  --dh-color-celery-1400: #f5ffe9;
+
+  /* ============ GREEN PALETTE ============ */
+  /* IntelliJ Green - strings anchored at 700 */
+  --dh-color-green-100: #0c2a13;
+  --dh-color-green-200: #12381b;
+  --dh-color-green-300: #184723;
+  --dh-color-green-400: #205b2e;
+  --dh-color-green-500: #2c743c;
+  --dh-color-green-600: #3e8e4e;
+  --dh-color-green-700: #6aab73; /* IntelliJ string green #6AAB73 */
+  --dh-color-green-800: #8bc291;
+  --dh-color-green-900: #aad8af;
+  --dh-color-green-1000: #c7ecc9;
+  --dh-color-green-1100: #e0fbe1;
+  --dh-color-green-1200: #f0fff0;
+  --dh-color-green-1300: #f8fff8;
+  --dh-color-green-1400: #fcfffc;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived - between green and cyan anchored at 800 */
+  --dh-color-seafoam-100: #0b2820;
+  --dh-color-seafoam-200: #10362b;
+  --dh-color-seafoam-300: #164536;
+  --dh-color-seafoam-400: #1e5945;
+  --dh-color-seafoam-500: #287257;
+  --dh-color-seafoam-600: #368b6b;
+  --dh-color-seafoam-700: #47a580;
+  --dh-color-seafoam-800: #5ebf96; /* Midpoint */
+  --dh-color-seafoam-900: #7dd6ac;
+  --dh-color-seafoam-1000: #9febc3;
+  --dh-color-seafoam-1100: #c0fcd9;
+  --dh-color-seafoam-1200: #dcffec;
+  --dh-color-seafoam-1300: #eefff5;
+  --dh-color-seafoam-1400: #f8fffa;
+
+  /* ============ CYAN PALETTE ============ */
+  /* IntelliJ Cyan - numbers, constants anchored at 700 */
+  --dh-color-cyan-100: #0a2729;
+  --dh-color-cyan-200: #0f3437;
+  --dh-color-cyan-300: #144245;
+  --dh-color-cyan-400: #1b5558;
+  --dh-color-cyan-500: #246d70;
+  --dh-color-cyan-600: #308689;
+  --dh-color-cyan-700: #2cabb8; /* IntelliJ number cyan #2CABB8 */
+  --dh-color-cyan-800: #53c5d1;
+  --dh-color-cyan-900: #7bdde6;
+  --dh-color-cyan-1000: #a2f0f7;
+  --dh-color-cyan-1100: #c6faff;
+  --dh-color-cyan-1200: #e2fdff;
+  --dh-color-cyan-1300: #f2feff;
+  --dh-color-cyan-1400: #faffff;
+
+  /* ============ BLUE PALETTE ============ */
+  /* IntelliJ Blue - accent, functions, links anchored at 600 */
+  --dh-color-blue-100: #0a1a3a;
+  --dh-color-blue-200: #10244d;
+  --dh-color-blue-300: #162e61;
+  --dh-color-blue-400: #1e3d7c;
+  --dh-color-blue-500: #2a509d;
+  --dh-color-blue-600: #3574f0; /* IntelliJ button/accent blue #3574F0 */
+  --dh-color-blue-700: #538af6; /* IntelliJ hover blue */
+  --dh-color-blue-800: #6a9bfa; /* IntelliJ link blue */
+  --dh-color-blue-900: #85b0fd;
+  --dh-color-blue-1000: #a1c4ff;
+  --dh-color-blue-1100: #bed6ff;
+  --dh-color-blue-1200: #d8e7ff;
+  --dh-color-blue-1300: #ecf3ff;
+  --dh-color-blue-1400: #f8faff;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived - between blue and purple anchored at 700 */
+  --dh-color-indigo-100: #131830;
+  --dh-color-indigo-200: #1a2141;
+  --dh-color-indigo-300: #222b53;
+  --dh-color-indigo-400: #2d396b;
+  --dh-color-indigo-500: #3c4b88;
+  --dh-color-indigo-600: #4e5fa5;
+  --dh-color-indigo-700: #6274c2;
+  --dh-color-indigo-800: #798bdd;
+  --dh-color-indigo-900: #92a3f4;
+  --dh-color-indigo-1000: #abbcff;
+  --dh-color-indigo-1100: #c5d2ff;
+  --dh-color-indigo-1200: #dde5ff;
+  --dh-color-indigo-1300: #eff3ff;
+  --dh-color-indigo-1400: #f9faff;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* IntelliJ Purple/Magenta - properties, objects anchored at 700 */
+  --dh-color-purple-100: #2a1329;
+  --dh-color-purple-200: #381a38;
+  --dh-color-purple-300: #472147;
+  --dh-color-purple-400: #5b2b5b;
+  --dh-color-purple-500: #743972;
+  --dh-color-purple-600: #8e4b8a;
+  --dh-color-purple-700: #c77dbb; /* IntelliJ property purple #C77DBB */
+  --dh-color-purple-800: #d899cf;
+  --dh-color-purple-900: #e7b5e1;
+  --dh-color-purple-1000: #f3d0f0;
+  --dh-color-purple-1100: #fce6fb;
+  --dh-color-purple-1200: #fff3ff;
+  --dh-color-purple-1300: #fff9ff;
+  --dh-color-purple-1400: #fffdff;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Derived - pink-magenta anchored at 700 */
+  --dh-color-fuchsia-100: #2e0f25;
+  --dh-color-fuchsia-200: #3e1532;
+  --dh-color-fuchsia-300: #4f1c40;
+  --dh-color-fuchsia-400: #652552;
+  --dh-color-fuchsia-500: #803268;
+  --dh-color-fuchsia-600: #9c4280;
+  --dh-color-fuchsia-700: #ba5698;
+  --dh-color-fuchsia-800: #d56eb0;
+  --dh-color-fuchsia-900: #eb89c8;
+  --dh-color-fuchsia-1000: #fba6de;
+  --dh-color-fuchsia-1100: #ffc5ef;
+  --dh-color-fuchsia-1200: #ffdff8;
+  --dh-color-fuchsia-1300: #fff2fc;
+  --dh-color-fuchsia-1400: #fffafe;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Derived - red-magenta anchored at 700 */
+  --dh-color-magenta-100: #300e1c;
+  --dh-color-magenta-200: #401427;
+  --dh-color-magenta-300: #511b32;
+  --dh-color-magenta-400: #682441;
+  --dh-color-magenta-500: #843154;
+  --dh-color-magenta-600: #a14068;
+  --dh-color-magenta-700: #bf527e;
+  --dh-color-magenta-800: #da6996;
+  --dh-color-magenta-900: #f083ae;
+  --dh-color-magenta-1000: #ffa0c5;
+  --dh-color-magenta-1100: #ffc0da;
+  --dh-color-magenta-1200: #ffdcec;
+  --dh-color-magenta-1300: #fff2f8;
+  --dh-color-magenta-1400: #fffafb;
+
+  /* ============ SEMANTIC - ACCENT (Blue) ============ */
+  /* IntelliJ uses blue as primary accent */
+  --dh-color-accent-100: var(--dh-color-blue-100);
+  --dh-color-accent-200: var(--dh-color-blue-200);
+  --dh-color-accent-300: var(--dh-color-blue-300);
+  --dh-color-accent-400: var(--dh-color-blue-400);
+  --dh-color-accent-500: var(--dh-color-blue-500);
+  --dh-color-accent-600: var(--dh-color-blue-600);
+  --dh-color-accent-700: var(--dh-color-blue-700);
+  --dh-color-accent-800: var(--dh-color-blue-800);
+  --dh-color-accent-900: var(--dh-color-blue-900);
+  --dh-color-accent-1000: var(--dh-color-blue-1000);
+  --dh-color-accent-1100: var(--dh-color-blue-1100);
+  --dh-color-accent-1200: var(--dh-color-blue-1200);
+  --dh-color-accent-1300: var(--dh-color-blue-1300);
+  --dh-color-accent-1400: var(--dh-color-blue-1400);
+
+  /* ============ SEMANTIC - VISUAL COLORS ============ */
+  --dh-color-visual-positive: var(--dh-color-green-700);
+  --dh-color-visual-negative: var(--dh-color-red-600);
+  --dh-color-visual-yellow: var(--dh-color-yellow-900);
+  --dh-color-visual-orange: var(--dh-color-orange-700);
+  --dh-color-visual-green: var(--dh-color-green-700);
+  --dh-color-visual-cyan: var(--dh-color-cyan-700);
+  --dh-color-visual-blue: var(--dh-color-blue-700);
+  --dh-color-visual-purple: var(--dh-color-purple-700);
+  --dh-color-visual-red: var(--dh-color-red-600);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using IntelliJ background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using IntelliJ palette colors */
+  --dh-color-chart-colorway: var(--dh-color-blue-600) var(--dh-color-orange-700)
+    var(--dh-color-green-700) var(--dh-color-cyan-700)
+    var(--dh-color-purple-700) var(--dh-color-yellow-900)
+    var(--dh-color-red-600) var(--dh-color-fuchsia-700)
+    var(--dh-color-indigo-700) var(--dh-color-seafoam-800);
+
+  /* ============ EDITOR SEMANTIC - INTELLIJ SYNTAX ============ */
+  /* Based on IntelliJ IDEA Dark theme token colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-100);
+  --dh-color-editor-fg: var(--dh-color-gray-800);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-75);
+  --dh-color-editor-selection-bg: var(--dh-color-blue-400);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-blue-300);
+
+  /* Code syntax highlighting per IntelliJ spec */
+  --dh-color-editor-comment: var(
+    --dh-color-gray-500
+  ); /* Comments - #7A7E85 grayish */
+  --dh-color-editor-keyword: var(
+    --dh-color-orange-700
+  ); /* Keywords - #CE8E6D orange */
+  --dh-color-editor-storage: var(
+    --dh-color-orange-700
+  ); /* Storage types - orange */
+  --dh-color-editor-number: var(
+    --dh-color-cyan-700
+  ); /* Numbers - #2CABB8 cyan */
+  --dh-color-editor-string: var(
+    --dh-color-green-700
+  ); /* Strings - #6AAB73 green */
+  --dh-color-editor-string-delim: var(
+    --dh-color-green-700
+  ); /* String delimiters - green */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-800
+  ); /* Default identifiers */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-blue-700
+  ); /* Functions - #57A8F5 blue */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-purple-700
+  ); /* Classes - #C77DBB purple */
+  --dh-color-editor-predefined: var(
+    --dh-color-cyan-700
+  ); /* Predefined/support - cyan */
+  --dh-color-editor-operator: var(
+    --dh-color-gray-800
+  ); /* Operators - default fg */
+  --dh-color-editor-delimiter: var(--dh-color-gray-700); /* Delimiters */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-600
+  ); /* Errors - #F75464 red */
+
+  /* Bracket colors - IntelliJ style */
+  --dh-color-editor-bracket-fg1: var(--dh-color-yellow-900); /* Gold */
+  --dh-color-editor-bracket-fg2: var(--dh-color-purple-700); /* Purple */
+  --dh-color-editor-bracket-fg3: var(--dh-color-cyan-700); /* Cyan */
+  --dh-color-editor-bracket-fg4: var(--dh-color-yellow-900); /* Gold */
+  --dh-color-editor-bracket-fg5: var(--dh-color-purple-700); /* Purple */
+  --dh-color-editor-bracket-fg6: var(--dh-color-cyan-700); /* Cyan */
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-600); /* Red */
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-400); /* #4b5059 dim */
+  --dh-color-editor-line-number-active-fg: var(
+    --dh-color-gray-700
+  ); /* #9ea0a8 active */
+}
diff --git a/plugins/theme-pack/src/js/src/intellij-light-theme.css b/plugins/theme-pack/src/js/src/intellij-light-theme.css
new file mode 100644
index 000000000..fa3d10d8d
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/intellij-light-theme.css
@@ -0,0 +1,354 @@
+/* IntelliJ Light Theme for Deephaven */
+/* Generated from JetBrains IntelliJ IDEA Light theme colors */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Light theme: gray-50 (#ffffff) is lightest, gray-900 (#000000) is darkest */
+  /* Anchors: editor.background #ffffff, sideBar.background #f7f8fa, foreground #000000 */
+  --dh-color-gray-50: #ffffff;
+  --dh-color-gray-75: #fcfcfd;
+  --dh-color-gray-100: #f7f8fa; /* IntelliJ sidebar/panel background */
+  --dh-color-gray-200: #ebecf0; /* IntelliJ borders */
+  --dh-color-gray-300: #d9dbe0;
+  --dh-color-gray-400: #b9beca;
+  --dh-color-gray-500: #aeb3c2;
+  --dh-color-gray-600: #8e939f;
+  --dh-color-gray-700: #767a8a; /* Line numbers active */
+  --dh-color-gray-800: #4a4d57;
+  --dh-color-gray-900: #000000; /* IntelliJ foreground */
+
+  /* ============ RED PALETTE ============ */
+  /* IntelliJ Red (#d70000) - errors, terminal red anchored at 800 */
+  --dh-color-red-100: #fff0f0;
+  --dh-color-red-200: #ffe2e2;
+  --dh-color-red-300: #ffcdcd;
+  --dh-color-red-400: #ffb0b0;
+  --dh-color-red-500: #ff8888;
+  --dh-color-red-600: #ff5555;
+  --dh-color-red-700: #f02828;
+  --dh-color-red-800: #d70000; /* Terminal red */
+  --dh-color-red-900: #b50000;
+  --dh-color-red-1000: #960000;
+  --dh-color-red-1100: #780000;
+  --dh-color-red-1200: #5c0000;
+  --dh-color-red-1300: #420000;
+  --dh-color-red-1400: #2a0000;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* IntelliJ Orange/Brown (#AB6526) - constants, numbers anchored at 700 */
+  --dh-color-orange-100: #fff5eb;
+  --dh-color-orange-200: #ffebd8;
+  --dh-color-orange-300: #ffdcbf;
+  --dh-color-orange-400: #ffc89f;
+  --dh-color-orange-500: #e9a872;
+  --dh-color-orange-600: #cf8a4c;
+  --dh-color-orange-700: #ab6526; /* Constants/numbers */
+  --dh-color-orange-800: #8f4f12;
+  --dh-color-orange-900: #763c00;
+  --dh-color-orange-1000: #5f2e00;
+  --dh-color-orange-1100: #492200;
+  --dh-color-orange-1200: #361700;
+  --dh-color-orange-1300: #250f00;
+  --dh-color-orange-1400: #160800;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* IntelliJ Yellow (#af8700) - terminal yellow anchored at 700 */
+  --dh-color-yellow-100: #fff9e5;
+  --dh-color-yellow-200: #fff3cc;
+  --dh-color-yellow-300: #ffe8a8;
+  --dh-color-yellow-400: #ffd97f;
+  --dh-color-yellow-500: #e8be50;
+  --dh-color-yellow-600: #cca228;
+  --dh-color-yellow-700: #af8700; /* Terminal yellow */
+  --dh-color-yellow-800: #926e00;
+  --dh-color-yellow-900: #785800;
+  --dh-color-yellow-1000: #604500;
+  --dh-color-yellow-1100: #4a3400;
+  --dh-color-yellow-1200: #372600;
+  --dh-color-yellow-1300: #261a00;
+  --dh-color-yellow-1400: #170f00;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived - between yellow and green anchored at 700 */
+  --dh-color-chartreuse-100: #f3fce6;
+  --dh-color-chartreuse-200: #e6f8cc;
+  --dh-color-chartreuse-300: #d4f0a8;
+  --dh-color-chartreuse-400: #bee47f;
+  --dh-color-chartreuse-500: #a4d352;
+  --dh-color-chartreuse-600: #87be28;
+  --dh-color-chartreuse-700: #6ba800;
+  --dh-color-chartreuse-800: #568c00;
+  --dh-color-chartreuse-900: #447200;
+  --dh-color-chartreuse-1000: #345a00;
+  --dh-color-chartreuse-1100: #264400;
+  --dh-color-chartreuse-1200: #1b3200;
+  --dh-color-chartreuse-1300: #122200;
+  --dh-color-chartreuse-1400: #0a1300;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - between chartreuse and green anchored at 700 */
+  --dh-color-celery-100: #f1fce6;
+  --dh-color-celery-200: #e3f9cc;
+  --dh-color-celery-300: #cff1a8;
+  --dh-color-celery-400: #b7e57f;
+  --dh-color-celery-500: #9bd552;
+  --dh-color-celery-600: #7cc028;
+  --dh-color-celery-700: #5fa800;
+  --dh-color-celery-800: #4c8c00;
+  --dh-color-celery-900: #3c7200;
+  --dh-color-celery-1000: #2e5a00;
+  --dh-color-celery-1100: #224400;
+  --dh-color-celery-1200: #183200;
+  --dh-color-celery-1300: #102200;
+  --dh-color-celery-1400: #081300;
+
+  /* ============ GREEN PALETTE ============ */
+  /* IntelliJ Green (#008800) - strings anchored at 700 */
+  --dh-color-green-100: #e8fee8;
+  --dh-color-green-200: #d0fdd0;
+  --dh-color-green-300: #b0f8b0;
+  --dh-color-green-400: #88ef88;
+  --dh-color-green-500: #58e058;
+  --dh-color-green-600: #2cc82c;
+  --dh-color-green-700: #008800; /* String green */
+  --dh-color-green-800: #007000;
+  --dh-color-green-900: #005a00;
+  --dh-color-green-1000: #004800;
+  --dh-color-green-1100: #003600;
+  --dh-color-green-1200: #002700;
+  --dh-color-green-1300: #001a00;
+  --dh-color-green-1400: #000f00;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived - between green and cyan anchored at 700 */
+  --dh-color-seafoam-100: #e6fef5;
+  --dh-color-seafoam-200: #ccfdea;
+  --dh-color-seafoam-300: #a8f8da;
+  --dh-color-seafoam-400: #7fefca;
+  --dh-color-seafoam-500: #52e2b5;
+  --dh-color-seafoam-600: #28d0a0;
+  --dh-color-seafoam-700: #00b888;
+  --dh-color-seafoam-800: #009a70;
+  --dh-color-seafoam-900: #007e5a;
+  --dh-color-seafoam-1000: #006448;
+  --dh-color-seafoam-1100: #004c36;
+  --dh-color-seafoam-1200: #003828;
+  --dh-color-seafoam-1300: #00261a;
+  --dh-color-seafoam-1400: #00160f;
+
+  /* ============ CYAN PALETTE ============ */
+  /* IntelliJ Cyan (#00afaf) - terminal cyan anchored at 700 */
+  --dh-color-cyan-100: #e5fefe;
+  --dh-color-cyan-200: #ccfcfc;
+  --dh-color-cyan-300: #a8f6f6;
+  --dh-color-cyan-400: #7fedec;
+  --dh-color-cyan-500: #52e0de;
+  --dh-color-cyan-600: #28ceca;
+  --dh-color-cyan-700: #00afaf; /* Terminal cyan */
+  --dh-color-cyan-800: #009292;
+  --dh-color-cyan-900: #007878;
+  --dh-color-cyan-1000: #006060;
+  --dh-color-cyan-1100: #004a4a;
+  --dh-color-cyan-1200: #003636;
+  --dh-color-cyan-1300: #002525;
+  --dh-color-cyan-1400: #001616;
+
+  /* ============ BLUE PALETTE ============ */
+  /* IntelliJ Blue (#3369d6) - accent, links anchored at 700 */
+  --dh-color-blue-100: #e8f0ff;
+  --dh-color-blue-200: #d2e2ff;
+  --dh-color-blue-300: #b5cfff;
+  --dh-color-blue-400: #94b8ff;
+  --dh-color-blue-500: #6e9cf5;
+  --dh-color-blue-600: #4d82e8;
+  --dh-color-blue-700: #3369d6; /* Accent blue */
+  --dh-color-blue-800: #1c53b8;
+  --dh-color-blue-900: #0a4098;
+  --dh-color-blue-1000: #00307c;
+  --dh-color-blue-1100: #002262;
+  --dh-color-blue-1200: #00164a;
+  --dh-color-blue-1300: #000d34;
+  --dh-color-blue-1400: #000620;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived - between blue and purple, used for tags (#1C4C8F) anchored at 800 */
+  --dh-color-indigo-100: #ebeeff;
+  --dh-color-indigo-200: #d7dfff;
+  --dh-color-indigo-300: #c0ccff;
+  --dh-color-indigo-400: #a4b6f8;
+  --dh-color-indigo-500: #869dee;
+  --dh-color-indigo-600: #6882df;
+  --dh-color-indigo-700: #4a68cc;
+  --dh-color-indigo-800: #1c4c8f; /* HTML tags */
+  --dh-color-indigo-900: #0a3a75;
+  --dh-color-indigo-1000: #002a5e;
+  --dh-color-indigo-1100: #001d48;
+  --dh-color-indigo-1200: #001335;
+  --dh-color-indigo-1300: #000b24;
+  --dh-color-indigo-1400: #000515;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* IntelliJ Purple (#880088) - variables anchored at 700 */
+  --dh-color-purple-100: #fee8fe;
+  --dh-color-purple-200: #fcd0fc;
+  --dh-color-purple-300: #f7b0f7;
+  --dh-color-purple-400: #ef88ef;
+  --dh-color-purple-500: #e358e3;
+  --dh-color-purple-600: #d22cd2;
+  --dh-color-purple-700: #880088; /* Variables */
+  --dh-color-purple-800: #700070;
+  --dh-color-purple-900: #5a005a;
+  --dh-color-purple-1000: #480048;
+  --dh-color-purple-1100: #360036;
+  --dh-color-purple-1200: #270027;
+  --dh-color-purple-1300: #1a001a;
+  --dh-color-purple-1400: #0f000f;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Derived - CSS selectors (#7A3E9D) anchored at 700 */
+  --dh-color-fuchsia-100: #f8e8ff;
+  --dh-color-fuchsia-200: #f0d0ff;
+  --dh-color-fuchsia-300: #e4b2ff;
+  --dh-color-fuchsia-400: #d590f8;
+  --dh-color-fuchsia-500: #c26aeb;
+  --dh-color-fuchsia-600: #ab48d8;
+  --dh-color-fuchsia-700: #7a3e9d; /* CSS selectors */
+  --dh-color-fuchsia-800: #622c82;
+  --dh-color-fuchsia-900: #4d1d6a;
+  --dh-color-fuchsia-1000: #3b1055;
+  --dh-color-fuchsia-1100: #2b0741;
+  --dh-color-fuchsia-1200: #1e0230;
+  --dh-color-fuchsia-1300: #130020;
+  --dh-color-fuchsia-1400: #0a0012;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* IntelliJ Magenta (#af005f) - terminal magenta anchored at 700 */
+  --dh-color-magenta-100: #ffe8f2;
+  --dh-color-magenta-200: #ffd0e5;
+  --dh-color-magenta-300: #ffb0d2;
+  --dh-color-magenta-400: #ff88bb;
+  --dh-color-magenta-500: #f55899;
+  --dh-color-magenta-600: #e02878;
+  --dh-color-magenta-700: #af005f; /* Terminal magenta */
+  --dh-color-magenta-800: #92004d;
+  --dh-color-magenta-900: #78003d;
+  --dh-color-magenta-1000: #600030;
+  --dh-color-magenta-1100: #4a0024;
+  --dh-color-magenta-1200: #36001a;
+  --dh-color-magenta-1300: #250011;
+  --dh-color-magenta-1400: #16000a;
+
+  /* ============ SEMANTIC - ACCENT (Blue) ============ */
+  /* IntelliJ uses blue as primary accent */
+  --dh-color-accent-100: var(--dh-color-blue-100);
+  --dh-color-accent-200: var(--dh-color-blue-200);
+  --dh-color-accent-300: var(--dh-color-blue-300);
+  --dh-color-accent-400: var(--dh-color-blue-400);
+  --dh-color-accent-500: var(--dh-color-blue-500);
+  --dh-color-accent-600: var(--dh-color-blue-600);
+  --dh-color-accent-700: var(--dh-color-blue-700);
+  --dh-color-accent-800: var(--dh-color-blue-800);
+  --dh-color-accent-900: var(--dh-color-blue-900);
+  --dh-color-accent-1000: var(--dh-color-blue-1000);
+  --dh-color-accent-1100: var(--dh-color-blue-1100);
+  --dh-color-accent-1200: var(--dh-color-blue-1200);
+  --dh-color-accent-1300: var(--dh-color-blue-1300);
+  --dh-color-accent-1400: var(--dh-color-blue-1400);
+
+  /* Accent semantic - adjusted for blue-700 as primary accent */
+  --dh-color-accent: var(--dh-color-blue-700);
+  --dh-color-accent-bg: var(--dh-color-blue-700);
+  --dh-color-accent-hover-bg: var(--dh-color-blue-800);
+  --dh-color-accent-down-bg: var(--dh-color-blue-600);
+  --dh-color-accent-key-focus-bg: var(--dh-color-blue-800);
+  --dh-color-accent-contrast: var(--dh-color-gray-50);
+
+  /* ============ SEMANTIC - VISUAL COLORS ============ */
+  --dh-color-visual-positive: var(--dh-color-green-700);
+  --dh-color-visual-negative: var(--dh-color-red-800);
+  --dh-color-visual-yellow: var(--dh-color-yellow-700);
+  --dh-color-visual-orange: var(--dh-color-orange-700);
+  --dh-color-visual-green: var(--dh-color-green-700);
+  --dh-color-visual-cyan: var(--dh-color-cyan-700);
+  --dh-color-visual-blue: var(--dh-color-blue-700);
+  --dh-color-visual-purple: var(--dh-color-purple-700);
+  --dh-color-visual-red: var(--dh-color-red-800);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using IntelliJ Light background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-50);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using IntelliJ palette colors */
+  --dh-color-chart-colorway: var(--dh-color-blue-700) var(--dh-color-orange-700)
+    var(--dh-color-green-700) var(--dh-color-cyan-700)
+    var(--dh-color-purple-700) var(--dh-color-yellow-700)
+    var(--dh-color-red-800) var(--dh-color-fuchsia-700)
+    var(--dh-color-indigo-700) var(--dh-color-seafoam-700);
+
+  /* ============ EDITOR SEMANTIC - INTELLIJ LIGHT SYNTAX ============ */
+  /* Based on IntelliJ IDEA Light theme token colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-50);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-blue-100);
+  --dh-color-editor-selection-bg: var(--dh-color-blue-200);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-blue-100);
+
+  /* Code syntax highlighting per IntelliJ Light spec */
+  --dh-color-editor-comment: var(
+    --dh-color-gray-500
+  ); /* Comments - #AAAAAA grayish */
+  --dh-color-editor-keyword: var(
+    --dh-color-indigo-1100
+  ); /* Keywords - #000088 dark blue (bold) */
+  --dh-color-editor-storage: var(
+    --dh-color-indigo-1000
+  ); /* Storage types - dark blue */
+  --dh-color-editor-number: var(
+    --dh-color-orange-700
+  ); /* Numbers - #AB6526 orange/brown */
+  --dh-color-editor-string: var(
+    --dh-color-green-800
+  ); /* Strings - #008800 green (bold) */
+  --dh-color-editor-string-delim: var(
+    --dh-color-green-700
+  ); /* String delimiters - green */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-900
+  ); /* Default identifiers - black */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-fuchsia-700
+  ); /* Functions - #862F95 purple */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-gray-900
+  ); /* Classes - black */
+  --dh-color-editor-predefined: var(
+    --dh-color-gray-900
+  ); /* Predefined/support - black */
+  --dh-color-editor-operator: var(
+    --dh-color-gray-700
+  ); /* Operators - #777777 gray */
+  --dh-color-editor-delimiter: var(
+    --dh-color-gray-700
+  ); /* Delimiters - #777777 gray */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-700
+  ); /* Errors - #FF0000 red */
+
+  /* Bracket colors - IntelliJ Light style */
+  --dh-color-editor-bracket-fg1: var(--dh-color-indigo-800); /* Dark blue */
+  --dh-color-editor-bracket-fg2: var(--dh-color-green-800); /* Dark green */
+  --dh-color-editor-bracket-fg3: var(--dh-color-orange-800); /* Brown */
+  --dh-color-editor-bracket-fg4: var(--dh-color-indigo-800); /* Dark blue */
+  --dh-color-editor-bracket-fg5: var(--dh-color-green-800); /* Dark green */
+  --dh-color-editor-bracket-fg6: var(--dh-color-orange-800); /* Brown */
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-700); /* Red */
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-400); /* #b9beca dim */
+  --dh-color-editor-line-number-active-fg: var(
+    --dh-color-gray-700
+  ); /* #767a8a active */
+}
diff --git a/plugins/theme-pack/src/js/src/kimbie-dark-theme.css b/plugins/theme-pack/src/js/src/kimbie-dark-theme.css
new file mode 100644
index 000000000..c50382605
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/kimbie-dark-theme.css
@@ -0,0 +1,300 @@
+/* Kimbie Dark Theme - Warm earthy dark theme */
+/* Auto-generated from VS Code Kimbie Dark theme */
+
+:root {
+  /* Gray palette */
+  --dh-color-gray-50: #131510;
+  --dh-color-gray-75: #1c1710;
+  --dh-color-gray-100: #221a0f;
+  --dh-color-gray-200: #362712;
+  --dh-color-gray-300: #423523;
+  --dh-color-gray-400: #51412c;
+  --dh-color-gray-500: #7c5021;
+  --dh-color-gray-600: #91673a;
+  --dh-color-gray-700: #a57a4c;
+  --dh-color-gray-800: #bd966c;
+  --dh-color-gray-900: #d3af86;
+
+  /* Red palette - anchored at 700 for #DC3958 */
+  --dh-color-red-100: #320005;
+  --dh-color-red-200: #46000c;
+  --dh-color-red-300: #5c0014;
+  --dh-color-red-400: #7a0020;
+  --dh-color-red-500: #9c0030;
+  --dh-color-red-600: #bc2044;
+  --dh-color-red-700: #dc3958;
+  --dh-color-red-800: #f9566f;
+  --dh-color-red-900: #ff7d8d;
+  --dh-color-red-1000: #ffa0a9;
+  --dh-color-red-1100: #ffc0c4;
+  --dh-color-red-1200: #ffd8db;
+  --dh-color-red-1300: #ffebec;
+  --dh-color-red-1400: #fff0f1;
+
+  /* Orange palette - anchored at 900 for #F79A32 */
+  --dh-color-orange-100: #280c00;
+  --dh-color-orange-200: #381500;
+  --dh-color-orange-300: #4a2000;
+  --dh-color-orange-400: #632f00;
+  --dh-color-orange-500: #814100;
+  --dh-color-orange-600: #a15400;
+  --dh-color-orange-700: #c16800;
+  --dh-color-orange-800: #dc8100;
+  --dh-color-orange-900: #f79a32;
+  --dh-color-orange-1000: #ffaf53;
+  --dh-color-orange-1100: #ffca8d;
+  --dh-color-orange-1200: #ffe0b8;
+  --dh-color-orange-1300: #fff1d9;
+  --dh-color-orange-1400: #fff3dc;
+
+  /* Yellow palette */
+  --dh-color-yellow-100: #211500;
+  --dh-color-yellow-200: #2f2100;
+  --dh-color-yellow-300: #3e2d00;
+  --dh-color-yellow-400: #543e00;
+  --dh-color-yellow-500: #6d5300;
+  --dh-color-yellow-600: #886900;
+  --dh-color-yellow-700: #a48000;
+  --dh-color-yellow-800: #c19800;
+  --dh-color-yellow-900: #ddb100;
+  --dh-color-yellow-1000: #f1c40f;
+  --dh-color-yellow-1100: #ffd961;
+  --dh-color-yellow-1200: #ffeb8d;
+  --dh-color-yellow-1300: #fff8b7;
+  --dh-color-yellow-1400: #fff8d2;
+
+  /* Chartreuse palette */
+  --dh-color-chartreuse-100: #171a00;
+  --dh-color-chartreuse-200: #222700;
+  --dh-color-chartreuse-300: #2f3400;
+  --dh-color-chartreuse-400: #404700;
+  --dh-color-chartreuse-500: #565e00;
+  --dh-color-chartreuse-600: #6c7600;
+  --dh-color-chartreuse-700: #838f00;
+  --dh-color-chartreuse-800: #9ba900;
+  --dh-color-chartreuse-900: #b3c200;
+  --dh-color-chartreuse-1000: #c6d631;
+  --dh-color-chartreuse-1100: #d9e96c;
+  --dh-color-chartreuse-1200: #eaf895;
+  --dh-color-chartreuse-1300: #f6ffbc;
+  --dh-color-chartreuse-1400: #f7fdd5;
+
+  /* Celery palette */
+  --dh-color-celery-100: #040600;
+  --dh-color-celery-200: #0c1000;
+  --dh-color-celery-300: #171c00;
+  --dh-color-celery-400: #272e00;
+  --dh-color-celery-500: #3a4400;
+  --dh-color-celery-600: #4e5b00;
+  --dh-color-celery-700: #647300;
+  --dh-color-celery-800: #7a8c00;
+  --dh-color-celery-900: #92a504;
+  --dh-color-celery-1000: #a4b82d;
+  --dh-color-celery-1100: #b7ca5f;
+  --dh-color-celery-1200: #c8d984;
+  --dh-color-celery-1300: #d7e3a8;
+  --dh-color-celery-1400: #e2eac7;
+
+  /* Green palette - anchored at 800 for #889B4A */
+  --dh-color-green-100: #0c1100;
+  --dh-color-green-200: #161e00;
+  --dh-color-green-300: #212a00;
+  --dh-color-green-400: #313d00;
+  --dh-color-green-500: #455302;
+  --dh-color-green-600: #5a6b1c;
+  --dh-color-green-700: #718331;
+  --dh-color-green-800: #889b4a;
+  --dh-color-green-900: #a0b463;
+  --dh-color-green-1000: #b3c77a;
+  --dh-color-green-1100: #c7d994;
+  --dh-color-green-1200: #d9e8af;
+  --dh-color-green-1300: #e8f3cb;
+  --dh-color-green-1400: #f4fbe3;
+
+  /* Seafoam palette */
+  --dh-color-seafoam-100: #011c14;
+  --dh-color-seafoam-200: #05291f;
+  --dh-color-seafoam-300: #0a362b;
+  --dh-color-seafoam-400: #174a3c;
+  --dh-color-seafoam-500: #286251;
+  --dh-color-seafoam-600: #3d7967;
+  --dh-color-seafoam-700: #52927e;
+  --dh-color-seafoam-800: #6aab96;
+  --dh-color-seafoam-900: #83c4af;
+  --dh-color-seafoam-1000: #99d7c2;
+  --dh-color-seafoam-1100: #b1e9d6;
+  --dh-color-seafoam-1200: #caf8e7;
+  --dh-color-seafoam-1300: #e1fff5;
+  --dh-color-seafoam-1400: #eafef7;
+
+  /* Cyan palette - anchored at 900 for #8AB1B0 */
+  --dh-color-cyan-100: #031010;
+  --dh-color-cyan-200: #091c1c;
+  --dh-color-cyan-300: #122929;
+  --dh-color-cyan-400: #203b3b;
+  --dh-color-cyan-500: #315151;
+  --dh-color-cyan-600: #456868;
+  --dh-color-cyan-700: #5a807f;
+  --dh-color-cyan-800: #729897;
+  --dh-color-cyan-900: #8ab1b0;
+  --dh-color-cyan-1000: #9ec4c3;
+  --dh-color-cyan-1100: #b4d6d5;
+  --dh-color-cyan-1200: #c9e5e4;
+  --dh-color-cyan-1300: #ddf0f0;
+  --dh-color-cyan-1400: #edf9f8;
+
+  /* Blue palette - anchored at 800 for #6796E6 */
+  --dh-color-blue-100: #02112f;
+  --dh-color-blue-200: #061c42;
+  --dh-color-blue-300: #0c2756;
+  --dh-color-blue-400: #193971;
+  --dh-color-blue-500: #294f90;
+  --dh-color-blue-600: #3c66ad;
+  --dh-color-blue-700: #507dcb;
+  --dh-color-blue-800: #6796e6;
+  --dh-color-blue-900: #7fafff;
+  --dh-color-blue-1000: #97c3ff;
+  --dh-color-blue-1100: #b7d7ff;
+  --dh-color-blue-1200: #d1e7ff;
+  --dh-color-blue-1300: #e5f4ff;
+  --dh-color-blue-1400: #edf9ff;
+
+  /* Indigo palette */
+  --dh-color-indigo-100: #060720;
+  --dh-color-indigo-200: #0e1131;
+  --dh-color-indigo-300: #181c43;
+  --dh-color-indigo-400: #272d5c;
+  --dh-color-indigo-500: #394179;
+  --dh-color-indigo-600: #4d5795;
+  --dh-color-indigo-700: #626eb1;
+  --dh-color-indigo-800: #7986cb;
+  --dh-color-indigo-900: #919fe6;
+  --dh-color-indigo-1000: #a4b2f7;
+  --dh-color-indigo-1100: #b8c6ff;
+  --dh-color-indigo-1200: #cbd7ff;
+  --dh-color-indigo-1300: #dce5ff;
+  --dh-color-indigo-1400: #ebf0ff;
+
+  /* Purple palette - anchored at 800 for #B267E6 */
+  --dh-color-purple-100: #19002b;
+  --dh-color-purple-200: #28003f;
+  --dh-color-purple-300: #370053;
+  --dh-color-purple-400: #4d0d6f;
+  --dh-color-purple-500: #66218f;
+  --dh-color-purple-600: #7f37ad;
+  --dh-color-purple-700: #994ecb;
+  --dh-color-purple-800: #b267e6;
+  --dh-color-purple-900: #cc80ff;
+  --dh-color-purple-1000: #db99ff;
+  --dh-color-purple-1100: #e7b7ff;
+  --dh-color-purple-1200: #f1ceff;
+  --dh-color-purple-1300: #f9e0ff;
+  --dh-color-purple-1400: #fef;
+
+  /* Fuchsia palette */
+  --dh-color-fuchsia-100: #32032d;
+  --dh-color-fuchsia-200: #44063e;
+  --dh-color-fuchsia-300: #570c4f;
+  --dh-color-fuchsia-400: #711a67;
+  --dh-color-fuchsia-500: #8f2b83;
+  --dh-color-fuchsia-600: #ac409d;
+  --dh-color-fuchsia-700: #c956b9;
+  --dh-color-fuchsia-800: #e46fd3;
+  --dh-color-fuchsia-900: #ff89ee;
+  --dh-color-fuchsia-1000: #ffa6fa;
+  --dh-color-fuchsia-1100: #ffc9ff;
+  --dh-color-fuchsia-1200: #ffe5ff;
+  --dh-color-fuchsia-1300: #fef;
+  --dh-color-fuchsia-1400: #fef;
+
+  /* Magenta palette - anchored at 700 for #98676A (Kimbie's rose) */
+  --dh-color-magenta-100: #180708;
+  --dh-color-magenta-200: #261012;
+  --dh-color-magenta-300: #351a1c;
+  --dh-color-magenta-400: #4b292c;
+  --dh-color-magenta-500: #653c3f;
+  --dh-color-magenta-600: #7e5154;
+  --dh-color-magenta-700: #98676a;
+  --dh-color-magenta-800: #b17e81;
+  --dh-color-magenta-900: #cb9799;
+  --dh-color-magenta-1000: #ddaaad;
+  --dh-color-magenta-1100: #eebfc1;
+  --dh-color-magenta-1200: #f9d2d3;
+  --dh-color-magenta-1300: #ffe2e3;
+  --dh-color-magenta-1400: #ffeff0;
+
+  /* Accent colors - using orange for warm Kimbie theme */
+  --dh-color-accent-100: var(--dh-color-orange-100);
+  --dh-color-accent-200: var(--dh-color-orange-200);
+  --dh-color-accent-300: var(--dh-color-orange-300);
+  --dh-color-accent-400: var(--dh-color-orange-400);
+  --dh-color-accent-500: var(--dh-color-orange-500);
+  --dh-color-accent-600: var(--dh-color-orange-600);
+  --dh-color-accent-700: var(--dh-color-orange-700);
+  --dh-color-accent-800: var(--dh-color-orange-800);
+  --dh-color-accent-900: var(--dh-color-orange-900);
+  --dh-color-accent-1000: var(--dh-color-orange-1000);
+  --dh-color-accent-1100: var(--dh-color-orange-1100);
+  --dh-color-accent-1200: var(--dh-color-orange-1200);
+  --dh-color-accent-1300: var(--dh-color-orange-1300);
+  --dh-color-accent-1400: var(--dh-color-orange-1400);
+
+  /* Accent semantic - adjusted to match theme's button colors (#6e583b) */
+  --dh-color-accent: var(--dh-color-orange-600);
+  --dh-color-accent-bg: var(--dh-color-orange-600);
+  --dh-color-accent-hover-bg: var(--dh-color-orange-700);
+  --dh-color-accent-down-bg: var(--dh-color-orange-500);
+  --dh-color-accent-key-focus-bg: var(--dh-color-orange-700);
+  --dh-color-accent-contrast: var(--dh-color-gray-50);
+
+  /* Visual semantic colors - mapped to Kimbie's token colors */
+  --dh-color-visual-yellow: var(--dh-color-yellow-1000);
+  --dh-color-visual-purple: var(--dh-color-purple-800);
+  --dh-color-visual-blue: var(--dh-color-blue-800);
+  --dh-color-visual-cyan: var(--dh-color-cyan-900);
+  --dh-color-visual-green: var(--dh-color-green-800);
+  --dh-color-visual-red: var(--dh-color-red-700);
+  --dh-color-visual-orange: var(--dh-color-orange-900);
+  --dh-color-visual-positive: var(--dh-color-green-900);
+  --dh-color-visual-negative: var(--dh-color-red-700);
+
+  /* Grid semantic */
+  --dh-color-grid-date: var(--dh-color-visual-orange);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Code rules - mapped from VS Code tokenColors */
+  /* comment: #A57A4C → gray-700 (#a57a4c exact match) */
+  --dh-color-editor-comment: var(--dh-color-gray-700);
+  /* punctuation.definition.*: #D3AF86 → gray-900 (foreground) */
+  --dh-color-editor-delimiter: var(--dh-color-gray-900);
+  /* variable.other.readwrite.js: #DC3958 → red-700 */
+  --dh-color-editor-identifier-js: var(--dh-color-visual-red);
+  /* entity.name.namespace: #F06431 → orange-900 (closest) */
+  --dh-color-editor-identifier-namespace: var(--dh-color-visual-orange);
+  /* variable: #DC3958 → red-700 (#dc3958 exact match) */
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+  /* keyword: #98676A → magenta-700 (#98676a exact match) */
+  --dh-color-editor-keyword: var(--dh-color-magenta-700);
+  /* constant.numeric: #F79A32 → orange-900 (#f79a32 exact match) */
+  --dh-color-editor-number: var(--dh-color-visual-orange);
+  /* keyword.operator: #D3AF86 → gray-900 (foreground) */
+  --dh-color-editor-operator: var(--dh-color-gray-900);
+  /* entity.name.function: #8AB1B0 → cyan-900 (#8ab1b0 exact match) */
+  --dh-color-editor-predefined: var(--dh-color-visual-cyan);
+  /* storage: #98676A → magenta-700 (#98676a exact match) */
+  --dh-color-editor-storage: var(--dh-color-magenta-700);
+  /* punctuation.definition.string: #D3AF86 → gray-900 */
+  --dh-color-editor-string-delim: var(--dh-color-gray-900);
+  /* string: #889B4A → green-800 (#889b4a exact match) */
+  --dh-color-editor-string: var(--dh-color-visual-green);
+
+  /* Brackets - using theme accent colors */
+  --dh-color-editor-bracket-fg1: var(--dh-color-visual-yellow);
+  --dh-color-editor-bracket-fg2: var(--dh-color-visual-cyan);
+  --dh-color-editor-bracket-fg3: var(--dh-color-visual-purple);
+  --dh-color-editor-bracket-fg4: var(--dh-color-visual-orange);
+  --dh-color-editor-bracket-fg5: var(--dh-color-visual-cyan);
+  --dh-color-editor-bracket-fg6: var(--dh-color-visual-purple);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-visual-negative);
+}
diff --git a/plugins/theme-pack/src/js/src/night-owl-theme.css b/plugins/theme-pack/src/js/src/night-owl-theme.css
new file mode 100644
index 000000000..b06c6d67c
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/night-owl-theme.css
@@ -0,0 +1,341 @@
+/* Night Owl Theme for Deephaven */
+/* Generated from Night Owl VS Code theme */
+/* Source: https://github.com/sdras/night-owl-vscode-theme */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Background (#011627) at gray-100, Foreground (#d6deeb) at gray-900 */
+  --dh-color-gray-50: #000d1d;
+  --dh-color-gray-75: #012;
+  --dh-color-gray-100: #011627;
+  --dh-color-gray-200: #132738;
+  --dh-color-gray-300: #26384a;
+  --dh-color-gray-400: #445466;
+  --dh-color-gray-500: #637283;
+  --dh-color-gray-600: #8491a1;
+  --dh-color-gray-700: #a7b1c0;
+  --dh-color-gray-800: #c3ccda;
+  --dh-color-gray-900: #d6deeb;
+
+  /* ============ RED PALETTE ============ */
+  /* Night Owl Red - errors, warnings anchored at 600 */
+  --dh-color-red-100: #5b1a19;
+  --dh-color-red-200: #72201f;
+  --dh-color-red-300: #892525;
+  --dh-color-red-400: #a73231;
+  --dh-color-red-500: #cb4240;
+  --dh-color-red-600: #ef5350;
+  --dh-color-red-700: #ff706a;
+  --dh-color-red-800: #ffa098;
+  --dh-color-red-900: #ffc9c2;
+  --dh-color-red-1000: #ffe5e1;
+  --dh-color-red-1100: #fff1ee;
+  --dh-color-red-1200: #fff1ee;
+  --dh-color-red-1300: #fff1ee;
+  --dh-color-red-1400: #fff1ee;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* Night Owl Orange - numbers, constants anchored at 900 */
+  --dh-color-orange-100: #280200;
+  --dh-color-orange-200: #3a0700;
+  --dh-color-orange-300: #4d0f00;
+  --dh-color-orange-400: #671e04;
+  --dh-color-orange-500: #853014;
+  --dh-color-orange-600: #a24528;
+  --dh-color-orange-700: #c05b3c;
+  --dh-color-orange-800: #db7354;
+  --dh-color-orange-900: #f78c6c;
+  --dh-color-orange-1000: #ffa182;
+  --dh-color-orange-1100: #ffbea7;
+  --dh-color-orange-1200: #ffd6c5;
+  --dh-color-orange-1300: #ffe8dd;
+  --dh-color-orange-1400: #fff2e9;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* Night Owl Yellow - classes, type names anchored at 1000 */
+  --dh-color-yellow-100: #2f1c01;
+  --dh-color-yellow-200: #3f2603;
+  --dh-color-yellow-300: #4f3205;
+  --dh-color-yellow-400: #664310;
+  --dh-color-yellow-500: #81581e;
+  --dh-color-yellow-600: #9b6e33;
+  --dh-color-yellow-700: #b68647;
+  --dh-color-yellow-800: #d09e5f;
+  --dh-color-yellow-900: #ebb878;
+  --dh-color-yellow-1000: #ffcb8b;
+  --dh-color-yellow-1100: #ffe1ac;
+  --dh-color-yellow-1200: #fff4d6;
+  --dh-color-yellow-1300: #fff4d6;
+  --dh-color-yellow-1400: #fff6e3;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Night Owl Chartreuse - variables, attributes anchored at 1000 */
+  --dh-color-chartreuse-100: #1a2500;
+  --dh-color-chartreuse-200: #253200;
+  --dh-color-chartreuse-300: #304000;
+  --dh-color-chartreuse-400: #415400;
+  --dh-color-chartreuse-500: #556c00;
+  --dh-color-chartreuse-600: #6b8415;
+  --dh-color-chartreuse-700: #819d2d;
+  --dh-color-chartreuse-800: #99b64a;
+  --dh-color-chartreuse-900: #b2d064;
+  --dh-color-chartreuse-1000: #c5e478;
+  --dh-color-chartreuse-1100: #dbf69c;
+  --dh-color-chartreuse-1200: #ecffba;
+  --dh-color-chartreuse-1300: #f0ffcd;
+  --dh-color-chartreuse-1400: #f3fedf;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - between chartreuse and green anchored at 1000 */
+  --dh-color-celery-100: #0d1c00;
+  --dh-color-celery-200: #162900;
+  --dh-color-celery-300: #203700;
+  --dh-color-celery-400: #2f4b00;
+  --dh-color-celery-500: #416300;
+  --dh-color-celery-600: #557b00;
+  --dh-color-celery-700: #6b9413;
+  --dh-color-celery-800: #82ae37;
+  --dh-color-celery-900: #9ac753;
+  --dh-color-celery-1000: #addb67;
+  --dh-color-celery-1100: #c4ed8c;
+  --dh-color-celery-1200: #d9fbac;
+  --dh-color-celery-1300: #eaffcb;
+  --dh-color-celery-1400: #f0ffde;
+
+  /* ============ GREEN PALETTE ============ */
+  /* Night Owl Green - added, success anchored at 900 */
+  --dh-color-green-100: #0f2000;
+  --dh-color-green-200: #182d00;
+  --dh-color-green-300: #213b00;
+  --dh-color-green-400: #304f00;
+  --dh-color-green-500: #426700;
+  --dh-color-green-600: #568019;
+  --dh-color-green-700: #6c9930;
+  --dh-color-green-800: #84b24b;
+  --dh-color-green-900: #9ccc65;
+  --dh-color-green-1000: #b0df7d;
+  --dh-color-green-1100: #c7f19a;
+  --dh-color-green-1200: #dcffb8;
+  --dh-color-green-1300: #e9ffd0;
+  --dh-color-green-1400: #efffe1;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Night Owl Seafoam - terminal green anchored at 900 */
+  --dh-color-seafoam-100: #020;
+  --dh-color-seafoam-200: #003004;
+  --dh-color-seafoam-300: #003f0a;
+  --dh-color-seafoam-400: #005415;
+  --dh-color-seafoam-500: #006e22;
+  --dh-color-seafoam-600: #008930;
+  --dh-color-seafoam-700: #00a53e;
+  --dh-color-seafoam-800: #00c055;
+  --dh-color-seafoam-900: #22da6e;
+  --dh-color-seafoam-1000: #52ed85;
+  --dh-color-seafoam-1100: #7cfea1;
+  --dh-color-seafoam-1200: #b0ffc4;
+  --dh-color-seafoam-1300: #d8ffe1;
+  --dh-color-seafoam-1400: #dcffe4;
+
+  /* ============ CYAN PALETTE ============ */
+  /* Night Owl Cyan - operators, tags anchored at 900 */
+  --dh-color-cyan-100: #012b25;
+  --dh-color-cyan-200: #013931;
+  --dh-color-cyan-300: #01483f;
+  --dh-color-cyan-400: #0c5d52;
+  --dh-color-cyan-500: #1d7568;
+  --dh-color-cyan-600: #348e80;
+  --dh-color-cyan-700: #4aa898;
+  --dh-color-cyan-800: #65c1b1;
+  --dh-color-cyan-900: #7fdbca;
+  --dh-color-cyan-1000: #97eedd;
+  --dh-color-cyan-1100: #b3fff1;
+  --dh-color-cyan-1200: #cdfffa;
+  --dh-color-cyan-1300: #d8fffa;
+  --dh-color-cyan-1400: #e5fff9;
+
+  /* ============ BLUE PALETTE ============ */
+  /* Night Owl Blue - constants, functions anchored at 900 */
+  --dh-color-blue-100: #030d2c;
+  --dh-color-blue-200: #081840;
+  --dh-color-blue-300: #102354;
+  --dh-color-blue-400: #1c356f;
+  --dh-color-blue-500: #2c4a8e;
+  --dh-color-blue-600: #3f61ab;
+  --dh-color-blue-700: #5378c9;
+  --dh-color-blue-800: #6a91e4;
+  --dh-color-blue-900: #82aaff;
+  --dh-color-blue-1000: #98beff;
+  --dh-color-blue-1100: #b6d2ff;
+  --dh-color-blue-1200: #cee3ff;
+  --dh-color-blue-1300: #e2f0ff;
+  --dh-color-blue-1400: #eef9ff;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Night Owl Indigo - ruler, between blue and purple anchored at 700 */
+  --dh-color-indigo-100: #081532;
+  --dh-color-indigo-200: #102046;
+  --dh-color-indigo-300: #182c5a;
+  --dh-color-indigo-400: #253e74;
+  --dh-color-indigo-500: #365393;
+  --dh-color-indigo-600: #4a6ab0;
+  --dh-color-indigo-700: #5e82ce;
+  --dh-color-indigo-800: #759be9;
+  --dh-color-indigo-900: #8db4ff;
+  --dh-color-indigo-1000: #a6c8ff;
+  --dh-color-indigo-1100: #c4dcff;
+  --dh-color-indigo-1200: #ddedff;
+  --dh-color-indigo-1300: #eef9ff;
+  --dh-color-indigo-1400: #eef9ff;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* Night Owl Purple - keywords, storage anchored at 900 */
+  --dh-color-purple-100: #190525;
+  --dh-color-purple-200: #270c36;
+  --dh-color-purple-300: #361548;
+  --dh-color-purple-400: #4a2461;
+  --dh-color-purple-500: #63377e;
+  --dh-color-purple-600: #7b4c99;
+  --dh-color-purple-700: #9561b5;
+  --dh-color-purple-800: #ad79cf;
+  --dh-color-purple-900: #c792ea;
+  --dh-color-purple-1000: #d9a6fb;
+  --dh-color-purple-1100: #eabdff;
+  --dh-color-purple-1200: #f5d3ff;
+  --dh-color-purple-1300: #fce5ff;
+  --dh-color-purple-1400: #fff1ff;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Night Owl Fuchsia/Pink - booleans, null anchored at 900 */
+  --dh-color-fuchsia-100: #180001;
+  --dh-color-fuchsia-200: #2b0004;
+  --dh-color-fuchsia-300: #3f000a;
+  --dh-color-fuchsia-400: #5d0015;
+  --dh-color-fuchsia-500: #810023;
+  --dh-color-fuchsia-600: #a50033;
+  --dh-color-fuchsia-700: #c51646;
+  --dh-color-fuchsia-800: #e23b5d;
+  --dh-color-fuchsia-900: #ff5874;
+  --dh-color-fuchsia-1000: #ff788b;
+  --dh-color-fuchsia-1100: #ff9ca7;
+  --dh-color-fuchsia-1200: #ffb7bd;
+  --dh-color-fuchsia-1300: #ffcbcf;
+  --dh-color-fuchsia-1400: #ffd9dc;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Derived - shifted from purple anchored at 900 */
+  --dh-color-magenta-100: #1f031d;
+  --dh-color-magenta-200: #2f082c;
+  --dh-color-magenta-300: #3f103c;
+  --dh-color-magenta-400: #561f52;
+  --dh-color-magenta-500: #72306c;
+  --dh-color-magenta-600: #8c4585;
+  --dh-color-magenta-700: #a75aa0;
+  --dh-color-magenta-800: #c172b9;
+  --dh-color-magenta-900: #dc8bd3;
+  --dh-color-magenta-1000: #eea0e5;
+  --dh-color-magenta-1100: #feb7f5;
+  --dh-color-magenta-1200: #fcf;
+  --dh-color-magenta-1300: #ffe0ff;
+  --dh-color-magenta-1400: #ffefff;
+
+  /* ============ SEMANTIC - ACCENT (Purple) ============ */
+  --dh-color-accent-100: var(--dh-color-purple-100);
+  --dh-color-accent-200: var(--dh-color-purple-200);
+  --dh-color-accent-300: var(--dh-color-purple-300);
+  --dh-color-accent-400: var(--dh-color-purple-400);
+  --dh-color-accent-500: var(--dh-color-purple-500);
+  --dh-color-accent-600: var(--dh-color-purple-600);
+  --dh-color-accent-700: var(--dh-color-purple-700);
+  --dh-color-accent-800: var(--dh-color-purple-800);
+  --dh-color-accent-900: var(--dh-color-purple-900);
+  --dh-color-accent-1000: var(--dh-color-purple-1000);
+  --dh-color-accent-1100: var(--dh-color-purple-1100);
+  --dh-color-accent-1200: var(--dh-color-purple-1200);
+  --dh-color-accent-1300: var(--dh-color-purple-1300);
+  --dh-color-accent-1400: var(--dh-color-purple-1400);
+
+  /* ============ SEMANTIC - POSITIVE (Green) ============ */
+  --dh-color-visual-positive: var(--dh-color-green-900);
+
+  /* ============ SEMANTIC - NEGATIVE (Fuchsia/Pink) ============ */
+  --dh-color-negative: var(--dh-color-fuchsia-900);
+  --dh-color-negative-bg: var(--dh-color-negative);
+  --dh-color-negative-hover-bg: var(--dh-color-fuchsia-800);
+  --dh-color-negative-down-bg: var(--dh-color-fuchsia-700);
+  --dh-color-negative-key-focus-bg: var(--dh-color-fuchsia-800);
+  --dh-color-visual-negative: var(--dh-color-fuchsia-900);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using Night Owl background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using Night Owl palette colors */
+  --dh-color-chart-colorway: var(--dh-color-blue-900) var(--dh-color-cyan-900)
+    var(--dh-color-green-900) var(--dh-color-orange-900)
+    var(--dh-color-purple-900) var(--dh-color-yellow-1000)
+    var(--dh-color-red-600) var(--dh-color-fuchsia-900)
+    var(--dh-color-chartreuse-1000) var(--dh-color-indigo-700);
+
+  /* ============ EDITOR SEMANTIC - NIGHT OWL SYNTAX ============ */
+  /* Based on Night Owl VS Code theme syntax colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-100);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-bg: var(--dh-color-gray-300);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);
+
+  /* Code syntax highlighting per Night Owl */
+  --dh-color-editor-comment: var(
+    --dh-color-gray-500
+  ); /* Comments - muted gray-blue */
+  --dh-color-editor-keyword: var(
+    --dh-color-purple-900
+  ); /* Keywords - Purple #C792EA */
+  --dh-color-editor-storage: var(
+    --dh-color-purple-900
+  ); /* Storage types - Purple */
+  --dh-color-editor-number: var(
+    --dh-color-orange-900
+  ); /* Numbers - Orange #F78C6C */
+  --dh-color-editor-string: var(
+    --dh-color-yellow-1000
+  ); /* Strings - Yellow #ECC48D */
+  --dh-color-editor-string-delim: var(
+    --dh-color-chartreuse-1000
+  ); /* String delimiters */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-900
+  ); /* Default identifiers */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-blue-900
+  ); /* Functions - Blue #82AAFF */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-yellow-1000
+  ); /* Classes - Yellow #FFCB8B */
+  --dh-color-editor-predefined: var(
+    --dh-color-cyan-900
+  ); /* Support functions - Cyan #7FDBCA */
+  --dh-color-editor-operator: var(--dh-color-cyan-900); /* Operators - Cyan */
+  --dh-color-editor-delimiter: var(
+    --dh-color-gray-900
+  ); /* Delimiters - Foreground */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-600
+  ); /* Errors - Red #ef5350 */
+
+  /* Bracket colors - Night Owl style */
+  --dh-color-editor-bracket-fg1: var(--dh-color-yellow-1000);
+  --dh-color-editor-bracket-fg2: var(--dh-color-purple-900);
+  --dh-color-editor-bracket-fg3: var(--dh-color-blue-900);
+  --dh-color-editor-bracket-fg4: var(--dh-color-cyan-900);
+  --dh-color-editor-bracket-fg5: var(--dh-color-orange-900);
+  --dh-color-editor-bracket-fg6: var(--dh-color-chartreuse-1000);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-600);
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-400);
+  --dh-color-editor-line-number-active-fg: var(--dh-color-gray-800);
+}
diff --git a/plugins/theme-pack/src/js/src/red-theme.css b/plugins/theme-pack/src/js/src/red-theme.css
new file mode 100644
index 000000000..1ef826c8b
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/red-theme.css
@@ -0,0 +1,293 @@
+/* Red Theme - Dark theme with red as dominant color */
+/* Auto-generated from VS Code Red theme */
+
+:root {
+  /* Gray palette */
+  --dh-color-gray-50: #300000;
+  --dh-color-gray-75: #300;
+  --dh-color-gray-100: #390000;
+  --dh-color-gray-200: #580000;
+  --dh-color-gray-300: #700000;
+  --dh-color-gray-400: #700;
+  --dh-color-gray-500: #800;
+  --dh-color-gray-600: #aa4f44;
+  --dh-color-gray-700: #c7877d;
+  --dh-color-gray-800: #e1bfb9;
+  --dh-color-gray-900: #f8f8f8;
+
+  /* Red palette */
+  --dh-color-red-100: #3a0000;
+  --dh-color-red-200: #4f0000;
+  --dh-color-red-300: #600;
+  --dh-color-red-400: #860000;
+  --dh-color-red-500: #ad0000;
+  --dh-color-red-600: #cf000f;
+  --dh-color-red-700: #f12727;
+  --dh-color-red-800: #ff5349;
+  --dh-color-red-900: #ff8b7e;
+  --dh-color-red-1000: #ffaca0;
+  --dh-color-red-1100: #ffcac1;
+  --dh-color-red-1200: #ffe1db;
+  --dh-color-red-1300: #fff1ed;
+  --dh-color-red-1400: #fff1ed;
+
+  /* Orange palette */
+  --dh-color-orange-100: #2d0a00;
+  --dh-color-orange-200: #3e1300;
+  --dh-color-orange-300: #501d00;
+  --dh-color-orange-400: #6a2c00;
+  --dh-color-orange-500: #8a3d00;
+  --dh-color-orange-600: #a75200;
+  --dh-color-orange-700: #c46800;
+  --dh-color-orange-800: #df812e;
+  --dh-color-orange-900: #fb9a4b;
+  --dh-color-orange-1000: #ffb069;
+  --dh-color-orange-1100: #ffcc9e;
+  --dh-color-orange-1200: #ffe2c5;
+  --dh-color-orange-1300: #fff3e0;
+  --dh-color-orange-1400: #fff3e0;
+
+  /* Yellow palette */
+  --dh-color-yellow-100: #2b1800;
+  --dh-color-yellow-200: #3b2300;
+  --dh-color-yellow-300: #4a2f00;
+  --dh-color-yellow-400: #624000;
+  --dh-color-yellow-500: #7d5500;
+  --dh-color-yellow-600: #9a6a00;
+  --dh-color-yellow-700: #b58100;
+  --dh-color-yellow-800: #cf9a1e;
+  --dh-color-yellow-900: #eab442;
+  --dh-color-yellow-1000: #fec758;
+  --dh-color-yellow-1100: #ffdd84;
+  --dh-color-yellow-1200: #fff1bd;
+  --dh-color-yellow-1300: #fff5ca;
+  --dh-color-yellow-1400: #fff6d9;
+
+  /* Chartreuse palette */
+  --dh-color-chartreuse-100: #202300;
+  --dh-color-chartreuse-200: #2c3000;
+  --dh-color-chartreuse-300: #393e00;
+  --dh-color-chartreuse-400: #4b5100;
+  --dh-color-chartreuse-500: #616900;
+  --dh-color-chartreuse-600: #788100;
+  --dh-color-chartreuse-700: #909a00;
+  --dh-color-chartreuse-800: #a8b317;
+  --dh-color-chartreuse-900: #c1cd40;
+  --dh-color-chartreuse-1000: #d4e157;
+  --dh-color-chartreuse-1100: #e7f485;
+  --dh-color-chartreuse-1200: #f7ffa8;
+  --dh-color-chartreuse-1300: #f7ffc1;
+  --dh-color-chartreuse-1400: #f7fdd8;
+
+  /* Celery palette */
+  --dh-color-celery-100: #111300;
+  --dh-color-celery-200: #1c1e00;
+  --dh-color-celery-300: #282b00;
+  --dh-color-celery-400: #3a3e00;
+  --dh-color-celery-500: #4f5400;
+  --dh-color-celery-600: #666c00;
+  --dh-color-celery-700: #7d8400;
+  --dh-color-celery-800: #959d00;
+  --dh-color-celery-900: #adb70c;
+  --dh-color-celery-1000: #c0ca33;
+  --dh-color-celery-1100: #d3dd69;
+  --dh-color-celery-1200: #e3ec90;
+  --dh-color-celery-1300: #f0f7b7;
+  --dh-color-celery-1400: #f8fdd7;
+
+  /* Green palette */
+  --dh-color-green-100: #072c0b;
+  --dh-color-green-200: #0c3a11;
+  --dh-color-green-300: #114917;
+  --dh-color-green-400: #1d5f23;
+  --dh-color-green-500: #2d7833;
+  --dh-color-green-600: #429147;
+  --dh-color-green-700: #57ab5b;
+  --dh-color-green-800: #70c573;
+  --dh-color-green-900: #8adf8c;
+  --dh-color-green-1000: #9df39f;
+  --dh-color-green-1100: #bbffbc;
+  --dh-color-green-1200: #daffda;
+  --dh-color-green-1300: #dcffdc;
+  --dh-color-green-1400: #e8ffe7;
+
+  /* Seafoam palette */
+  --dh-color-seafoam-100: #01201e;
+  --dh-color-seafoam-200: #022e2b;
+  --dh-color-seafoam-300: #053c38;
+  --dh-color-seafoam-400: #13504b;
+  --dh-color-seafoam-500: #236762;
+  --dh-color-seafoam-600: #387f7a;
+  --dh-color-seafoam-700: #4d9892;
+  --dh-color-seafoam-800: #67b1ab;
+  --dh-color-seafoam-900: #80cbc4;
+  --dh-color-seafoam-1000: #97ded7;
+  --dh-color-seafoam-1100: #b1f0ea;
+  --dh-color-seafoam-1200: #cbfef9;
+  --dh-color-seafoam-1300: #ddfffd;
+  --dh-color-seafoam-1400: #e8fefb;
+
+  /* Cyan palette */
+  --dh-color-cyan-100: #002229;
+  --dh-color-cyan-200: #002f38;
+  --dh-color-cyan-300: #003d47;
+  --dh-color-cyan-400: #00525d;
+  --dh-color-cyan-500: #006a78;
+  --dh-color-cyan-600: #008393;
+  --dh-color-cyan-700: #009dad;
+  --dh-color-cyan-800: #29b6c7;
+  --dh-color-cyan-900: #4dd0e1;
+  --dh-color-cyan-1000: #6ce3f3;
+  --dh-color-cyan-1100: #8ff5ff;
+  --dh-color-cyan-1200: #b3ffff;
+  --dh-color-cyan-1300: #cff;
+  --dh-color-cyan-1400: #dfffff;
+
+  /* Blue palette */
+  --dh-color-blue-100: #00122a;
+  --dh-color-blue-200: #001e3c;
+  --dh-color-blue-300: #002a4f;
+  --dh-color-blue-400: #003d69;
+  --dh-color-blue-500: #005387;
+  --dh-color-blue-600: #176ba4;
+  --dh-color-blue-700: #2f83c1;
+  --dh-color-blue-800: #4a9cdb;
+  --dh-color-blue-900: #64b5f6;
+  --dh-color-blue-1000: #7cc8ff;
+  --dh-color-blue-1100: #a0dbff;
+  --dh-color-blue-1200: #c0eaff;
+  --dh-color-blue-1300: #daf5ff;
+  --dh-color-blue-1400: #e7fbff;
+
+  /* Indigo palette */
+  --dh-color-indigo-100: #060720;
+  --dh-color-indigo-200: #0e1131;
+  --dh-color-indigo-300: #181c43;
+  --dh-color-indigo-400: #272d5c;
+  --dh-color-indigo-500: #394179;
+  --dh-color-indigo-600: #4d5795;
+  --dh-color-indigo-700: #626eb1;
+  --dh-color-indigo-800: #7986cb;
+  --dh-color-indigo-900: #919fe6;
+  --dh-color-indigo-1000: #a4b2f7;
+  --dh-color-indigo-1100: #b8c6ff;
+  --dh-color-indigo-1200: #cbd7ff;
+  --dh-color-indigo-1300: #dce5ff;
+  --dh-color-indigo-1400: #ebf0ff;
+
+  /* Purple palette */
+  --dh-color-purple-100: #251c33;
+  --dh-color-purple-200: #322644;
+  --dh-color-purple-300: #3f3256;
+  --dh-color-purple-400: #53436e;
+  --dh-color-purple-500: #6a578a;
+  --dh-color-purple-600: #826da5;
+  --dh-color-purple-700: #9a85c1;
+  --dh-color-purple-800: #b39ddb;
+  --dh-color-purple-900: #ccb6f6;
+  --dh-color-purple-1000: #dfcaff;
+  --dh-color-purple-1100: #f0e2ff;
+  --dh-color-purple-1200: #fcf4ff;
+  --dh-color-purple-1300: #fcf4ff;
+  --dh-color-purple-1400: #fbf5ff;
+
+  /* Fuchsia palette */
+  --dh-color-fuchsia-100: #280030;
+  --dh-color-fuchsia-200: #390044;
+  --dh-color-fuchsia-300: #4b0058;
+  --dh-color-fuchsia-400: #607;
+  --dh-color-fuchsia-500: #86009b;
+  --dh-color-fuchsia-600: #a700c0;
+  --dh-color-fuchsia-700: #c514df;
+  --dh-color-fuchsia-800: #e040fb;
+  --dh-color-fuchsia-900: #f56dff;
+  --dh-color-fuchsia-1000: #fb96ff;
+  --dh-color-fuchsia-1100: #ffb9ff;
+  --dh-color-fuchsia-1200: #ffd4ff;
+  --dh-color-fuchsia-1300: #ffe9ff;
+  --dh-color-fuchsia-1400: #ffefff;
+
+  /* Magenta palette */
+  --dh-color-magenta-100: #400016;
+  --dh-color-magenta-200: #550020;
+  --dh-color-magenta-300: #6b002b;
+  --dh-color-magenta-400: #89003b;
+  --dh-color-magenta-500: #ab064e;
+  --dh-color-magenta-600: #cb2864;
+  --dh-color-magenta-700: #ec407a;
+  --dh-color-magenta-800: #ff5d92;
+  --dh-color-magenta-900: #ff93b0;
+  --dh-color-magenta-1000: #ffb4c7;
+  --dh-color-magenta-1100: #ffd3de;
+  --dh-color-magenta-1200: #ffebf1;
+  --dh-color-magenta-1300: #fff0f5;
+  --dh-color-magenta-1400: #fff0f5;
+
+  /* Accent colors - using red for the Red theme */
+  --dh-color-accent-100: var(--dh-color-red-100);
+  --dh-color-accent-200: var(--dh-color-red-200);
+  --dh-color-accent-300: var(--dh-color-red-300);
+  --dh-color-accent-400: var(--dh-color-red-400);
+  --dh-color-accent-500: var(--dh-color-red-500);
+  --dh-color-accent-600: var(--dh-color-red-600);
+  --dh-color-accent-700: var(--dh-color-red-700);
+  --dh-color-accent-800: var(--dh-color-red-800);
+  --dh-color-accent-900: var(--dh-color-red-900);
+  --dh-color-accent-1000: var(--dh-color-red-1000);
+  --dh-color-accent-1100: var(--dh-color-red-1100);
+  --dh-color-accent-1200: var(--dh-color-red-1200);
+  --dh-color-accent-1300: var(--dh-color-red-1300);
+  --dh-color-accent-1400: var(--dh-color-red-1400);
+
+  /* Accent semantic - adjusted to match theme's button colors */
+  --dh-color-accent: var(--dh-color-red-500);
+  --dh-color-accent-bg: var(--dh-color-red-500);
+  --dh-color-accent-hover-bg: var(--dh-color-red-600);
+  --dh-color-accent-down-bg: var(--dh-color-red-400);
+  --dh-color-accent-key-focus-bg: var(--dh-color-red-600);
+  --dh-color-accent-contrast: var(--dh-color-gray-900);
+
+  --dh-color-visual-positive: var(--dh-color-green-1100);
+  --dh-color-visual-negative: var(--dh-color-red-700);
+
+  /* Editor syntax highlighting - matching VS Code Red theme token colors */
+  /* Keywords (from, import, def): muted rose #98676A - using gray-600 */
+  --dh-color-editor-keyword: var(--dh-color-red-900);
+  --dh-color-editor-storage: var(--dh-color-red-900);
+
+  /* Strings: olive green #889B4A - using celery-900 */
+  --dh-color-editor-string: var(--dh-color-gray-700);
+  --dh-color-editor-string-delim: var(--dh-color-gray-900);
+
+  /* Numbers: orange #F79A32 - using orange-900 */
+  --dh-color-editor-number: var(--dh-color-gray-600);
+
+  /* Functions: teal #8AB1B0 - using seafoam-900 */
+  --dh-color-editor-identifier-js: var(--dh-color-seafoam-900);
+  --dh-color-editor-predefined: var(--dh-color-seafoam-900);
+
+  /* Classes/namespaces: orange-red #F06431 - using orange-800 */
+  --dh-color-editor-identifier-namespace: var(--dh-color-orange-800);
+
+  /* Variables: magenta #DC3958 - using magenta-700 */
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+
+  /* Comments: pinkish/salmon - using gray-700 */
+  --dh-color-editor-comment: var(--dh-color-gray-800);
+
+  /* Operators/delimiters: foreground */
+  --dh-color-editor-operator: var(--dh-color-gray-900);
+  --dh-color-editor-delimiter: var(--dh-color-gray-900);
+
+  /* Bracket colors */
+  --dh-color-editor-bracket-fg1: var(--dh-color-yellow-1200);
+  --dh-color-editor-bracket-fg2: var(--dh-color-magenta-700);
+  --dh-color-editor-bracket-fg3: var(--dh-color-seafoam-900);
+  --dh-color-editor-bracket-fg4: var(--dh-color-orange-900);
+  --dh-color-editor-bracket-fg5: var(--dh-color-green-1000);
+  --dh-color-editor-bracket-fg6: var(--dh-color-cyan-900);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-700);
+
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-50);
+}
diff --git a/plugins/theme-pack/src/js/src/solarized-dark-theme.css b/plugins/theme-pack/src/js/src/solarized-dark-theme.css
new file mode 100644
index 000000000..3736a910a
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/solarized-dark-theme.css
@@ -0,0 +1,290 @@
+/* Solarized Dark Theme */
+/* Based on Ethan Schoonover's Solarized color palette */
+/* Auto-generated from VS Code Solarized Dark theme */
+
+:root {
+  /* Gray palette - adjusted for lighter upper range */
+  --dh-color-gray-50: #00212b;
+  --dh-color-gray-75: #00212b;
+  --dh-color-gray-100: #002b36;
+  --dh-color-gray-200: #073642;
+  --dh-color-gray-300: #003847;
+  --dh-color-gray-400: #004052;
+  --dh-color-gray-500: #005a6f;
+  --dh-color-gray-600: #4a7a85;
+  --dh-color-gray-700: #698d94;
+  --dh-color-gray-800: #88a0a3;
+  --dh-color-gray-900: #a7b3b4;
+
+  /* Red palette */
+  --dh-color-red-100: #2e0000;
+  --dh-color-red-200: #430000;
+  --dh-color-red-300: #580000;
+  --dh-color-red-400: #780000;
+  --dh-color-red-500: #9c0001;
+  --dh-color-red-600: #bb151a;
+  --dh-color-red-700: #dc322f;
+  --dh-color-red-800: #f95048;
+  --dh-color-red-900: #ff796d;
+  --dh-color-red-1000: #ff9c90;
+  --dh-color-red-1100: #ffbbb1;
+  --dh-color-red-1200: #ffd4cc;
+  --dh-color-red-1300: #ffe6e1;
+  --dh-color-red-1400: #fff1ed;
+
+  /* Orange palette */
+  --dh-color-orange-100: #2a0000;
+  --dh-color-orange-200: #3d0000;
+  --dh-color-orange-300: #500100;
+  --dh-color-orange-400: #6d0a00;
+  --dh-color-orange-500: #8e1d00;
+  --dh-color-orange-600: #ac3500;
+  --dh-color-orange-700: #cb4b16;
+  --dh-color-orange-800: #e76535;
+  --dh-color-orange-900: #ff7f50;
+  --dh-color-orange-1000: #ff9c76;
+  --dh-color-orange-1100: #ffbb9f;
+  --dh-color-orange-1200: #ffd2bf;
+  --dh-color-orange-1300: #ffe5d7;
+  --dh-color-orange-1400: #fff2e8;
+
+  /* Yellow palette */
+  --dh-color-yellow-100: #180b00;
+  --dh-color-yellow-200: #261600;
+  --dh-color-yellow-300: #352100;
+  --dh-color-yellow-400: #4a3200;
+  --dh-color-yellow-500: #654600;
+  --dh-color-yellow-600: #805b00;
+  --dh-color-yellow-700: #9c7100;
+  --dh-color-yellow-800: #b58900;
+  --dh-color-yellow-900: #cfa232;
+  --dh-color-yellow-1000: #e1b651;
+  --dh-color-yellow-1100: #f1ca74;
+  --dh-color-yellow-1200: #fcdc97;
+  --dh-color-yellow-1300: #ffeaba;
+  --dh-color-yellow-1400: #fff5d9;
+
+  /* Chartreuse palette */
+  --dh-color-chartreuse-100: #110f00;
+  --dh-color-chartreuse-200: #1d1b00;
+  --dh-color-chartreuse-300: #2a2700;
+  --dh-color-chartreuse-400: #3c3900;
+  --dh-color-chartreuse-500: #524f00;
+  --dh-color-chartreuse-600: #6a6600;
+  --dh-color-chartreuse-700: #827e00;
+  --dh-color-chartreuse-800: #9a9600;
+  --dh-color-chartreuse-900: #b3af32;
+  --dh-color-chartreuse-1000: #c5c252;
+  --dh-color-chartreuse-1100: #d7d575;
+  --dh-color-chartreuse-1200: #e6e597;
+  --dh-color-chartreuse-1300: #f1f1ba;
+  --dh-color-chartreuse-1400: #f9fad9;
+
+  /* Celery palette */
+  --dh-color-celery-100: #060a00;
+  --dh-color-celery-200: #0f1500;
+  --dh-color-celery-300: #1a2100;
+  --dh-color-celery-400: #293400;
+  --dh-color-celery-500: #3d4a00;
+  --dh-color-celery-600: #516100;
+  --dh-color-celery-700: #667a00;
+  --dh-color-celery-800: #7d9200;
+  --dh-color-celery-900: #95ab30;
+  --dh-color-celery-1000: #a7be4f;
+  --dh-color-celery-1100: #bbd070;
+  --dh-color-celery-1200: #ccdf91;
+  --dh-color-celery-1300: #dce9b3;
+  --dh-color-celery-1400: #e8f0d0;
+
+  /* Green palette */
+  --dh-color-green-100: #0a0f00;
+  --dh-color-green-200: #141a00;
+  --dh-color-green-300: #1f2700;
+  --dh-color-green-400: #303a00;
+  --dh-color-green-500: #435000;
+  --dh-color-green-600: #586800;
+  --dh-color-green-700: #6e8000;
+  --dh-color-green-800: #859900;
+  --dh-color-green-900: #9db232;
+  --dh-color-green-1000: #b0c551;
+  --dh-color-green-1100: #c3d873;
+  --dh-color-green-1200: #d5e695;
+  --dh-color-green-1300: #e4f1b8;
+  --dh-color-green-1400: #f0f8d6;
+
+  /* Seafoam palette */
+  --dh-color-seafoam-100: #000d04;
+  --dh-color-seafoam-200: #001a0b;
+  --dh-color-seafoam-300: #002715;
+  --dh-color-seafoam-400: #003a24;
+  --dh-color-seafoam-500: #005137;
+  --dh-color-seafoam-600: #1d684b;
+  --dh-color-seafoam-700: #338161;
+  --dh-color-seafoam-800: #4d9978;
+  --dh-color-seafoam-900: #66b290;
+  --dh-color-seafoam-1000: #7dc4a3;
+  --dh-color-seafoam-1100: #96d6b8;
+  --dh-color-seafoam-1200: #b0e4ca;
+  --dh-color-seafoam-1300: #c8edda;
+  --dh-color-seafoam-1400: #ddf3e8;
+
+  /* Cyan palette */
+  --dh-color-cyan-100: #00120f;
+  --dh-color-cyan-200: #001e1b;
+  --dh-color-cyan-300: #002c28;
+  --dh-color-cyan-400: #003f3b;
+  --dh-color-cyan-500: #005751;
+  --dh-color-cyan-600: #007068;
+  --dh-color-cyan-700: #008880;
+  --dh-color-cyan-800: #2aa198;
+  --dh-color-cyan-900: #4abab1;
+  --dh-color-cyan-1000: #66cdc3;
+  --dh-color-cyan-1100: #86ded5;
+  --dh-color-cyan-1200: #a5ece4;
+  --dh-color-cyan-1300: #c3f5ef;
+  --dh-color-cyan-1400: #ddfaf6;
+
+  /* Blue palette */
+  --dh-color-blue-100: #00061e;
+  --dh-color-blue-200: #00102f;
+  --dh-color-blue-300: #001c41;
+  --dh-color-blue-400: #002e5c;
+  --dh-color-blue-500: #00447e;
+  --dh-color-blue-600: #005b9a;
+  --dh-color-blue-700: #0072b8;
+  --dh-color-blue-800: #268bd2;
+  --dh-color-blue-900: #45a4ed;
+  --dh-color-blue-1000: #5fb7fd;
+  --dh-color-blue-1100: #7dcaff;
+  --dh-color-blue-1200: #9edaff;
+  --dh-color-blue-1300: #bae5ff;
+  --dh-color-blue-1400: #d3edff;
+
+  /* Indigo palette */
+  --dh-color-indigo-100: #000217;
+  --dh-color-indigo-200: #000829;
+  --dh-color-indigo-300: #00133b;
+  --dh-color-indigo-400: #012454;
+  --dh-color-indigo-500: #0e3972;
+  --dh-color-indigo-600: #224f8d;
+  --dh-color-indigo-700: #3666aa;
+  --dh-color-indigo-800: #4d7ec4;
+  --dh-color-indigo-900: #6497df;
+  --dh-color-indigo-1000: #79aaef;
+  --dh-color-indigo-1100: #91bdfc;
+  --dh-color-indigo-1200: #a8cdff;
+  --dh-color-indigo-1300: #bfdaff;
+  --dh-color-indigo-1400: #d3e3fa;
+
+  /* Purple palette */
+  --dh-color-purple-100: #020016;
+  --dh-color-purple-200: #070228;
+  --dh-color-purple-300: #0f0a3a;
+  --dh-color-purple-400: #1d1a53;
+  --dh-color-purple-500: #2e2e71;
+  --dh-color-purple-600: #42438d;
+  --dh-color-purple-700: #5659aa;
+  --dh-color-purple-800: #6c71c4;
+  --dh-color-purple-900: #8389df;
+  --dh-color-purple-1000: #959def;
+  --dh-color-purple-1100: #a9b1fc;
+  --dh-color-purple-1200: #bbc3ff;
+  --dh-color-purple-1300: #cbd1ff;
+  --dh-color-purple-1400: #d9ddf8;
+
+  /* Fuchsia palette */
+  --dh-color-fuchsia-100: #1a031d;
+  --dh-color-fuchsia-200: #29092d;
+  --dh-color-fuchsia-300: #38113d;
+  --dh-color-fuchsia-400: #4e2054;
+  --dh-color-fuchsia-500: #68326e;
+  --dh-color-fuchsia-600: #824788;
+  --dh-color-fuchsia-700: #9c5ca3;
+  --dh-color-fuchsia-800: #b574bc;
+  --dh-color-fuchsia-900: #cf8cd7;
+  --dh-color-fuchsia-1000: #e2a1e8;
+  --dh-color-fuchsia-1100: #f2b7f8;
+  --dh-color-fuchsia-1200: #fdccff;
+  --dh-color-fuchsia-1300: #ffdfff;
+  --dh-color-fuchsia-1400: #fef;
+
+  /* Magenta palette */
+  --dh-color-magenta-100: #2d0013;
+  --dh-color-magenta-200: #41001f;
+  --dh-color-magenta-300: #56002c;
+  --dh-color-magenta-400: #74003e;
+  --dh-color-magenta-500: #950054;
+  --dh-color-magenta-600: #b31d6a;
+  --dh-color-magenta-700: #d33682;
+  --dh-color-magenta-800: #f0539a;
+  --dh-color-magenta-900: #ff71b3;
+  --dh-color-magenta-1000: #ff98c5;
+  --dh-color-magenta-1100: #ffb9d7;
+  --dh-color-magenta-1200: #ffd3e7;
+  --dh-color-magenta-1300: #ffe7f4;
+  --dh-color-magenta-1400: #ffeff9;
+
+  /* Accent colors - using cyan for Solarized theme */
+  --dh-color-accent-100: var(--dh-color-cyan-100);
+  --dh-color-accent-200: var(--dh-color-cyan-200);
+  --dh-color-accent-300: var(--dh-color-cyan-300);
+  --dh-color-accent-400: var(--dh-color-cyan-400);
+  --dh-color-accent-500: var(--dh-color-cyan-500);
+  --dh-color-accent-600: var(--dh-color-cyan-600);
+  --dh-color-accent-700: var(--dh-color-cyan-700);
+  --dh-color-accent-800: var(--dh-color-cyan-800);
+  --dh-color-accent-900: var(--dh-color-cyan-900);
+  --dh-color-accent-1000: var(--dh-color-cyan-1000);
+  --dh-color-accent-1100: var(--dh-color-cyan-1100);
+  --dh-color-accent-1200: var(--dh-color-cyan-1200);
+  --dh-color-accent-1300: var(--dh-color-cyan-1300);
+  --dh-color-accent-1400: var(--dh-color-cyan-1400);
+
+  /* Accent semantic - adjusted to match theme's button colors */
+  --dh-color-accent: var(--dh-color-cyan-800);
+  --dh-color-accent-bg: var(--dh-color-cyan-800);
+  --dh-color-accent-hover-bg: var(--dh-color-cyan-900);
+  --dh-color-accent-down-bg: var(--dh-color-cyan-700);
+  --dh-color-accent-key-focus-bg: var(--dh-color-cyan-900);
+  --dh-color-accent-contrast: var(--dh-color-gray-50);
+
+  /* Editor syntax highlighting - Solarized token colors */
+  /* Comment: Base01 - using gray-700 */
+  --dh-color-editor-comment: var(--dh-color-gray-700);
+
+  /* String: Solarized cyan */
+  --dh-color-editor-string: var(--dh-color-cyan-800);
+  --dh-color-editor-string-delim: var(--dh-color-gray-900);
+
+  /* Number: Solarized violet */
+  --dh-color-editor-number: var(--dh-color-magenta-700);
+
+  /* Keyword: Solarized green */
+  --dh-color-editor-keyword: var(--dh-color-green-800);
+
+  /* Storage: Solarized blue for storage.type */
+  --dh-color-editor-storage: var(--dh-color-blue-800);
+
+  /* Variable/Identifier: Solarized blue */
+  --dh-color-editor-identifier: var(--dh-color-gray-900);
+  --dh-color-editor-identifier-js: var(--dh-color-gray-900);
+  --dh-color-editor-identifier-namespace: var(--dh-color-gray-900);
+
+  /* Operator: Base00 - using gray-800 */
+  --dh-color-editor-operator: var(--dh-color-gray-800);
+
+  /* Delimiter/Punctuation: Base00 - using gray-800 */
+  --dh-color-editor-delimiter: var(--dh-color-gray-800);
+
+  /* Predefined/Built-in: Solarized yellow */
+  --dh-color-editor-predefined: var(--dh-color-yellow-800);
+
+  /* Bracket colors matching VS Code Solarized */
+  --dh-color-editor-bracket-fg1: var(--dh-color-gray-900);
+  --dh-color-editor-bracket-fg2: var(--dh-color-yellow-800);
+  --dh-color-editor-bracket-fg3: var(--dh-color-magenta-700);
+  --dh-color-editor-bracket-fg4: var(--dh-color-cyan-800);
+  --dh-color-editor-bracket-fg5: var(--dh-color-orange-700);
+  --dh-color-editor-bracket-fg6: var(--dh-color-purple-800);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-700);
+}
diff --git a/plugins/theme-pack/src/js/src/solarized-light-theme.css b/plugins/theme-pack/src/js/src/solarized-light-theme.css
new file mode 100644
index 000000000..787cff21e
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/solarized-light-theme.css
@@ -0,0 +1,347 @@
+/* Solarized Light Theme for Deephaven */
+/* Generated from Solarized color palette by Ethan Schoonover */
+/* Source: https://ethanschoonover.com/solarized/ */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Light theme: gray-100 (#fdf6e3) is lightest, gray-900 (#657b83) is darkest */
+  /* Anchors from VS Code: editor.background, sideBar.background, activityBar.background, etc. */
+  --dh-color-gray-50: #fffbe8;
+  --dh-color-gray-75: #fff9e5;
+  --dh-color-gray-100: #fdf6e3;
+  --dh-color-gray-200: #eee8d5;
+  --dh-color-gray-300: #ddd6c1;
+  --dh-color-gray-400: #d3cbb7;
+  --dh-color-gray-500: #ccc4b0;
+  --dh-color-gray-600: #adb4a0;
+  --dh-color-gray-700: #8fa295;
+  --dh-color-gray-800: #778f8d;
+  --dh-color-gray-900: #657b83;
+
+  /* ============ RED PALETTE ============ */
+  /* Solarized Red (#dc322f) - errors, deletion anchored at 800 */
+  --dh-color-red-100: #fff1ed;
+  --dh-color-red-200: #fff1ed;
+  --dh-color-red-300: #ffe6e1;
+  --dh-color-red-400: #ffcac1;
+  --dh-color-red-500: #ffa79b;
+  --dh-color-red-600: #ff796d;
+  --dh-color-red-700: #f95048;
+  --dh-color-red-800: #dc322f;
+  --dh-color-red-900: #bb151a;
+  --dh-color-red-1000: #9f0005;
+  --dh-color-red-1100: #800000;
+  --dh-color-red-1200: #620000;
+  --dh-color-red-1300: #490103;
+  --dh-color-red-1400: #310504;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* Solarized Orange (#cb4b16) - warnings, constants anchored at 800 */
+  --dh-color-orange-100: #fff2e8;
+  --dh-color-orange-200: #fff2e8;
+  --dh-color-orange-300: #ffe5d7;
+  --dh-color-orange-400: #ffc9b2;
+  --dh-color-orange-500: #ffa784;
+  --dh-color-orange-600: #ff8256;
+  --dh-color-orange-700: #e76535;
+  --dh-color-orange-800: #cb4b16;
+  --dh-color-orange-900: #ac3500;
+  --dh-color-orange-1000: #912100;
+  --dh-color-orange-1100: #741200;
+  --dh-color-orange-1200: #590e00;
+  --dh-color-orange-1300: #420c00;
+  --dh-color-orange-1400: #2c0901;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* Solarized Yellow (#b58900) - accent color anchored at 700 */
+  --dh-color-yellow-100: #fff7e0;
+  --dh-color-yellow-200: #fff7d0;
+  --dh-color-yellow-300: #ffeab4;
+  --dh-color-yellow-400: #f5d590;
+  --dh-color-yellow-500: #e3bd67;
+  --dh-color-yellow-600: #cda23c;
+  --dh-color-yellow-700: #b58900;
+  --dh-color-yellow-800: #9c7100;
+  --dh-color-yellow-900: #805b00;
+  --dh-color-yellow-1000: #684800;
+  --dh-color-yellow-1100: #513700;
+  --dh-color-yellow-1200: #3e2800;
+  --dh-color-yellow-1300: #2e1d00;
+  --dh-color-yellow-1400: #1e1300;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived - between yellow and green anchored at 700 */
+  --dh-color-chartreuse-100: #f1fbe0;
+  --dh-color-chartreuse-200: #e1f1c6;
+  --dh-color-chartreuse-300: #cee3a8;
+  --dh-color-chartreuse-400: #b8d186;
+  --dh-color-chartreuse-500: #9fbd5f;
+  --dh-color-chartreuse-600: #85a437;
+  --dh-color-chartreuse-700: #6d8c00;
+  --dh-color-chartreuse-800: #577400;
+  --dh-color-chartreuse-900: #435b00;
+  --dh-color-chartreuse-1000: #334700;
+  --dh-color-chartreuse-1100: #233300;
+  --dh-color-chartreuse-1200: #162300;
+  --dh-color-chartreuse-1300: #0d1700;
+  --dh-color-chartreuse-1400: #050b00;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - between chartreuse and green anchored at 700 */
+  --dh-color-celery-100: #f2fee1;
+  --dh-color-celery-200: #ecffd0;
+  --dh-color-celery-300: #d8f1b1;
+  --dh-color-celery-400: #c0e08d;
+  --dh-color-celery-500: #a7cb65;
+  --dh-color-celery-600: #8cb33b;
+  --dh-color-celery-700: #739a00;
+  --dh-color-celery-800: #5c8100;
+  --dh-color-celery-900: #496800;
+  --dh-color-celery-1000: #385300;
+  --dh-color-celery-1100: #293f00;
+  --dh-color-celery-1200: #1c2e00;
+  --dh-color-celery-1300: #132100;
+  --dh-color-celery-1400: #0a1400;
+
+  /* ============ GREEN PALETTE ============ */
+  /* Solarized Green (#859900) - keywords, success anchored at 700 */
+  --dh-color-green-100: #f5fde0;
+  --dh-color-green-200: #f4ffd1;
+  --dh-color-green-300: #e3f2b3;
+  --dh-color-green-400: #cee08f;
+  --dh-color-green-500: #b7cb66;
+  --dh-color-green-600: #9db23c;
+  --dh-color-green-700: #859900;
+  --dh-color-green-800: #6e8000;
+  --dh-color-green-900: #586800;
+  --dh-color-green-1000: #465300;
+  --dh-color-green-1100: #353f00;
+  --dh-color-green-1200: #262f00;
+  --dh-color-green-1300: #1b2200;
+  --dh-color-green-1400: #101500;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived - between green and cyan anchored at 700 */
+  --dh-color-seafoam-100: #e8fff1;
+  --dh-color-seafoam-200: #d4fae4;
+  --dh-color-seafoam-300: #b8edd0;
+  --dh-color-seafoam-400: #99ddb8;
+  --dh-color-seafoam-500: #75ca9e;
+  --dh-color-seafoam-600: #4fb283;
+  --dh-color-seafoam-700: #2a9a6a;
+  --dh-color-seafoam-800: #008153;
+  --dh-color-seafoam-900: #00693f;
+  --dh-color-seafoam-1000: #00542d;
+  --dh-color-seafoam-1100: #003f1f;
+  --dh-color-seafoam-1200: #002d14;
+  --dh-color-seafoam-1300: #001e0c;
+  --dh-color-seafoam-1400: #001106;
+
+  /* ============ CYAN PALETTE ============ */
+  /* Solarized Cyan (#2aa198) - strings anchored at 700 */
+  --dh-color-cyan-100: #e6fefb;
+  --dh-color-cyan-200: #dbfffd;
+  --dh-color-cyan-300: #bff6ef;
+  --dh-color-cyan-400: #9fe5dd;
+  --dh-color-cyan-500: #79d1c9;
+  --dh-color-cyan-600: #52b9b0;
+  --dh-color-cyan-700: #2aa198;
+  --dh-color-cyan-800: #008880;
+  --dh-color-cyan-900: #007068;
+  --dh-color-cyan-1000: #005b54;
+  --dh-color-cyan-1100: #004540;
+  --dh-color-cyan-1200: #00342f;
+  --dh-color-cyan-1300: #002522;
+  --dh-color-cyan-1400: #001715;
+
+  /* ============ BLUE PALETTE ============ */
+  /* Solarized Blue (#268bd2) - functions, variables anchored at 700 */
+  --dh-color-blue-100: #e7fbff;
+  --dh-color-blue-200: #d8f4ff;
+  --dh-color-blue-300: #b8e6ff;
+  --dh-color-blue-400: #95d3ff;
+  --dh-color-blue-500: #71bdfc;
+  --dh-color-blue-600: #4ba4e9;
+  --dh-color-blue-700: #268bd2;
+  --dh-color-blue-800: #0072b8;
+  --dh-color-blue-900: #005b9a;
+  --dh-color-blue-1000: #004681;
+  --dh-color-blue-1100: #003365;
+  --dh-color-blue-1200: #00244b;
+  --dh-color-blue-1300: #001834;
+  --dh-color-blue-1400: #000d1f;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived - between blue and violet anchored at 700 */
+  --dh-color-indigo-100: #e0edff;
+  --dh-color-indigo-200: #cce0ff;
+  --dh-color-indigo-300: #b5cfff;
+  --dh-color-indigo-400: #9bbbfc;
+  --dh-color-indigo-500: #7fa4f1;
+  --dh-color-indigo-600: #638adf;
+  --dh-color-indigo-700: #4a71c8;
+  --dh-color-indigo-800: #3459ae;
+  --dh-color-indigo-900: #224290;
+  --dh-color-indigo-1000: #132f77;
+  --dh-color-indigo-1100: #071d5b;
+  --dh-color-indigo-1200: #031040;
+  --dh-color-indigo-1300: #010729;
+  --dh-color-indigo-1400: #000214;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* Solarized Violet (#6c71c4) anchored at 700 */
+  --dh-color-purple-100: #edf1ff;
+  --dh-color-purple-200: #dde3ff;
+  --dh-color-purple-300: #cbd1ff;
+  --dh-color-purple-400: #b5bcfb;
+  --dh-color-purple-500: #9da4ee;
+  --dh-color-purple-600: #848adb;
+  --dh-color-purple-700: #6c71c4;
+  --dh-color-purple-800: #5659aa;
+  --dh-color-purple-900: #42438d;
+  --dh-color-purple-1000: #313074;
+  --dh-color-purple-1100: #211f59;
+  --dh-color-purple-1200: #151340;
+  --dh-color-purple-1300: #0b0a2a;
+  --dh-color-purple-1400: #040416;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Derived - between magenta and red anchored at 700 */
+  --dh-color-fuchsia-100: #ffe0ee;
+  --dh-color-fuchsia-200: #ffcbe1;
+  --dh-color-fuchsia-300: #ffb3d2;
+  --dh-color-fuchsia-400: #fe97bf;
+  --dh-color-fuchsia-500: #f277aa;
+  --dh-color-fuchsia-600: #dd5592;
+  --dh-color-fuchsia-700: #c4357a;
+  --dh-color-fuchsia-800: #a81263;
+  --dh-color-fuchsia-900: #8a004d;
+  --dh-color-fuchsia-1000: #6c003a;
+  --dh-color-fuchsia-1100: #4e0027;
+  --dh-color-fuchsia-1200: #360019;
+  --dh-color-fuchsia-1300: #23000d;
+  --dh-color-fuchsia-1400: #110004;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Solarized Magenta (#d33682) - numbers anchored at 700 */
+  --dh-color-magenta-100: #ffecf7;
+  --dh-color-magenta-200: #ffd8ea;
+  --dh-color-magenta-300: #ffbeda;
+  --dh-color-magenta-400: #ff9dc8;
+  --dh-color-magenta-500: #ff7bb2;
+  --dh-color-magenta-600: #ec589a;
+  --dh-color-magenta-700: #d33682;
+  --dh-color-magenta-800: #b7106b;
+  --dh-color-magenta-900: #980054;
+  --dh-color-magenta-1000: #790041;
+  --dh-color-magenta-1100: #5a002e;
+  --dh-color-magenta-1200: #41001f;
+  --dh-color-magenta-1300: #2d0013;
+  --dh-color-magenta-1400: #1a0009;
+
+  /* ============ SEMANTIC - ACCENT (Yellow) ============ */
+  /* Accent closest to #AC9D57 - using yellow-600 as base */
+  --dh-color-accent-100: var(--dh-color-yellow-100);
+  --dh-color-accent-200: var(--dh-color-yellow-200);
+  --dh-color-accent-300: var(--dh-color-yellow-300);
+  --dh-color-accent-400: var(--dh-color-yellow-400);
+  --dh-color-accent-500: var(--dh-color-yellow-500);
+  --dh-color-accent-600: var(--dh-color-yellow-600);
+  --dh-color-accent-700: var(--dh-color-yellow-700);
+  --dh-color-accent-800: var(--dh-color-yellow-800);
+  --dh-color-accent-900: var(--dh-color-yellow-900);
+  --dh-color-accent-1000: var(--dh-color-yellow-1000);
+  --dh-color-accent-1100: var(--dh-color-yellow-1100);
+  --dh-color-accent-1200: var(--dh-color-yellow-1200);
+  --dh-color-accent-1300: var(--dh-color-yellow-1300);
+  --dh-color-accent-1400: var(--dh-color-yellow-1400);
+
+  /* Accent semantic - adjusted for yellow-600 as primary accent */
+  --dh-color-accent: var(--dh-color-yellow-600);
+  --dh-color-accent-bg: var(--dh-color-yellow-600);
+  --dh-color-accent-hover-bg: var(--dh-color-yellow-700);
+  --dh-color-accent-down-bg: var(--dh-color-yellow-500);
+  --dh-color-accent-key-focus-bg: var(--dh-color-yellow-700);
+  --dh-color-accent-contrast: var(--dh-color-gray-100);
+
+  /* ============ SEMANTIC - POSITIVE (Green) ============ */
+  --dh-color-visual-positive: var(--dh-color-green-700);
+
+  /* ============ SEMANTIC - NEGATIVE (Red) ============ */
+  --dh-color-visual-negative: var(--dh-color-red-800);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using Solarized background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-300);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-50);
+
+  /* Grid text color - matches editor string color (cyan) */
+  --dh-color-grid-text: var(--dh-color-cyan-800);
+
+  /* Chart colorway using Solarized palette colors */
+  --dh-color-chart-colorway: var(--dh-color-blue-700) var(--dh-color-cyan-700)
+    var(--dh-color-green-700) var(--dh-color-orange-800)
+    var(--dh-color-purple-700) var(--dh-color-yellow-700)
+    var(--dh-color-red-800) var(--dh-color-magenta-700)
+    var(--dh-color-chartreuse-700) var(--dh-color-indigo-700);
+
+  /* ============ EDITOR SEMANTIC - SOLARIZED SYNTAX ============ */
+  /* Based on official Solarized syntax colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-100);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-bg: var(--dh-color-gray-200);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);
+
+  /* Code syntax highlighting per Solarized */
+  --dh-color-editor-comment: var(
+    --dh-color-gray-700
+  ); /* Comments - one shade darker */
+  --dh-color-editor-keyword: var(
+    --dh-color-green-700
+  ); /* Keywords - green #859900 */
+  --dh-color-editor-storage: var(
+    --dh-color-gray-800
+  ); /* Storage - base01 #586E75 */
+  --dh-color-editor-number: var(
+    --dh-color-magenta-700
+  ); /* Numbers - magenta #d33682 */
+  --dh-color-editor-string: var(
+    --dh-color-cyan-800
+  ); /* Strings - one shade darker */
+  --dh-color-editor-string-delim: var(
+    --dh-color-cyan-800
+  ); /* String delimiters */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-900
+  ); /* Default identifiers */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-blue-700
+  ); /* Functions - blue #268bd2 */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-orange-800
+  ); /* Classes - orange #cb4b16 */
+  --dh-color-editor-predefined: var(
+    --dh-color-blue-700
+  ); /* Support functions - blue */
+  --dh-color-editor-operator: var(--dh-color-green-700); /* Operators - green */
+  --dh-color-editor-delimiter: var(--dh-color-gray-900); /* Delimiters */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-800
+  ); /* Errors - red #dc322f */
+
+  /* Bracket colors - Solarized accent cycle */
+  --dh-color-editor-bracket-fg1: var(--dh-color-blue-700);
+  --dh-color-editor-bracket-fg2: var(--dh-color-green-700);
+  --dh-color-editor-bracket-fg3: var(--dh-color-orange-800);
+  --dh-color-editor-bracket-fg4: var(--dh-color-cyan-700);
+  --dh-color-editor-bracket-fg5: var(--dh-color-magenta-700);
+  --dh-color-editor-bracket-fg6: var(--dh-color-purple-700);
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-800);
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-500);
+  --dh-color-editor-line-number-active-fg: var(--dh-color-gray-800);
+}
diff --git a/plugins/theme-pack/src/js/src/synthwave84-theme.css b/plugins/theme-pack/src/js/src/synthwave84-theme.css
new file mode 100644
index 000000000..d47d322bc
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/synthwave84-theme.css
@@ -0,0 +1,318 @@
+/* SynthWave '84 Theme for Deephaven */
+/* Retro synthwave aesthetic with neon colors on dark purple backgrounds */
+/* Source: VS Code SynthWave '84 theme */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Background (#262335) at gray-100, Foreground (#ffffff) at gray-900 */
+  /* Multi-anchor: activityBar (#171520) at 50, sideBar (#241b2f) at 75, editor (#262335) at 100 */
+  --dh-color-gray-50: #171520;
+  --dh-color-gray-75: #241b2f;
+  --dh-color-gray-100: #262335;
+  --dh-color-gray-200: #34294f;
+  --dh-color-gray-300: #463564;
+  --dh-color-gray-400: #5a4578;
+  --dh-color-gray-500: #70588c;
+  --dh-color-gray-600: #886da0;
+  --dh-color-gray-700: #a185b4;
+  --dh-color-gray-800: #bca0c8;
+  --dh-color-gray-900: #ffffff;
+
+  /* ============ RED PALETTE ============ */
+  /* SynthWave red (#fe4450) anchored at 600 - used for errors, types */
+  --dh-color-red-100: #4a0a0e;
+  --dh-color-red-200: #5e0f14;
+  --dh-color-red-300: #73141a;
+  --dh-color-red-400: #8f1c22;
+  --dh-color-red-500: #b22a30;
+  --dh-color-red-600: #fe4450;
+  --dh-color-red-700: #ff6a74;
+  --dh-color-red-800: #ff8f97;
+  --dh-color-red-900: #ffb3b8;
+  --dh-color-red-1000: #ffcdd0;
+  --dh-color-red-1100: #ffe2e4;
+  --dh-color-red-1200: #ffeeef;
+  --dh-color-red-1300: #fff5f6;
+  --dh-color-red-1400: #fffafa;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* SynthWave coral (#f97e72) anchored at 700 - used for constants */
+  --dh-color-orange-100: #3d1a0f;
+  --dh-color-orange-200: #4e2214;
+  --dh-color-orange-300: #612b1a;
+  --dh-color-orange-400: #7a3822;
+  --dh-color-orange-500: #97482d;
+  --dh-color-orange-600: #b85c3c;
+  --dh-color-orange-700: #f97e72;
+  --dh-color-orange-800: #ff9b8f;
+  --dh-color-orange-900: #ffb8af;
+  --dh-color-orange-1000: #ffd0ca;
+  --dh-color-orange-1100: #ffe4e0;
+  --dh-color-orange-1200: #fff0ee;
+  --dh-color-orange-1300: #fff7f5;
+  --dh-color-orange-1400: #fffbfa;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* SynthWave yellow (#fede5d) anchored at 1000 - used for keywords */
+  --dh-color-yellow-100: #3a3006;
+  --dh-color-yellow-200: #4a3d08;
+  --dh-color-yellow-300: #5c4b0a;
+  --dh-color-yellow-400: #735f0d;
+  --dh-color-yellow-500: #8d7512;
+  --dh-color-yellow-600: #a98d1a;
+  --dh-color-yellow-700: #c5a624;
+  --dh-color-yellow-800: #e0c032;
+  --dh-color-yellow-900: #f2d546;
+  --dh-color-yellow-1000: #fede5d;
+  --dh-color-yellow-1100: #fee87d;
+  --dh-color-yellow-1200: #fef0a0;
+  --dh-color-yellow-1300: #fef6c2;
+  --dh-color-yellow-1400: #fefae0;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived between yellow and green */
+  --dh-color-chartreuse-100: #1a2a06;
+  --dh-color-chartreuse-200: #223608;
+  --dh-color-chartreuse-300: #2b440a;
+  --dh-color-chartreuse-400: #38580d;
+  --dh-color-chartreuse-500: #477012;
+  --dh-color-chartreuse-600: #588918;
+  --dh-color-chartreuse-700: #6aa320;
+  --dh-color-chartreuse-800: #7dbe2a;
+  --dh-color-chartreuse-900: #92d837;
+  --dh-color-chartreuse-1000: #a8ed4a;
+  --dh-color-chartreuse-1100: #bff56c;
+  --dh-color-chartreuse-1200: #d4fa92;
+  --dh-color-chartreuse-1300: #e6fcb8;
+  --dh-color-chartreuse-1400: #f3fed8;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived yellowish green */
+  --dh-color-celery-100: #142608;
+  --dh-color-celery-200: #1a310a;
+  --dh-color-celery-300: #213d0d;
+  --dh-color-celery-400: #2b4f11;
+  --dh-color-celery-500: #376516;
+  --dh-color-celery-600: #457c1c;
+  --dh-color-celery-700: #549524;
+  --dh-color-celery-800: #64af2d;
+  --dh-color-celery-900: #76c938;
+  --dh-color-celery-1000: #8ae045;
+  --dh-color-celery-1100: #a2f060;
+  --dh-color-celery-1200: #bcf882;
+  --dh-color-celery-1300: #d5fcaa;
+  --dh-color-celery-1400: #eafed0;
+
+  /* ============ GREEN PALETTE ============ */
+  /* SynthWave mint green (#72f1b8) anchored at 900 - used for tags */
+  --dh-color-green-100: #062e20;
+  --dh-color-green-200: #0a3c29;
+  --dh-color-green-300: #0e4b33;
+  --dh-color-green-400: #145f42;
+  --dh-color-green-500: #1c7754;
+  --dh-color-green-600: #269068;
+  --dh-color-green-700: #33aa7e;
+  --dh-color-green-800: #48c596;
+  --dh-color-green-900: #72f1b8;
+  --dh-color-green-1000: #8ff5c7;
+  --dh-color-green-1100: #acf8d6;
+  --dh-color-green-1200: #c8fbe4;
+  --dh-color-green-1300: #e0fdef;
+  --dh-color-green-1400: #f0fef6;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived between green and cyan */
+  --dh-color-seafoam-100: #042b25;
+  --dh-color-seafoam-200: #07382f;
+  --dh-color-seafoam-300: #0a463a;
+  --dh-color-seafoam-400: #0f5a4a;
+  --dh-color-seafoam-500: #15715d;
+  --dh-color-seafoam-600: #1d8972;
+  --dh-color-seafoam-700: #28a388;
+  --dh-color-seafoam-800: #38bea0;
+  --dh-color-seafoam-900: #52dab8;
+  --dh-color-seafoam-1000: #6eeecb;
+  --dh-color-seafoam-1100: #8ff7da;
+  --dh-color-seafoam-1200: #b2fbe7;
+  --dh-color-seafoam-1300: #d2fdf1;
+  --dh-color-seafoam-1400: #ebfef8;
+
+  /* ============ CYAN PALETTE ============ */
+  /* SynthWave cyan (#36f9f6) anchored at 800 - used for functions */
+  --dh-color-cyan-100: #052c2c;
+  --dh-color-cyan-200: #083939;
+  --dh-color-cyan-300: #0b4747;
+  --dh-color-cyan-400: #105b5a;
+  --dh-color-cyan-500: #167271;
+  --dh-color-cyan-600: #1e8b8a;
+  --dh-color-cyan-700: #28a6a4;
+  --dh-color-cyan-800: #36f9f6;
+  --dh-color-cyan-900: #5bfaf8;
+  --dh-color-cyan-1000: #7ffcfa;
+  --dh-color-cyan-1100: #a2fdfc;
+  --dh-color-cyan-1200: #c4fefd;
+  --dh-color-cyan-1300: #dffffe;
+  --dh-color-cyan-1400: #f0fffe;
+
+  /* ============ BLUE PALETTE ============ */
+  /* SynthWave blue (#495495) anchored at 600 - used for borders */
+  --dh-color-blue-100: #0e1127;
+  --dh-color-blue-200: #141832;
+  --dh-color-blue-300: #1b203e;
+  --dh-color-blue-400: #262b50;
+  --dh-color-blue-500: #343a66;
+  --dh-color-blue-600: #495495;
+  --dh-color-blue-700: #5e6ab0;
+  --dh-color-blue-800: #7682c7;
+  --dh-color-blue-900: #909bda;
+  --dh-color-blue-1000: #aab3e8;
+  --dh-color-blue-1100: #c4caf2;
+  --dh-color-blue-1200: #dcdff8;
+  --dh-color-blue-1300: #eceefb;
+  --dh-color-blue-1400: #f6f7fd;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived between blue and purple */
+  --dh-color-indigo-100: #140e28;
+  --dh-color-indigo-200: #1b1434;
+  --dh-color-indigo-300: #231b42;
+  --dh-color-indigo-400: #2e2555;
+  --dh-color-indigo-500: #3c326c;
+  --dh-color-indigo-600: #4c4085;
+  --dh-color-indigo-700: #5e509f;
+  --dh-color-indigo-800: #7262b8;
+  --dh-color-indigo-900: #8877ce;
+  --dh-color-indigo-1000: #9f8edf;
+  --dh-color-indigo-1100: #b7a7ec;
+  --dh-color-indigo-1200: #cfc2f5;
+  --dh-color-indigo-1300: #e4dcfa;
+  --dh-color-indigo-1400: #f3f0fd;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* SynthWave purple (#614d85) anchored at 600 - used for buttons/accent */
+  --dh-color-purple-100: #1a1228;
+  --dh-color-purple-200: #231834;
+  --dh-color-purple-300: #2d1f42;
+  --dh-color-purple-400: #3b2a56;
+  --dh-color-purple-500: #4c386d;
+  --dh-color-purple-600: #614d85;
+  --dh-color-purple-700: #7863a0;
+  --dh-color-purple-800: #917bb8;
+  --dh-color-purple-900: #ab95cf;
+  --dh-color-purple-1000: #c4b0e2;
+  --dh-color-purple-1100: #dccbf0;
+  --dh-color-purple-1200: #ece2f7;
+  --dh-color-purple-1300: #f5f0fb;
+  --dh-color-purple-1400: #faf8fd;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* SynthWave pink (#ff7edb) anchored at 800 - used for variables */
+  --dh-color-fuchsia-100: #2e0825;
+  --dh-color-fuchsia-200: #3d0c31;
+  --dh-color-fuchsia-300: #4d103e;
+  --dh-color-fuchsia-400: #631650;
+  --dh-color-fuchsia-500: #7e1f66;
+  --dh-color-fuchsia-600: #9b2b7e;
+  --dh-color-fuchsia-700: #ba3a98;
+  --dh-color-fuchsia-800: #ff7edb;
+  --dh-color-fuchsia-900: #ff98e3;
+  --dh-color-fuchsia-1000: #ffb2eb;
+  --dh-color-fuchsia-1100: #ffcaf1;
+  --dh-color-fuchsia-1200: #ffdef6;
+  --dh-color-fuchsia-1300: #ffeffb;
+  --dh-color-fuchsia-1400: #fff7fd;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Derived purple-magenta */
+  --dh-color-magenta-100: #280820;
+  --dh-color-magenta-200: #350c2a;
+  --dh-color-magenta-300: #441035;
+  --dh-color-magenta-400: #581644;
+  --dh-color-magenta-500: #701e58;
+  --dh-color-magenta-600: #8a286e;
+  --dh-color-magenta-700: #a63486;
+  --dh-color-magenta-800: #c2449f;
+  --dh-color-magenta-900: #dd5ab8;
+  --dh-color-magenta-1000: #ee74cc;
+  --dh-color-magenta-1100: #f892db;
+  --dh-color-magenta-1200: #fdb2e8;
+  --dh-color-magenta-1300: #ffd0f2;
+  --dh-color-magenta-1400: #ffe8f9;
+
+  /* ============ SEMANTIC - ACCENT (Purple) ============ */
+  --dh-color-accent-100: var(--dh-color-purple-100);
+  --dh-color-accent-200: var(--dh-color-purple-200);
+  --dh-color-accent-300: var(--dh-color-purple-300);
+  --dh-color-accent-400: var(--dh-color-purple-400);
+  --dh-color-accent-500: var(--dh-color-purple-500);
+  --dh-color-accent-600: var(--dh-color-purple-600);
+  --dh-color-accent-700: var(--dh-color-purple-700);
+  --dh-color-accent-800: var(--dh-color-purple-800);
+  --dh-color-accent-900: var(--dh-color-purple-900);
+  --dh-color-accent-1000: var(--dh-color-purple-1000);
+  --dh-color-accent-1100: var(--dh-color-purple-1100);
+  --dh-color-accent-1200: var(--dh-color-purple-1200);
+  --dh-color-accent-1300: var(--dh-color-purple-1300);
+  --dh-color-accent-1400: var(--dh-color-purple-1400);
+
+  /* ============ SEMANTIC - POSITIVE (Green) ============ */
+  --dh-color-visual-positive: var(--dh-color-green-900);
+
+  /* ============ SEMANTIC - NEGATIVE (Red) ============ */
+  --dh-color-negative: var(--dh-color-red-600);
+  --dh-color-negative-bg: var(--dh-color-negative);
+  --dh-color-negative-hover-bg: var(--dh-color-red-500);
+  --dh-color-negative-down-bg: var(--dh-color-red-400);
+  --dh-color-negative-key-focus-bg: var(--dh-color-red-500);
+  --dh-color-visual-negative: var(--dh-color-red-600);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using SynthWave background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-200);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using SynthWave neon colors */
+  --dh-color-chart-colorway: var(--dh-color-fuchsia-800) var(--dh-color-cyan-800)
+    var(--dh-color-green-900) var(--dh-color-yellow-1000)
+    var(--dh-color-orange-700) var(--dh-color-purple-700)
+    var(--dh-color-red-600) var(--dh-color-blue-700) var(--dh-color-magenta-800)
+    var(--dh-color-indigo-700);
+
+  /* ============ EDITOR SEMANTIC - SYNTHWAVE SYNTAX ============ */
+  /* Based on SynthWave '84 token colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-100);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-200);
+  --dh-color-editor-selection-bg: var(--dh-color-gray-300);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-gray-200);
+
+  /* Code syntax highlighting per SynthWave spec */
+  --dh-color-editor-comment: var(--dh-color-blue-700); /* Comments - #848BBD (bluish gray) */
+  --dh-color-editor-keyword: var(--dh-color-yellow-1000); /* Keywords - Yellow #FEDE5D */
+  --dh-color-editor-storage: var(--dh-color-yellow-1000); /* Storage types - Yellow */
+  --dh-color-editor-number: var(--dh-color-orange-700); /* Numbers, constants - Coral #F97E72 */
+  --dh-color-editor-string: var(--dh-color-orange-700); /* Strings - Orange #FF8B39 */
+  --dh-color-editor-string-delim: var(--dh-color-orange-700); /* String delimiters */
+  --dh-color-editor-identifier: var(--dh-color-fuchsia-800); /* Variables - Pink #FF7EDB */
+  --dh-color-editor-identifier-js: var(--dh-color-fuchsia-800); /* JS Variables - Pink */
+  --dh-color-editor-identifier-namespace: var(--dh-color-red-600); /* Types, classes - Red #FE4450 */
+  --dh-color-editor-predefined: var(--dh-color-cyan-800); /* Functions - Cyan #36F9F6 */
+  --dh-color-editor-operator: var(--dh-color-yellow-1000); /* Operators - Yellow */
+  --dh-color-editor-delimiter: var(--dh-color-gray-800); /* Delimiters */
+  --dh-color-editor-error-fg: var(--dh-color-red-600); /* Errors - Red #FE4450 */
+
+  /* Bracket colors - SynthWave style cycling through neon colors */
+  --dh-color-editor-bracket-fg1: var(--dh-color-fuchsia-800); /* Pink */
+  --dh-color-editor-bracket-fg2: var(--dh-color-cyan-800); /* Cyan */
+  --dh-color-editor-bracket-fg3: var(--dh-color-yellow-1000); /* Yellow */
+  --dh-color-editor-bracket-fg4: var(--dh-color-green-900); /* Green */
+  --dh-color-editor-bracket-fg5: var(--dh-color-orange-700); /* Orange */
+  --dh-color-editor-bracket-fg6: var(--dh-color-purple-800); /* Purple */
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-600); /* Red */
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-600);
+  --dh-color-editor-line-number-active-fg: var(--dh-color-gray-900);
+}
diff --git a/plugins/theme-pack/src/js/src/tomorrow-night-blue-theme.css b/plugins/theme-pack/src/js/src/tomorrow-night-blue-theme.css
new file mode 100644
index 000000000..6de9b7cb3
--- /dev/null
+++ b/plugins/theme-pack/src/js/src/tomorrow-night-blue-theme.css
@@ -0,0 +1,345 @@
+/* Tomorrow Night Blue Theme for Deephaven */
+/* Generated from VS Code Tomorrow Night Blue theme */
+/* Deep blue backgrounds with soft pastel syntax colors */
+:root {
+  /* ============ GRAY PALETTE ============ */
+  /* Background (#002451) at gray-100, Foreground (#ffffff) at gray-900 */
+  /* Using VS Code theme backgrounds: titleBar (#001126), tabs (#001733), editor (#002451), sidebar (#001c40) */
+  --dh-color-gray-50: #000d1f;
+  --dh-color-gray-75: #001126; /* titleBar.activeBackground */
+  --dh-color-gray-100: #001733; /* editorGroupHeader.tabsBackground, input */
+  --dh-color-gray-200: #001c40; /* sideBar.background, tab.inactiveBackground */
+  --dh-color-gray-300: #002451; /* editor.background */
+  --dh-color-gray-400: #1a4a7a;
+  --dh-color-gray-500: #3d6a9a;
+  --dh-color-gray-600: #6089b5;
+  --dh-color-gray-700: #85a7cc;
+  --dh-color-gray-800: #acc5e0;
+  --dh-color-gray-900: #ffffff; /* editor.foreground */
+
+  /* ============ RED PALETTE ============ */
+  /* Tomorrow Night Blue Red/Pink - variables, tags (#FF9DA4) anchored at 900 */
+  --dh-color-red-100: #3d1215;
+  --dh-color-red-200: #52191d;
+  --dh-color-red-300: #682126;
+  --dh-color-red-400: #832c33;
+  --dh-color-red-500: #a33b42;
+  --dh-color-red-600: #c24e57;
+  --dh-color-red-700: #de656e;
+  --dh-color-red-800: #f47f88;
+  --dh-color-red-900: #ff9da4; /* #FF9DA4 - variables, tags */
+  --dh-color-red-1000: #ffb5ba;
+  --dh-color-red-1100: #ffcbce;
+  --dh-color-red-1200: #ffdfe1;
+  --dh-color-red-1300: #ffeff0;
+  --dh-color-red-1400: #fff7f8;
+
+  /* ============ ORANGE PALETTE ============ */
+  /* Tomorrow Night Blue Orange - numbers, constants (#FFC58F) anchored at 900 */
+  --dh-color-orange-100: #2d1a00;
+  --dh-color-orange-200: #402600;
+  --dh-color-orange-300: #543300;
+  --dh-color-orange-400: #6e4400;
+  --dh-color-orange-500: #8c5800;
+  --dh-color-orange-600: #aa6f14;
+  --dh-color-orange-700: #c7882e;
+  --dh-color-orange-800: #e3a24f;
+  --dh-color-orange-900: #ffc58f; /* #FFC58F - numbers, constants */
+  --dh-color-orange-1000: #ffd4a8;
+  --dh-color-orange-1100: #ffe2c2;
+  --dh-color-orange-1200: #ffedd9;
+  --dh-color-orange-1300: #fff5eb;
+  --dh-color-orange-1400: #fffaf5;
+
+  /* ============ YELLOW PALETTE ============ */
+  /* Tomorrow Night Blue Yellow - classes, types (#FFEEAD) anchored at 1000 */
+  --dh-color-yellow-100: #2e2600;
+  --dh-color-yellow-200: #403500;
+  --dh-color-yellow-300: #534500;
+  --dh-color-yellow-400: #6b5900;
+  --dh-color-yellow-500: #877000;
+  --dh-color-yellow-600: #a38900;
+  --dh-color-yellow-700: #c0a31f;
+  --dh-color-yellow-800: #dcbe46;
+  --dh-color-yellow-900: #f2d86e;
+  --dh-color-yellow-1000: #ffeead; /* #FFEEAD - classes, types */
+  --dh-color-yellow-1100: #fff4c6;
+  --dh-color-yellow-1200: #fff8d9;
+  --dh-color-yellow-1300: #fffbe9;
+  --dh-color-yellow-1400: #fffdf4;
+
+  /* ============ CHARTREUSE PALETTE ============ */
+  /* Derived - between yellow and green */
+  --dh-color-chartreuse-100: #1a2200;
+  --dh-color-chartreuse-200: #253100;
+  --dh-color-chartreuse-300: #314100;
+  --dh-color-chartreuse-400: #425600;
+  --dh-color-chartreuse-500: #566e00;
+  --dh-color-chartreuse-600: #6c8800;
+  --dh-color-chartreuse-700: #84a300;
+  --dh-color-chartreuse-800: #9ebf1a;
+  --dh-color-chartreuse-900: #b8da42;
+  --dh-color-chartreuse-1000: #d0f06c;
+  --dh-color-chartreuse-1100: #e2ff96;
+  --dh-color-chartreuse-1200: #edffb8;
+  --dh-color-chartreuse-1300: #f5ffd6;
+  --dh-color-chartreuse-1400: #faffeb;
+
+  /* ============ CELERY PALETTE ============ */
+  /* Derived - yellowish green */
+  --dh-color-celery-100: #132200;
+  --dh-color-celery-200: #1c3100;
+  --dh-color-celery-300: #264100;
+  --dh-color-celery-400: #345600;
+  --dh-color-celery-500: #456e00;
+  --dh-color-celery-600: #588800;
+  --dh-color-celery-700: #6da300;
+  --dh-color-celery-800: #84bf15;
+  --dh-color-celery-900: #9cda3a;
+  --dh-color-celery-1000: #b5f060;
+  --dh-color-celery-1100: #cdff8a;
+  --dh-color-celery-1200: #dffeae;
+  --dh-color-celery-1300: #edffce;
+  --dh-color-celery-1400: #f6ffe7;
+
+  /* ============ GREEN PALETTE ============ */
+  /* Tomorrow Night Blue Green - strings (#D1F1A9) anchored at 1000 */
+  --dh-color-green-100: #0f2400;
+  --dh-color-green-200: #173300;
+  --dh-color-green-300: #204300;
+  --dh-color-green-400: #2c5800;
+  --dh-color-green-500: #3b7100;
+  --dh-color-green-600: #4c8b00;
+  --dh-color-green-700: #5fa600;
+  --dh-color-green-800: #76c21a;
+  --dh-color-green-900: #8fdd40;
+  --dh-color-green-1000: #d1f1a9; /* #D1F1A9 - strings */
+  --dh-color-green-1100: #e0f8c2;
+  --dh-color-green-1200: #ecfcd8;
+  --dh-color-green-1300: #f5fee9;
+  --dh-color-green-1400: #fafff4;
+
+  /* ============ SEAFOAM PALETTE ============ */
+  /* Derived - between green and cyan */
+  --dh-color-seafoam-100: #002416;
+  --dh-color-seafoam-200: #003320;
+  --dh-color-seafoam-300: #00432b;
+  --dh-color-seafoam-400: #00583a;
+  --dh-color-seafoam-500: #00714c;
+  --dh-color-seafoam-600: #008b60;
+  --dh-color-seafoam-700: #00a676;
+  --dh-color-seafoam-800: #1ac28e;
+  --dh-color-seafoam-900: #42dda8;
+  --dh-color-seafoam-1000: #6cf0c2;
+  --dh-color-seafoam-1100: #96ffd9;
+  --dh-color-seafoam-1200: #b8ffe8;
+  --dh-color-seafoam-1300: #d6fff2;
+  --dh-color-seafoam-1400: #ebfff9;
+
+  /* ============ CYAN PALETTE ============ */
+  /* Tomorrow Night Blue Cyan - operators (#99FFFF) anchored at 1000 */
+  --dh-color-cyan-100: #002626;
+  --dh-color-cyan-200: #003636;
+  --dh-color-cyan-300: #004747;
+  --dh-color-cyan-400: #005d5d;
+  --dh-color-cyan-500: #007676;
+  --dh-color-cyan-600: #009090;
+  --dh-color-cyan-700: #00abab;
+  --dh-color-cyan-800: #1ac7c7;
+  --dh-color-cyan-900: #4de2e2;
+  --dh-color-cyan-1000: #99ffff; /* #99FFFF - operators */
+  --dh-color-cyan-1100: #b3ffff;
+  --dh-color-cyan-1200: #ccffff;
+  --dh-color-cyan-1300: #e0ffff;
+  --dh-color-cyan-1400: #f0ffff;
+
+  /* ============ BLUE PALETTE ============ */
+  /* Tomorrow Night Blue Blue - functions, accent (#BBDAFF) anchored at 1000 */
+  --dh-color-blue-100: #001733;
+  --dh-color-blue-200: #002147;
+  --dh-color-blue-300: #002c5c;
+  --dh-color-blue-400: #003a77;
+  --dh-color-blue-500: #004c96;
+  --dh-color-blue-600: #1060b3;
+  --dh-color-blue-700: #3077cd;
+  --dh-color-blue-800: #5591e3;
+  --dh-color-blue-900: #7dadf3;
+  --dh-color-blue-1000: #bbdaff; /* #BBDAFF - functions */
+  --dh-color-blue-1100: #cee5ff;
+  --dh-color-blue-1200: #deefff;
+  --dh-color-blue-1300: #ecf6ff;
+  --dh-color-blue-1400: #f5faff;
+
+  /* ============ INDIGO PALETTE ============ */
+  /* Derived - between blue and purple */
+  --dh-color-indigo-100: #0f0f33;
+  --dh-color-indigo-200: #171747;
+  --dh-color-indigo-300: #20205c;
+  --dh-color-indigo-400: #2c2c77;
+  --dh-color-indigo-500: #3b3b96;
+  --dh-color-indigo-600: #4e4eb3;
+  --dh-color-indigo-700: #6464cd;
+  --dh-color-indigo-800: #7d7de3;
+  --dh-color-indigo-900: #9898f3;
+  --dh-color-indigo-1000: #b5b5ff;
+  --dh-color-indigo-1100: #cccfff;
+  --dh-color-indigo-1200: #dedeff;
+  --dh-color-indigo-1300: #ececff;
+  --dh-color-indigo-1400: #f5f5ff;
+
+  /* ============ PURPLE PALETTE ============ */
+  /* Tomorrow Night Blue Purple/Magenta - keywords, storage (#EBBBFF) anchored at 1000 */
+  --dh-color-purple-100: #1f0a2b;
+  --dh-color-purple-200: #2d1040;
+  --dh-color-purple-300: #3c1755;
+  --dh-color-purple-400: #4f2170;
+  --dh-color-purple-500: #662e8e;
+  --dh-color-purple-600: #7e3fab;
+  --dh-color-purple-700: #9854c6;
+  --dh-color-purple-800: #b36ddf;
+  --dh-color-purple-900: #ce8af5;
+  --dh-color-purple-1000: #ebbbff; /* #EBBBFF - keywords, storage */
+  --dh-color-purple-1100: #f1ccff;
+  --dh-color-purple-1200: #f6dcff;
+  --dh-color-purple-1300: #faeaff;
+  --dh-color-purple-1400: #fdf5ff;
+
+  /* ============ FUCHSIA PALETTE ============ */
+  /* Derived - between purple and magenta */
+  --dh-color-fuchsia-100: #2b0a22;
+  --dh-color-fuchsia-200: #401032;
+  --dh-color-fuchsia-300: #551743;
+  --dh-color-fuchsia-400: #702158;
+  --dh-color-fuchsia-500: #8e2e72;
+  --dh-color-fuchsia-600: #ab3f8c;
+  --dh-color-fuchsia-700: #c654a6;
+  --dh-color-fuchsia-800: #df6dc0;
+  --dh-color-fuchsia-900: #f58ada;
+  --dh-color-fuchsia-1000: #ffbbee;
+  --dh-color-fuchsia-1100: #ffccf2;
+  --dh-color-fuchsia-1200: #ffdcf6;
+  --dh-color-fuchsia-1300: #ffeafa;
+  --dh-color-fuchsia-1400: #fff5fd;
+
+  /* ============ MAGENTA PALETTE ============ */
+  /* Derived - reddish purple */
+  --dh-color-magenta-100: #2b0a17;
+  --dh-color-magenta-200: #401023;
+  --dh-color-magenta-300: #551730;
+  --dh-color-magenta-400: #702140;
+  --dh-color-magenta-500: #8e2e54;
+  --dh-color-magenta-600: #ab3f6b;
+  --dh-color-magenta-700: #c65483;
+  --dh-color-magenta-800: #df6d9d;
+  --dh-color-magenta-900: #f58ab8;
+  --dh-color-magenta-1000: #ffbbd4;
+  --dh-color-magenta-1100: #ffccdf;
+  --dh-color-magenta-1200: #ffdcea;
+  --dh-color-magenta-1300: #ffeaf2;
+  --dh-color-magenta-1400: #fff5f9;
+
+  /* ============ SEMANTIC - ACCENT (Blue) ============ */
+  /* Tomorrow Night Blue uses blue (#BBDAFF) as its primary accent */
+  --dh-color-accent-100: var(--dh-color-blue-100);
+  --dh-color-accent-200: var(--dh-color-blue-200);
+  --dh-color-accent-300: var(--dh-color-blue-300);
+  --dh-color-accent-400: var(--dh-color-blue-400);
+  --dh-color-accent-500: var(--dh-color-blue-500);
+  --dh-color-accent-600: var(--dh-color-blue-600);
+  --dh-color-accent-700: var(--dh-color-blue-700);
+  --dh-color-accent-800: var(--dh-color-blue-800);
+  --dh-color-accent-900: var(--dh-color-blue-900);
+  --dh-color-accent-1000: var(--dh-color-blue-1000);
+  --dh-color-accent-1100: var(--dh-color-blue-1100);
+  --dh-color-accent-1200: var(--dh-color-blue-1200);
+  --dh-color-accent-1300: var(--dh-color-blue-1300);
+  --dh-color-accent-1400: var(--dh-color-blue-1400);
+
+  /* ============ SEMANTIC - POSITIVE (Green) ============ */
+  --dh-color-visual-positive: var(--dh-color-green-1000);
+
+  /* ============ SEMANTIC - NEGATIVE (Red) ============ */
+  --dh-color-negative: var(--dh-color-red-700);
+  --dh-color-negative-bg: var(--dh-color-negative);
+  --dh-color-negative-hover-bg: var(--dh-color-red-600);
+  --dh-color-negative-down-bg: var(--dh-color-red-500);
+  --dh-color-negative-key-focus-bg: var(--dh-color-red-600);
+  --dh-color-visual-negative: var(--dh-color-red-900);
+
+  /* ============ COMPONENT OVERRIDES ============ */
+  /* Grid styling using Tomorrow Night Blue background tones */
+  --dh-color-grid-header-bg: var(--dh-color-gray-300);
+  --dh-color-grid-row-0-bg: var(--dh-color-gray-100);
+  --dh-color-grid-row-1-bg: var(--dh-color-gray-75);
+
+  /* Chart colorway using Tomorrow Night Blue colors */
+  --dh-color-chart-colorway: var(--dh-color-blue-1000) var(--dh-color-red-900)
+    var(--dh-color-green-1000) var(--dh-color-yellow-1000)
+    var(--dh-color-purple-1000) var(--dh-color-cyan-1000)
+    var(--dh-color-orange-900) var(--dh-color-fuchsia-900)
+    var(--dh-color-seafoam-900) var(--dh-color-indigo-900);
+
+  /* ============ EDITOR SEMANTIC - TOMORROW NIGHT BLUE SYNTAX ============ */
+  /* Based on VS Code Tomorrow Night Blue token colors */
+
+  /* Editor background and text */
+  --dh-color-editor-bg: var(--dh-color-gray-300);
+  --dh-color-editor-fg: var(--dh-color-gray-900);
+  --dh-color-editor-line-highlight-bg: var(--dh-color-gray-400);
+  --dh-color-editor-selection-bg: var(--dh-color-blue-500);
+  --dh-color-editor-inactive-selection-bg: var(--dh-color-blue-400);
+
+  /* Code syntax highlighting per Tomorrow Night Blue */
+  --dh-color-editor-comment: var(
+    --dh-color-gray-600
+  ); /* Comments - #7285B7 mapped to blue palette */
+  --dh-color-editor-keyword: var(
+    --dh-color-purple-1000
+  ); /* Keywords - #EBBBFF */
+  --dh-color-editor-storage: var(
+    --dh-color-purple-1000
+  ); /* Storage types - #EBBBFF */
+  --dh-color-editor-number: var(
+    --dh-color-orange-900
+  ); /* Numbers, constants - #FFC58F */
+  --dh-color-editor-string: var(--dh-color-green-1000); /* Strings - #D1F1A9 */
+  --dh-color-editor-string-delim: var(
+    --dh-color-green-900
+  ); /* String delimiters */
+  --dh-color-editor-identifier: var(
+    --dh-color-gray-900
+  ); /* Default identifiers - Foreground */
+  --dh-color-editor-identifier-js: var(
+    --dh-color-blue-1000
+  ); /* Functions, methods - #BBDAFF */
+  --dh-color-editor-identifier-namespace: var(
+    --dh-color-yellow-1000
+  ); /* Classes, types - #FFEEAD */
+  --dh-color-editor-predefined: var(
+    --dh-color-blue-1000
+  ); /* Support functions - #BBDAFF */
+  --dh-color-editor-operator: var(
+    --dh-color-cyan-1000
+  ); /* Operators - #99FFFF */
+  --dh-color-editor-delimiter: var(
+    --dh-color-gray-900
+  ); /* Delimiters - Foreground */
+  --dh-color-editor-error-fg: var(
+    --dh-color-red-700
+  ); /* Errors - #A92049 mapped */
+
+  /* Bracket colors - Tomorrow Night Blue style */
+  --dh-color-editor-bracket-fg1: var(--dh-color-blue-1000); /* Blue */
+  --dh-color-editor-bracket-fg2: var(--dh-color-purple-1000); /* Purple */
+  --dh-color-editor-bracket-fg3: var(--dh-color-cyan-1000); /* Cyan */
+  --dh-color-editor-bracket-fg4: var(--dh-color-yellow-1000); /* Yellow */
+  --dh-color-editor-bracket-fg5: var(--dh-color-green-1000); /* Green */
+  --dh-color-editor-bracket-fg6: var(--dh-color-orange-900); /* Orange */
+  --dh-color-editor-unexpected-bracket-fg: var(--dh-color-red-700); /* Red */
+
+  /* Line numbers */
+  --dh-color-editor-line-number-fg: var(--dh-color-gray-500); /* Dimmed */
+  --dh-color-editor-line-number-active-fg: var(
+    --dh-color-gray-700
+  ); /* Brighter */
+}
diff --git a/tests/app.d/tests.app b/tests/app.d/tests.app
index ba8bc24a9..f853ad3c3 100644
--- a/tests/app.d/tests.app
+++ b/tests/app.d/tests.app
@@ -14,4 +14,5 @@ file_7=ui_dialog.py
 file_8=ui_markdown_code.py
 file_9=ui_grid.py
 file_10=ui_plotly.py
-file_11=ag_grid.py
\ No newline at end of file
+file_11=ag_grid.py
+file_12=theme_demo.py
\ No newline at end of file
diff --git a/tests/app.d/theme_demo.py b/tests/app.d/theme_demo.py
new file mode 100644
index 000000000..e3f3c34fe
--- /dev/null
+++ b/tests/app.d/theme_demo.py
@@ -0,0 +1,83 @@
+# Dashboard for theme testing - contains table, chart, markdown, and UI controls
+from deephaven import ui
+import deephaven.plot.express as dx
+
+# Get stocks data (non-ticking for stable screenshots)
+_theme_stocks = dx.data.stocks(ticking=False).tail(100)
+
+_theme_last_prices = _theme_stocks.last_by("Sym")
+_chart_theme = dx.bar(_theme_last_prices, x="Sym", y="Price", by="Sym")
+
+# Fibonacci code example for markdown panel
+_fibonacci_code = """
+# Fibonacci Sequence Generator
+
+```python
+def fibonacci(n: int) -> list[int]:
+    if n <= 0:
+        return []
+    if n == 1:
+        return [0]
+
+    sequence = [0, 1]
+    while len(sequence) < n:
+        next_val = sequence[-1] + sequence[-2]
+        sequence.append(next_val)
+
+    return sequence
+
+
+# Generate first 10 Fibonacci numbers
+fib_10 = fibonacci(10)
+print(fib_10)
+# Output: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]
+```
+"""
+
+
+@ui.component
+def theme_controls():
+    """Component with basic UI controls for theme testing."""
+    theme_name, set_theme_name = ui.use_state("")
+    count, set_count = ui.use_state(0)
+
+    return [
+        ui.text_field(
+            label="Current Theme",
+            value=theme_name,
+            on_change=set_theme_name,
+            id="theme-name-input",
+        ),
+        ui.button(
+            f"Clicked {count} times",
+            on_press=lambda _: set_count(count + 1),
+        ),
+        ui.switch("Enable feature"),
+        ui.slider(label="Opacity", default_value=75, min_value=0, max_value=100),
+    ]
+
+
+@ui.component
+def theme_layout():
+    """Dashboard layout for theme demo."""
+    return ui.column(
+        ui.row(
+            ui.stack(
+                ui.panel(ui.table(_theme_stocks), title="Stocks Table"),
+            ),
+            ui.stack(
+                ui.panel(_chart_theme, title="Price by Symbol"),
+            ),
+        ),
+        ui.row(
+            ui.stack(
+                ui.panel(ui.markdown(_fibonacci_code), title="Example Code"),
+            ),
+            ui.stack(
+                ui.panel(theme_controls(), title="Theme Controls"),
+            ),
+        ),
+    )
+
+
+theme_demo = ui.dashboard(theme_layout())
diff --git a/tests/theme.spec.ts b/tests/theme.spec.ts
new file mode 100644
index 000000000..42728f973
--- /dev/null
+++ b/tests/theme.spec.ts
@@ -0,0 +1,135 @@
+import { expect, test, Page } from '@playwright/test';
+import { gotoPage, SELECTORS, waitForLoad } from './utils';
+
+async function openThemeDemoPanel(page: Page): Promise<void> {
+  const appPanels = page.getByRole('button', { name: 'Panels', exact: true });
+  await expect(appPanels).toBeEnabled();
+  await appPanels.click();
+
+  const search = page.getByRole('searchbox', {
+    name: 'Find Table, Plot or Widget',
+    exact: true,
+  });
+  await search.fill('theme_demo');
+
+  const targetPanel = page.getByRole('button', {
+    name: 'theme_demo',
+    exact: true,
+  });
+  await expect(targetPanel).toBeEnabled();
+  await targetPanel.click();
+
+  await page.mouse.move(0, 0);
+  await expect(page.locator(SELECTORS.REACT_PANEL)).toHaveCount(4);
+  await waitForLoad(page);
+}
+
+async function openSettingsAndGetThemes(page: Page): Promise<string[]> {
+  // Open settings sidebar
+  const settingsButton = page.getByLabel('User Settings');
+  await settingsButton.click();
+
+  // Expand theme section
+  const settingsMenu = page.locator('.app-settings-menu');
+  await expect(settingsMenu).toBeVisible();
+  await settingsMenu.getByRole('button', { name: /Default Format/i }).click();
+  const themeSection = settingsMenu.getByRole('button', { name: /theme/i });
+  await themeSection.click();
+
+  // Open color scheme dropdown and get all theme names
+  const colorSchemeDropdown = page.getByRole('button', {
+    name: 'Pick a color scheme',
+  });
+  await expect(colorSchemeDropdown).toBeVisible();
+  await colorSchemeDropdown.click();
+
+  const popover = page.getByTestId('popover');
+  await expect(popover).toBeVisible();
+  const themeNames = await popover.getByRole('option').allTextContents();
+
+  // Close dropdown
+  await page.keyboard.press('Escape');
+
+  return themeNames;
+}
+
+async function selectTheme(page: Page, themeName: string): Promise<void> {
+  const settingsMenu = page.locator('.app-settings-menu');
+  await expect(settingsMenu).toBeVisible();
+  // close the default section and open the theme section
+  // otherwise playwrigt completes the next click so fast
+  // that spectrum (which opens on mousedown, and selects on up)
+  // which can trigger the wrong items as the parent is still moving the control
+  await settingsMenu.getByRole('button', { name: /Default Format/i }).click();
+  const themeSection = settingsMenu.getByRole('button', { name: /theme/i });
+  await themeSection.click();
+
+  const colorSchemeDropdown = page.getByRole('button', {
+    name: 'Pick a color scheme',
+  });
+  await expect(colorSchemeDropdown).toBeVisible();
+  await colorSchemeDropdown.click();
+
+  const popover = page.getByTestId('popover');
+  await expect(popover).toBeVisible();
+
+  const themeOption = popover.getByRole('option', { name: themeName });
+  await themeOption.click();
+
+  // Wait for theme to apply
+  await page.waitForTimeout(2000);
+}
+
+async function closeSettings(page: Page): Promise<void> {
+  const settingsMenu = page.locator('.app-settings-menu');
+  const closeButton = settingsMenu.getByLabel('Close');
+  await closeButton.click();
+
+  await expect(settingsMenu).not.toBeVisible();
+}
+
+async function openSettings(page: Page): Promise<void> {
+  const settingsButton = page.getByLabel('User Settings');
+  await settingsButton.click();
+
+  const settingsMenu = page.locator('.app-settings-menu');
+  await expect(settingsMenu).toBeVisible();
+}
+
+async function fillThemeName(page: Page, themeName: string): Promise<void> {
+  const themeNameInput = page.getByLabel('Current Theme');
+  await themeNameInput.clear();
+  await themeNameInput.fill(themeName);
+}
+
+async function takeScreenshot(page: Page, themeName: string): Promise<void> {
+  await waitForLoad(page);
+  await page.mouse.move(0, 0);
+  await expect(page).toHaveScreenshot(`theme-${themeName}.png`);
+}
+
+test.describe('Theme switching', () => {
+  let themeNames: string[] = [];
+
+  test('All themes render correctly', async ({ page }) => {
+    await gotoPage(page, '');
+    themeNames = await openSettingsAndGetThemes(page);
+    await closeSettings(page);
+    await openThemeDemoPanel(page);
+
+    // It needs a longer timeout because it's all one test with steps.
+    // It can't be seperated into multiple tests because it only knows
+    // the theme names dynamically at runtime.
+    test.setTimeout(90000);
+    await themeNames.reduce(async (previous, themeName) => {
+      await previous;
+      await test.step(`Theme: ${themeName}`, async () => {
+        await openSettings(page);
+        await selectTheme(page, themeName);
+        await closeSettings(page);
+        await fillThemeName(page, themeName);
+        await takeScreenshot(page, themeName);
+      });
+    }, Promise.resolve());
+  });
+});
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Dark-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Dark-chromium-linux.png
new file mode 100644
index 000000000..eea9db300
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Dark-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Dark-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Dark-firefox-linux.png
new file mode 100644
index 000000000..46b9debc8
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Dark-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Dark-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Dark-webkit-linux.png
new file mode 100644
index 000000000..1b678a934
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Dark-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Light-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Light-chromium-linux.png
new file mode 100644
index 000000000..fae2e93ae
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Light-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Light-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Light-firefox-linux.png
new file mode 100644
index 000000000..6b4c02203
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Light-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Default-Light-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Default-Light-webkit-linux.png
new file mode 100644
index 000000000..2b69409ea
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Default-Light-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Dracula-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Dracula-chromium-linux.png
new file mode 100644
index 000000000..d18e85456
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Dracula-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Dracula-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Dracula-firefox-linux.png
new file mode 100644
index 000000000..2cee0a00e
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Dracula-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Dracula-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Dracula-webkit-linux.png
new file mode 100644
index 000000000..c4428dcc7
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Dracula-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-FT-Theme-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-FT-Theme-chromium-linux.png
new file mode 100644
index 000000000..53b7d24fb
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-FT-Theme-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-FT-Theme-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-FT-Theme-firefox-linux.png
new file mode 100644
index 000000000..43c73d0f5
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-FT-Theme-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-FT-Theme-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-FT-Theme-webkit-linux.png
new file mode 100644
index 000000000..598e7321d
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-FT-Theme-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-chromium-linux.png
new file mode 100644
index 000000000..812386267
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-firefox-linux.png
new file mode 100644
index 000000000..e3a3f6f35
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-webkit-linux.png
new file mode 100644
index 000000000..9865166c5
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Dark-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-chromium-linux.png
new file mode 100644
index 000000000..33d29a3ed
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-firefox-linux.png
new file mode 100644
index 000000000..caa5b58be
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-webkit-linux.png
new file mode 100644
index 000000000..c2f8257df
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-IntelliJ-Light-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-chromium-linux.png
new file mode 100644
index 000000000..d42d32ad5
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-firefox-linux.png
new file mode 100644
index 000000000..a48bccbb9
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-webkit-linux.png
new file mode 100644
index 000000000..b15797f2b
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Kimbie-Dark-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Night-Owl-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Night-Owl-chromium-linux.png
new file mode 100644
index 000000000..62a4d24f0
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Night-Owl-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Night-Owl-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Night-Owl-firefox-linux.png
new file mode 100644
index 000000000..fcafc4f08
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Night-Owl-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Night-Owl-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Night-Owl-webkit-linux.png
new file mode 100644
index 000000000..93f1f866f
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Night-Owl-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Red-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Red-chromium-linux.png
new file mode 100644
index 000000000..1e3eac191
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Red-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Red-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Red-firefox-linux.png
new file mode 100644
index 000000000..8ae40f023
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Red-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Red-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Red-webkit-linux.png
new file mode 100644
index 000000000..e4e0fbc13
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Red-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-chromium-linux.png
new file mode 100644
index 000000000..74b2e9633
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-firefox-linux.png
new file mode 100644
index 000000000..769ff4704
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-webkit-linux.png
new file mode 100644
index 000000000..df87af269
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Dark-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Light-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-chromium-linux.png
new file mode 100644
index 000000000..89a248b8a
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Light-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-firefox-linux.png
new file mode 100644
index 000000000..42f0551aa
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Solarized-Light-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-webkit-linux.png
new file mode 100644
index 000000000..e41f55c49
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Solarized-Light-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-SynthWave-84-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-chromium-linux.png
new file mode 100644
index 000000000..80cef8e75
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-SynthWave-84-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-firefox-linux.png
new file mode 100644
index 000000000..eaea7137d
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-SynthWave-84-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-webkit-linux.png
new file mode 100644
index 000000000..129963b92
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-SynthWave-84-webkit-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-chromium-linux.png b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-chromium-linux.png
new file mode 100644
index 000000000..5a0bd5adb
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-chromium-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-firefox-linux.png b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-firefox-linux.png
new file mode 100644
index 000000000..6584169a9
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-firefox-linux.png differ
diff --git a/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-webkit-linux.png b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-webkit-linux.png
new file mode 100644
index 000000000..2921b4f65
Binary files /dev/null and b/tests/theme.spec.ts-snapshots/theme-Tomorrow-Night-Blue-webkit-linux.png differ