This VSCode color scheme is a fork of the comprehensive Noctis theme that uses the same color palette from the comprehensible Gruvbox Material theme 👍. When compared to Gruvbox and Gruvbox derivatives, this theme maps scopes to the Gruvbox palette dissimilarly to provide alternate syntax highlighting; just enough syntax highlighting.

All screenshots are shown using the 'mix' palette, and with both the Bold fonts option enabled and the Italic fonts option enabled. See Configuration Settings below for more information.

Additionally, all screenshots are shown with VSCode's Semantic Highlighting feature turned off via "editor.semanticHighlighting.enabled": false.

Dark theme

dark medium contrast

dark soft contrast

dark hard contrast

Light theme

light medium contrast

light soft contrast

light hard contrast

Configuration Settings

The following options can be toggled via Settings:

Use Color Palette

Default: 'material'

Available values: 'material', 'mix', 'original'

{
  "gruvboxConcoctis.usePalette": "original"
}

Enable Bold Fonts

Default: false

{
  "gruvboxConcoctis.useBoldFont": true
}

Enable Italic Fonts

Default: true

{
  "gruvboxConcoctis.useItalicFont": true
}

Selection Background Color

Default: 'neutral'

Available values: "neutral", "aqua", "blue", "green", "grey", "orange", "purple", "red", "yellow"

Due to the use opacity the difference between "neutral" and "grey" is subtle, while the latter provides a bit more contrast. Consider the latter option while using a Dark variant if more contrast is desired.

{
  "gruvboxConcoctis.selectionColor": "orange"
}

Just Enough Syntax Highlighting

Some languages feature a rich grammar and plenty of opportunity for the highlighting of various tokens, TypeScript React is a prime example. Consequently, variables are only highlighted at the time they are declared in this theme. As they are used and set they revert to the foreground color to keep code highlighting sane. Less robust languages that feature fewer tokens and a simpiler grammar, such as Shell Scripts will always use the highlight color (ie. 'yellow'). The end goal in all of this is to provide a meaningful level of syntax highlighting in any given file. If all of this sounds appealing to you you may want to disable VSCode's semantic highlighting feature since in part it will do the very opposite. This can be disabled with the following option.

{
  "editor.semanticHighlighting.enabled": false
}

Accessibility Tips

On macOS? Consider Shifty or something like it. We need 7-9 hours of sleep a night and programming before bed is not helping us.

You may find yourself programming at different times in a given day in various lighting conditions. Sometimes you will be using a big bright desktop display, and other times you may be on a laptop using a much smaller (and likely dimmer) display. Consider Settings Cycler to quickly find a theme that suits your environment and hardware. See below on how this extension can be used with this theme in particular.

Example Settings

settings.json

{
  "settings.cycle": [
    {
      "id": "switchTheme",
      "overrideWorkspaceSettings": false,
      "values": [
        {
          "workbench.colorTheme": "gruvboxConcoctis light soft"
        },
        {
          "workbench.colorTheme": "gruvboxConcoctis light medium"
        },
        {
          "workbench.colorTheme": "gruvboxConcoctis light hard"
        },
        {
          "workbench.colorTheme": "gruvboxConcoctis dark soft"
        },
        {
          "workbench.colorTheme": "gruvboxConcoctis dark medium"
        },
        {
          "workbench.colorTheme": "gruvboxConcoctis dark hard"
        }
      ]
    },
    {
      "id": "switchUI",
      "values": [
        {
          "editor.minimap.enabled": true,
          "workbench.statusBar.visible": true,
          "workbench.activityBar.visible": true,
          "breadcrumbs.enabled": true,
          "editor.lineNumbers": "on",
          "editor.folding": true,
          "editor.renderLineHighlight": "gutter",
          "git.decorations.enabled": true,
          "scm.diffDecorations": "all",
          "editor.hideCursorInOverviewRuler": false,
          "gitlens.codeLens.enabled": true,
          "gitlens.currentLine.enabled": true,
          "color-highlight.markRuler": true
        },
        {
          "editor.minimap.enabled": false,
          "workbench.statusBar.visible": false,
          "workbench.activityBar.visible": false,
          "breadcrumbs.enabled": false,
          "editor.lineNumbers": "off",
          "editor.folding": false,
          "editor.renderLineHighlight": "none",
          "git.decorations.enabled": false,
          "scm.diffDecorations": "none",
          "editor.hideCursorInOverviewRuler": true,
          "gitlens.codeLens.enabled": false,
          "gitlens.currentLine.enabled": false,
          "color-highlight.markRuler": true
        }
      ]
    }
  ]
}

keybindings.json

[
  {
    "key": "ctrl+shift+t",
    "command": "settings.cycle.switchTheme"
  },
  {
    "key": "ctrl+shift+u",
    "command": "settings.cycle.switchUI"
  }
]

Credits

The font used in screenshots is Sudo by Jens Kutilek.

The font used in this README's title (logo) is Dona from Harbor Type.

Logo vector created by roserodionova - www.freepik.com.

As mentioned above, both Noctis & Gruvbox Material VSCode themes.