DOCSEARCHbyAlgolia
Submit Docs

GitHub VS Code Theme

repository·main·Indexed 24 days ago

https://github.com/primer/github-vscode-theme

Official GitHub color themes for Visual Studio Code, including light, dark, high contrast, and colorblind-friendly options designed to match the GitHub.com web interface. Version 6.3.5 provides modern variants such as GitHub Dark Dimmed and legacy classic themes.

Tokens
871
Snippets
0
Records
6
Agent score
85%

What's inside github-vscode-theme

  1. Understand GitHub classic themes

    main

    The GitHub Light and GitHub Dark themes are legacy themes created before the introduction of GitHub's modern theme system.

    Important Compatibility Note: These classic themes use a different color system and are not compatible with the rest of the modern GitHub themes. Use them only if you specifically require the legacy color palette.

  3. Develop and test changes to the GitHub theme

    main

    To contribute changes to the theme, follow these steps to set up a local development environment:

    1. Clone and open the repository in VS Code.
    2. Install dependencies using yarn.
    3. Launch the extension in a new window by pressing F5.
    4. In the new window, select a GitHub theme via Code > Preferences > Color Theme (or ⌘k ⌘t).
    5. Modify the theme definitions in /src/theme.js.
      • For UI changes (e.g., status bar, file navigation): Use the VS Code Theme Color reference.
      • For Syntax changes (code highlighting): Use the Developer: Inspect Editor Tokens and Scopes command from the Command Palette to identify the correct scopes.
    6. Build the theme:
      • Use yarn build to update the theme manually.
      • Use yarn start to enable automatic rebuilding while making changes.
    7. Commit your changes and open a Pull Request.

  4. Install GitHub's VS Code themes

    main

    To use GitHub's official VS Code themes, install the extension from the VS Marketplace and then select your preferred theme from the VS Code theme picker. The available themes are designed to match the appearance settings on github.com:

    Current Themes:

    • GitHub Light Default
    • GitHub Light High Contrast
    • GitHub Light Colorblind
    • GitHub Dark Default
    • GitHub Dark High Contrast
    • GitHub Dark Colorblind
    • GitHub Dark Dimmed

    Legacy Themes (may not receive frequent updates):

    • GitHub Light
    • GitHub Dark

  5. Retrieve color palettes using getColors()

    main

    The getColors function returns the color palette object corresponding to a specific theme name. This is used to resolve the color tokens for the VS Code theme.

    Supported theme values include:

    • light (includes temporary overrides for success and button colors)
    • light_high_contrast
    • light_colorblind
    • dark (includes temporary overrides for foreground, accent, and subtle semantic colors)
    • dark_high_contrast
    • dark_colorblind
    • dark_dimmed

    If an unsupported theme value is provided, the function throws an error: Colors are missing for value: ${theme}.

  6. Available GitHub VS Code themes

    main

    The github-vscode-theme package provides several theme variations categorized into modern GitHub themes and classic GitHub themes.

    Modern GitHub Themes

    These themes are generated using getTheme() and include:

    • Light variants: light (GitHub Light Default), light_high_contrast (GitHub Light High Contrast), and light_colorblind (GitHub Light Colorblind).
    • Dark variants: dark (GitHub Dark Default), dark_high_contrast (GitHub Dark High Contrast), dark_colorblind (GitHub Dark Colorblind), and dark_dimmed (GitHub Dark Dimmed).

    Classic GitHub Themes

    These themes are generated using getClassicTheme() and include:

    • light (GitHub Light)
    • dark (GitHub Dark)