Skip to content
Noctis is a collection of light & dark themes with a well balanced blend of warm and cold colors
TypeScript JavaScript
Branch: master
Clone or download
This branch is 175 commits ahead, 4 commits behind liviuschera:master.

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
extra
images
src
temp
themes
.gitignore
.vscodeignore
CHANGELOG.md
JavaScript.js
LICENSE.md
README.md
SYNTAX.md
TypeScript.ts
package.json
tsconfig.base.json
tsconfig.json
tslint.json
yarn.lock

README.md

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.

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

medium contrast

Dark theme - medium contrast

soft contrast

Dark theme - soft contrast

hard contrast

Dark theme - hard contrast

Light theme

medium contrast

Light theme - medium contrast

soft contrast

Light theme - soft contrast

hard contrast

Light theme - 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"
}

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

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.

You can’t perform that action at this time.