GitHub Soft Theme

A modern light theme for Visual Studio Code with lower saturation colors. Designed to be easy on the eyes. Based on GitHub Theme. Other sources of inspiration are Nord, Nord Light, Night Owl and Vitesse Theme.

The theme also offers a flatter UI with a uniform white color for editor, panel and sidebar backgrounds.

Breaking changes ⚠️

Theme name was changed slightly in version 1.0.0 to fix a typo. This might require some settings changes, please have a look below for details.

Installation

1. Open the theme page on VSCode Marketplace.
2. Click on the "Install" button and wait for the installation to complete.
3. Choose "GitHub Soft" from the list that appears.

Screenshots

TypeScript

React TSX

SCSS, panel and sidebar

Recommended settings for other extensions

Material Icon Theme

"material-icon-theme.saturation": 0.6,

TODO Highlight

"todohighlight.defaultStyle": {
  "color": "#A74047",
  "backgroundColor": "#A7404730",
  "overviewRulerColor": "#A74047",
  "borderRadius": "2px"
},

Import Cost

"importCost.largePackageLightColor": "#A74047AA",
"importCost.mediumPackageLightColor": "#DBAB09AA",
"importCost.smallPackageLightColor": "#22863AAA",

Git Graph

"git-graph.graph.colours": [
  "#D73A4A",
  "#28A745",
  "#DCAB07",
  "#0366D6",
  "#5B32A3",
  "#1C7C82"
],

Customization

To customize this theme, refer to the color theme documentation. For a detailed list of available color customizations, see theme color reference. This allows you to conveniently make minor adjustments to the theme without the need to create and manage your own theme repository.

Editor syntax highlighting

You can also customise editor syntax highlighting. An example:

"editor.tokenColorCustomizations": {
  "[GitHub Soft]": {
    "textMateRules": [
      {
        "scope": ["variable.object.property.tsx"],
        "settings": { "foreground": "#ff0000" }
      }
    ]
  }
}

Semantic highlighting

Semantic highlighting is disabled for this theme by default. I found the feature too colorful and distracting. If you want to enable it, add the following to your settings:

"editor.semanticHighlighting.enabled": true,

It can also be enabled per-language if needed, for example:

"[typescript]": {
  "editor.semanticHighlighting.enabled": true
},

Changelog

See CHANGELOG.md for details.

1.1.1

• Made git conflicted resource color less saturated.

1.1.0

• Made editor ruler color match other theme colors.
• Made editor range highlight color (editor.rangeHighlightBackground) less saturated.
• Made GraphQL syntax highlighting colors less saturated.
• Changed type color to brown(ish) to make it more distinct and have brightness better matching other colors. Previously it was too similar to the color of unused variables.
• Made TS/TSX primitive type color match other types.
• Made testing colors match other theme colors.

1.0.2

• Fixed grammar and formatting in Readme.

1.0.1

• Fixed typo in Editor syntax highlighting in Readme.

1.0.0

• Fixed capitalisation mistake in theme name, replaced "Github" with "GitHub". Note that this could be a breaking change for some. If you are having issues, please check your settings and update the theme name accordingly. In particular, workbench.colorTheme and workbench.preferredLightColorTheme. If you had any customizations, also check editor.tokenColorCustomizations and workbench.colorCustomizations.
• Made breakpoint icon less saturated to match theme colors.
• Modified peek view colors to match theme colors.
• Modified progress bar color to match theme colors.

To do

• Investigate changing markdown preview code block colors, #8.

Feedback

If you like the theme, please add a review here or star on GitHub.

If you have suggestions, please open an issue or, even better, a pull request.

You can also create issues or Readme PRs for other extensions that you think should be included in the recommended settings.