Colorful variants of GitHub's VS Code themes

This theme is not a replacement for the GitHub theme; it's a set of tinted variants. This is a fork of GitHub's VS Code themes.

Install

1. Go to VS Marketplace.
2. Click on the "Install" button.
3. Then select a theme. The GitHub themes try to match the themes available in github.com's settings:

• A GitHub Dark Dimmed 1 🔴 Red
• A GitHub Dark Dimmed 2 🟠 Orange
• A GitHub Dark Dimmed 3 🟢 Green
• A GitHub Dark Dimmed 4 🔵 Blue
• A GitHub Dark Dimmed 5 🟣 Purple
• A GitHub Light 1 🔴 Red
• A GitHub Light 2 🟠 Orange
• A GitHub Light 3 🟢 Green
• A GitHub Light 4 🔵 Blue
• A GitHub Light 5 🟣 Purple
• A GitHub Dark 🧛 Vampire
• A GitHub Dark Dimmed 🧛 Vampire
• A GitHub Dark 🩶 Muted
• A GitHub Dark Dimmed 🩶 Muted
• A GitHub Dark Dimmed 🟤 Brown

The best way to use them is to open multiple instances of VS Code and select a different theme for each instance. This makes it easy to spot the window you're looking for when you have multiple editor windows open.

To set the color, you have two options:

1. Create a .vscode/settings.json file in your project and add the following:

{
  "workbench.preferredLightColorTheme": "A GitHub Light 1 🔴 Red",
  "workbench.preferredDarkColorTheme": "A GitHub Dark Dimmed 1 🔴 Red"
}

2. Create a workspace setting (ex: github-vscode-theme.code-workspace):

{
  "folders": [
    {
      "path": "github-vscode-theme"
    }
  ],
  "settings": {
    "workbench.preferredLightColorTheme": "A GitHub Light 1 🔴 Red",
    "workbench.preferredDarkColorTheme": "A GitHub Dark Dimmed 1 🔴 Red"
  }
}

TODO:

• [x] Add a light theme
• [x] Convert to TypeScript
• [ ] Find the rest of the grays (for tinting)
• [ ] Handle tinting CSS shadows
• [ ] Add foreground color tinting (mostly for color tempurature)
• [ ] Add a dark theme (in addition to existing dimmed dark variants)
• [ ] Add high contrast themes
• [ ] Add slightly muted variants

Override this theme

To override this (or any other) theme in your personal config file, please follow the guide in the color theme documentation. This is handy for small tweaks to the theme without having to fork and maintain your own theme.

Contribute

1. Clone and open this repo in VS Code
2. Run yarn to install the dependencies.
3. Press F5 to open a new window with your extension loaded
4. Open Code > Preferences > Color Theme [⌘k ⌘t] and pick the "GitHub ..." theme you want to test. Note: It seems this has to be done 2x because the first time it switches back to the default light theme. This might be a bug?
5. Make changes to the /src/theme.js file.
   • UI: For all changes to the "outer UI", like (status bar, file navigation etc.), take a look at the Theme Color reference.
   • Syntax: For changes to the "code highlighting", examine the syntax scopes by invoking the Developer: Inspect Editor Tokens and Scopes command from the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on Mac) in the Extension Development Host window.
6. Run yarn build to update the theme. You can also run yarn start instead to automatically rebuild the theme while making changes and no reloading should be necessary.
7. Once you're happy, commit your changes and open a PR.