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 background color for editor, panel and sidebar.

Installation

Using CLI:

code --install-extension IgorKrupenja.vscode-github-soft-theme

Or from the VSCode Marketplace:

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"
],

Jumpy2

Note that these have to be set through workbench.colorCustomizations and can be set per-theme, e.g.:

"workbench.colorCustomizations": {
  "[GitHub Soft]": {
    "jumpy2.labelFontColor": "#FFFFFF",
    "jumpy2.labelBackgroundColor": "#5a32a3",
    "jumpy2.labelBorderColor": "#5a32a3",
    "jumpy2.checkered_labelFontColor": "#FFFFFF",
    "jumpy2.checkered_labelBackgroundColor": "#5a32a3",
    "jumpy2.checkered_labelBorderColor": "#5a32a3"
  }
},

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 flashy 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.2.7

• Fix version info in Readme and changelog.

1.2.6

• Reduce packaged extension size 50x by removing unnecessary files.

1.2.5

• Fix typo in Readme.

1.2.3

• Fix version info in Readme and changelog.

1.2.1

• Fixed a broken link and other minor issues in Readme.
• Added recommended colors for Jumpy2 extension.

1.2.0

• 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.

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.