### JSON VS Code Theme Structure Example

Source: https://context7.com/primer/github-vscode-theme/llms.txt

An example of the complete JSON structure that VS Code uses to define a theme. It includes general theme properties like 'name' and 'colors', as well as 'tokenColors' for syntax highlighting.

```json
{
  "name": "GitHub Dark Default",
  "colors": {
    "focusBorder": "#1f6feb",
    "foreground": "#e6edf3",
    "editor.background": "#0d1117",
    "editor.foreground": "#e6edf3",
    "editor.lineHighlightBackground": "#161b22",
    "editor.selectionBackground": "#264f78",
    "editorCursor.foreground": "#2f81f7",
    "activityBar.background": "#010409",
    "activityBar.foreground": "#e6edf3",
    "sideBar.background": "#010409",
    "statusBar.background": "#0d1117",
    "terminal.ansiBlack": "#484f58",
    "terminal.ansiRed": "#ff7b72",
    "terminal.ansiGreen": "#3fb950",
    "terminal.ansiBlue": "#58a6ff"
  },
  "semanticHighlighting": true,
  "tokenColors": [
    {
      "scope": ["comment", "punctuation.definition.comment"],
      "settings": { "foreground": "#8b949e" }
    },
    {
      "scope": ["keyword"],
      "settings": { "foreground": "#ff7b72" }
    },
    {
      "scope": ["string"],
      "settings": { "foreground": "#a5d6ff" }
    },
    {
      "scope": ["entity.name.function"],
      "settings": { "foreground": "#d2a8ff" }
    }
  ]
}

```

--------------------------------

### Bash Development Workflow for VS Code Theme

Source: https://context7.com/primer/github-vscode-theme/llms.txt

A set of bash commands outlining the development workflow for the VS Code theme. This includes installing dependencies, starting a development server with hot reloading, manually generating theme files, testing in VS Code, inspecting scopes, packaging the theme, and publishing.

```bash
# Install dependencies
yarn install

# Start development with hot reload
yarn start
# This runs: nodemon --watch src src/index.js
# Automatically rebuilds themes when src/ files change

# Generate themes manually
node src/index.js
# Creates ./themes/*.json files

# Test in VS Code
# 1. Press F5 to launch Extension Development Host
# 2. Open Command Palette (Cmd+Shift+P / Ctrl+Shift+P)
# 3. Run: "Preferences: Color Theme"
# 4. Select "GitHub Dark Default" or other variants
# 5. Test code highlighting and UI colors

# Inspect syntax scopes for debugging
# Command Palette -> "Developer: Inspect Editor Tokens and Scopes"
# Click on any token to see its scope and applied color

# Package for distribution
yarn run package
# Creates: ./build/github-vscode-theme.vsix

# Publish (maintainers only)
yarn run prepublishOnly
# Builds and publishes to VS Marketplace

```

--------------------------------

### Override GitHub Dark Default Theme Colors in VS Code

Source: https://context7.com/primer/github-vscode-theme/llms.txt

This JSON snippet demonstrates how to override specific colors for the 'GitHub Dark Default' theme within VS Code's `settings.json`. It includes examples for editor background, foreground, activity bar background, and token customizations for comments, strings, keywords, and functions. Ensure the 'GitHub Dark Default' theme is currently active for these overrides to apply.

```json
// settings.json - Override specific colors
{
  "workbench.colorTheme": "GitHub Dark Default",
  "workbench.colorCustomizations": {
    "[GitHub Dark Default]": {
      "editor.background": "#000000",
      "editor.foreground": "#ffffff",
      "activityBar.background": "#1a1a1a"
    }
  },
  "editor.tokenColorCustomizations": {
    "[GitHub Dark Default]": {
      "comments": "#6a737d",
      "strings": "#9ecbff",
      "keywords": "#f97583",
      "functions": "#b392f0"
    }
  }
}
```

--------------------------------

### Theme Build Script

Source: https://context7.com/primer/github-vscode-theme/llms.txt

The main build script orchestrates theme generation and file writing. It generates all theme variants and writes them to the themes directory as JSON files.

```APIDOC
## Theme Build Script

### Description
This script orchestrates the generation of all VS Code theme variants based on Primer Design System primitives and writes them as JSON files to the `./themes` directory.

### Method
`node src/index.js` or `npm start` (for watch mode)

### Parameters
None (script runs automatically)

### Request Example
```bash
node src/index.js
```

### Response
#### Success Response (200)
- Theme JSON files are generated in the `./themes` directory.

#### Response Example
```bash
# After running the script, the following files are created:
# ./themes/light-default.json
# ./themes/dark-default.json
# ./themes/dark-dimmed.json
# ... and other theme variant files
```
```

--------------------------------

### Orchestrate Theme Generation and File Writing with Build Script (JavaScript)

Source: https://context7.com/primer/github-vscode-theme/llms.txt

The main build script in `src/index.js` automates the generation of all modern and legacy theme variants and writes them as JSON files to the `./themes` directory. It utilizes Node.js `fs` module for file operations and can be run directly or with a watch command.

```javascript
// src/index.js generates all themes automatically
const fs = require("fs").promises;
const getTheme = require("./theme");
const getClassicTheme = require("./classic/theme");

// Generate all modern themes
const lightDefaultTheme = getTheme({ theme: "light", name: "GitHub Light Default" });
const darkDefaultTheme = getTheme({ theme: "dark", name: "GitHub Dark Default" });
const darkDimmedTheme = getTheme({ theme: "dark_dimmed", name: "GitHub Dark Dimmed" });
// ... other variants

// Generate legacy themes
const lightTheme = getClassicTheme({ style: "light", name: "GitHub Light" });
const darkTheme = getClassicTheme({ style: "dark", name: "GitHub Dark" });

// Write all themes to files
fs.mkdir("./themes", { recursive: true })
  .then(() => Promise.all([
    fs.writeFile("./themes/light-default.json", JSON.stringify(lightDefaultTheme, null, 2)),
    fs.writeFile("./themes/dark-default.json", JSON.stringify(darkDefaultTheme, null, 2)),
    fs.writeFile("./themes/dark-dimmed.json", JSON.stringify(darkDimmedTheme, null, 2)),
    // ... write other theme files
  ]))
  .catch(() => process.exit(1));

// Run with: node src/index.js
// Or watch mode: npm start (uses nodemon)
```

--------------------------------

### Load Primer Design System Color Palettes with getColors() (JavaScript)

Source: https://context7.com/primer/github-vscode-theme/llms.txt

The `getColors` function retrieves Primer Design System color palettes for a specified theme variant. It handles color overrides and normalizes color values, returning an object containing the complete color system for the chosen theme.

```javascript
const { getColors } = require("./colors");

// Get dark theme colors
const darkColors = getColors("dark");
// Returns: {
//   fg: { default: "#e6edf3", muted: "#7d8590", ... },
//   accent: { fg: "#2f81f7", emphasis: "#1f6feb", ... },
//   scale: { gray: [...], blue: [...], green: [...], ... },
//   canvas: { default: "#0d1117", inset: "#010409", ... },
//   // ... complete Primer color system
// }

// Get light colorblind theme colors
const lightColorblindColors = getColors("light_colorblind");

// Supported theme values:
// "light", "light_high_contrast", "light_colorblind",
// "dark", "dark_high_contrast", "dark_colorblind", "dark_dimmed"
```

--------------------------------

### getColors() - Color Palette Loader

Source: https://context7.com/primer/github-vscode-theme/llms.txt

Retrieves Primer Design System color palettes for a specific theme variant. Handles temporary color overrides and normalizes color values across different theme types.

```APIDOC
## getColors() - Color Palette Loader

### Description
Retrieves Primer Design System color palettes for a specific theme variant. Handles temporary color overrides and normalizes color values across different theme types.

### Method
`getColors(themeVariant)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```javascript
const { getColors } = require("./colors");

// Get dark theme colors
const darkColors = getColors("dark");
```

### Response
#### Success Response (200)
- **colorPalette** (object) - An object containing the color palette for the specified theme variant.
  - **fg** (object) - Foreground color definitions.
  - **accent** (object) - Accent color definitions.
  - **scale** (object) - Color scale definitions (e.g., gray, blue).
  - **canvas** (object) - Canvas color definitions.

#### Response Example
```json
{
  "fg": {"default": "#e6edf3", "muted": "#7d8590"},
  "accent": {"fg": "#2f81f7", "emphasis": "#1f6feb"},
  "scale": {"gray": [...], "blue": [...], "green": [...]},
  "canvas": {"default": "#0d1117", "inset": "#010409"}
}
```

### Supported Theme Values
- `"light"`
- `"light_high_contrast"`
- `"light_colorblind"`
- `"dark"`
- `"dark_high_contrast"`
- `"dark_colorblind"`
- `"dark_dimmed"`
```

--------------------------------

### JSON Package.json VS Code Theme Configuration

Source: https://context7.com/primer/github-vscode-theme/llms.txt

Configuration in 'package.json' to register VS Code themes. It uses the 'contributes.themes' section to map theme labels, UI themes, and paths to the generated JSON theme files.

```json
{
  "name": "github-vscode-theme",
  "displayName": "GitHub Theme",
  "contributes": {
    "themes": [
      {
        "label": "GitHub Light Default",
        "uiTheme": "vs",
        "path": "./themes/light-default.json"
      },
      {
        "label": "GitHub Dark Default",
        "uiTheme": "vs-dark",
        "path": "./themes/dark-default.json"
      },
      {
        "label": "GitHub Dark High Contrast",
        "uiTheme": "hc-black",
        "path": "./themes/dark-high-contrast.json"
      }
    ]
  },
  "scripts": {
    "start": "nodemon --watch src src/index.js",
    "build": "node src/index.js && mkdir -p build",
    "package": "vsce package -o ./build/github-vscode-theme.vsix"
  }
}

```

--------------------------------

### Generate Modern VS Code Themes with getTheme() (JavaScript)

Source: https://context7.com/primer/github-vscode-theme/llms.txt

The `getTheme` function generates modern VS Code theme configurations, including UI colors and syntax highlighting tokens, for various theme variants. It requires the theme name and variant as input and returns a comprehensive theme object.

```javascript
const getTheme = require("./theme");

// Generate a dark theme
const darkTheme = getTheme({
  theme: "dark",
  name: "GitHub Dark Default"
});

// Generate a light high contrast theme
const lightHighContrastTheme = getTheme({
  theme: "light_high_contrast",
  name: "GitHub Light High Contrast"
});

// The returned theme object contains:
// {
//   name: "GitHub Dark Default",
//   colors: {
//     "editor.background": "#0d1117",
//     "editor.foreground": "#e6edf3",
//     "activityBar.background": "#010409",
//     // ... hundreds of other UI color tokens
//   },
//   semanticHighlighting: true,
//   tokenColors: [
//     {
//       scope: ["comment", "punctuation.definition.comment"],
//       settings: { foreground: "#8b949e" }
//     },
//     // ... syntax highlighting rules
//   ]
// }
```

--------------------------------

### getClassicTheme() - Legacy Theme Generator

Source: https://context7.com/primer/github-vscode-theme/llms.txt

Generates classic GitHub theme variants that maintain backwards compatibility with older versions. Uses a different color selection approach compared to modern themes.

```APIDOC
## getClassicTheme() - Legacy Theme Generator

### Description
Generates classic GitHub theme variants that maintain backwards compatibility with older versions. Uses a different color selection approach compared to modern themes.

### Method
`getClassicTheme(options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Required - Configuration object for the theme.
  - **style** (string) - Required - The style of the classic theme (e.g., "light", "dark").
  - **name** (string) - Required - The display name for the generated theme.

### Request Example
```javascript
const getClassicTheme = require("./classic/theme");

// Generate classic light theme
const lightTheme = getClassicTheme({
  style: "light",
  name: "GitHub Light"
});
```

### Response
#### Success Response (200)
- **themeObject** (object) - The generated VS Code theme configuration (similar structure to `getTheme()` but with legacy color mappings).
  - **name** (string) - The name of the theme.
  - **colors** (object) - An object containing UI color tokens.
  - **semanticHighlighting** (boolean) - Whether semantic highlighting is enabled.
  - **tokenColors** (array) - An array of syntax highlighting rules.

#### Response Example
```json
{
  "name": "GitHub Light",
  "colors": {
    "editor.background": "#ffffff",
    "editor.foreground": "#24292e"
  },
  "semanticHighlighting": true,
  "tokenColors": [
    {
      "scope": ["comment"],
      "settings": { "foreground": "#6a737d" }
    }
  ]
}
```
```

--------------------------------

### getTheme() - Modern Theme Generator

Source: https://context7.com/primer/github-vscode-theme/llms.txt

Generates modern VS Code theme configurations based on Primer Design System colors. This function creates theme objects with UI colors and syntax highlighting tokens for all supported theme variants.

```APIDOC
## getTheme() - Modern Theme Generator

### Description
Generates modern VS Code theme configurations based on Primer Design System colors. This function creates theme objects with UI colors and syntax highlighting tokens for all supported theme variants.

### Method
`getTheme(options)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **options** (object) - Required - Configuration object for the theme.
  - **theme** (string) - Required - The theme variant to generate (e.g., "dark", "light", "dark_dimmed").
  - **name** (string) - Required - The display name for the generated theme.

### Request Example
```javascript
const getTheme = require("./theme");

// Generate a dark theme
const darkTheme = getTheme({
  theme: "dark",
  name: "GitHub Dark Default"
});
```

### Response
#### Success Response (200)
- **themeObject** (object) - The generated VS Code theme configuration.
  - **name** (string) - The name of the theme.
  - **colors** (object) - An object containing UI color tokens.
  - **semanticHighlighting** (boolean) - Whether semantic highlighting is enabled.
  - **tokenColors** (array) - An array of syntax highlighting rules.

#### Response Example
```json
{
  "name": "GitHub Dark Default",
  "colors": {
    "editor.background": "#0d1117",
    "editor.foreground": "#e6edf3",
    "activityBar.background": "#010409"
  },
  "semanticHighlighting": true,
  "tokenColors": [
    {
      "scope": ["comment", "punctuation.definition.comment"],
      "settings": { "foreground": "#8b949e" }
    }
  ]
}
```
```

--------------------------------

### Generate Legacy GitHub Themes with getClassicTheme() (JavaScript)

Source: https://context7.com/primer/github-vscode-theme/llms.txt

The `getClassicTheme` function generates legacy GitHub theme variants for backwards compatibility. It employs a different color selection method than modern themes and returns a theme object with a structure similar to `getTheme()`.

```javascript
const getClassicTheme = require("./classic/theme");

// Generate classic light theme
const lightTheme = getClassicTheme({
  style: "light",
  name: "GitHub Light"
});

// Generate classic dark theme
const darkTheme = getClassicTheme({
  style: "dark",
  name: "GitHub Dark"
});

// Returns same structure as getTheme() but with legacy color mappings
// { name: "...", colors: {...}, semanticHighlighting: true, tokenColors: [...] }
```

--------------------------------

### JavaScript Color Helper Functions for Theme Variants

Source: https://context7.com/primer/github-vscode-theme/llms.txt

Internal JavaScript helper functions for manipulating and selecting theme colors based on different variants (light, dark, high contrast, etc.). These functions rely on a `themes` helper and potentially external libraries like `chroma-js` for advanced color manipulation. They are used to define theme colors conditionally.

```javascript
// Used inside getTheme() for conditional color selection
const themes = (options) => options[theme];

// Select colors per theme variant
const borderColor = themes({
  light: "#d0d7de",
  light_high_contrast: "#1f2328",
  light_colorblind: "#d0d7de",
  dark: "#30363d",
  dark_high_contrast: "#6e7681",
  dark_colorblind: "#30363d",
  dark_dimmed: "#444c56"
});

// Helper for dark-only colors
const onlyDark = (color) => {
  return themes({
    dark: color,
    dark_high_contrast: color,
    dark_colorblind: color,
    dark_dimmed: color
  });
};

// Helper for high contrast only
const onlyHighContrast = (color) => {
  return themes({
    light_high_contrast: color,
    dark_high_contrast: color
  });
};

// Helper for light/dark distinction
const lightDark = (light, dark) => {
  return themes({
    light: light,
    light_high_contrast: light,
    light_colorblind: light,
    dark: dark,
    dark_high_contrast: dark,
    dark_colorblind: dark,
    dark_dimmed: dark
  });
};

// Alpha transparency helper
const alpha = (color, alphaValue) => {
  return chroma(color).alpha(alphaValue).hex();
};

// Example usage in theme definition:
const theme = {
  colors: {
    "editor.selectionBackground": alpha(color.accent.fg, 0.2),
    "peekViewEditor.background": onlyDark(color.neutral.subtle),
    "editorLineNumber.foreground": lightDark(scale.gray[4], scale.gray[4])
  }
};

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.