Noctis is a colection of light & dark themes with a well balanced blend of warm and cold colors
Switch branches/tags
Nothing to show
Clone or download
Latest commit 885dfb3 Nov 14, 2018
Permalink
Failed to load latest commit information.
images 4.2.0 Nov 14, 2018
themes 4.2.0 Nov 14, 2018
.gitignore first commit Jun 4, 2018
.vscodeignore 3.11.0 Oct 12, 2018
CHANGELOG.md 4.2.0 Nov 14, 2018
JavaScript.js 3.14.0 Oct 16, 2018
LICENSE.md first commit Jun 4, 2018
README.md 4.2.0 Nov 14, 2018
package-lock.json 4.1.0 Nov 13, 2018
package.json 4.1.1 Nov 14, 2018
palette.css 3.11.0 Oct 12, 2018
vscodecustom.css 4.2.0 Nov 14, 2018

README.md

Noctis Uva ← NEW

Noctis Uva Screenshot

Noctis

Noctis Screenshot

Noctis Azureus

Noctis Azureus Screenshot

Noctis Lux

Noctis Lux Screenshot

Noctis is a colection of light & dark themes with a well balanced blend of warm and cold medium contrast colors.

The theme is designed to:

  • be easy on the eyes thus reducing the eye strain
  • give semantic meaning to theme's colors

Noctis comes in six versions. Five are dark and one is light.

The background of Noctis, Noctis Sereno & Noctis Obscuro is a very saturated very dark cold bluish cyan, Noctis Azureus' is a very saturated very dark cold azure and Noctis Uva's is a unsaturated dark cold blue.
Blue is a cool calming color that shows creativity and intelligence and has a calming effect on the psyche.

The Noctis Lux light theme's background is a very saturated very light warm orange.
Orange can increase oxygen supply to the brain to produce an invigorating effect.

Supported Languages

  • C/C++
  • C#
  • Clojure
  • CoffeeScript
  • CSS
    • Sass/SCSS
  • Go
  • Groovy
  • HTML
    • EJS
    • Handlebars
    • Pug/Jade
  • Java
  • JavaScript
    • JSON
    • React/JSX
    • Typescript/TSX
  • Lua (requires Lua Plus extension)
  • Markdown
  • PHP
    • Laravel Blade
  • PowerShell
  • Python
  • R
  • Ruby
  • Rust
  • Scala (requires Scala Syntax extension)
  • Visual Basic

I plan on adding support for new languages in the upcomming releases. Please feel free to open an issue if you'd like a new language supported or if you think something is off.

The Font used in the screenshots

The font in the screenshots are actually 2 fonts glued together with Custom CSS. For normal style I used Hasklig and for italics Cartograph Mono CF. I think there is a beautiful synergy between the two fonts and they intertwine naturally together.

"How did you do it?" #2

The walkthrough is for Windows. I assume that for Unix and MacOS you would have to change only the path.

  1. IMPORTANT: Run as aministrator VS Code
  2. install Custom CSS and JS Loader
  3. download or copy the content of customvscode.css
  4. copy the file in Users\yourusername\customvscode.css. This is what I have on my system c:\Users\liviuschera\customvscode.css
  5. In settings.json add:
      "editor.fontFamily": "Hasklig",
      "vscode_custom_css.imports":
        [
          "file://C:/Users/yourusername/vscodecustom.css"
        ],
  6. press F1
  7. Select Enable Custom CSS and JS
  8. Reload VS Code (it doesn't have to be in administrator mode)

NOTES:

  • if VS Code complains about that it is corrupted, simply click “Don't show again”.
  • every time after VS Code is updated or you change the configuration, please re-enable Custom CSS
  • make sure that you comment out the optional CSS code if you don't want to change the UI's default font.

Syntax colors

The color names were matched to one of the following main color hues: Red, Yellow, Green, Blue, Brown and Grey using the excelent online tools Color Name & Hue and Name that Color.

Color Hue Hex Code Used for:
Eucalyptus Green #49e9a6 #49e9a6 Strings
Mountain Meadow Green #16b673 #16b673 Interpolated Strings
Horizon Blue #5b858b #5b858b Comments
Eastern Blue Blue #16a3b6 #16a3b6 Function Calls
Turcoise Blue #49d6e9 #49d6e9 Method Calls
Dodger Blue Blue #33b1ff #33b1ff Code that needs to stand out
Cornflower Blue Blue #7060eb #7060eb Numbers & Booleans
Pale Violet Red Red #df769b #df769b Keywords & Operators
Burnt Sienna Brown #e97749 #e97749 Function & Variable Declaration, Tags & this
Buddha Gold Yellow #cc9900 #cc9900 Attributes, Constants & Type annotations
Gold Sand Yellow #e4b781 #e4b781 Variables & Parameters
Desert Sand Brown #edc9af #edc9af DOM Objects

Installation

Noctis can be installed by clicking on Ctrl + Shift + X on Windows or ⇧ + ⌘ + X on Mac and then searching for "Noctis".

Credits

This theme was inspired by the themes VS Dark+, Solarized, Vue, Cobalt2, One Dark, Dracula, Pure Syntax and many others.