Noctis Uva ← NEW

Noctis

Noctis Azureus

Noctis Lux

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
• Dart (requires Dart extension)
• Go
• Groovy
• Haskell (requires Haskell Syntax Highlighting extension) ← NEW
• HTML
  • EJS
  • Handlebars
  • Pug/Jade
• Java
• JavaScript
  • JSON
  • React/JSX
  • Typescript/TSX
• Julia (requires Julia extension)
• Lua (requires Lua Plus extension)
• Markdown
• PHP
  • Laravel Blade
• PowerShell
• Python
• R
• Ruby
• Rust
• Scala (requires Scala Syntax extension)
• Vala (requires Vala Code extension)
• Visual Basic
• Other
  • Apache Conf (requires Apache Conf extension)

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	Strings
Mountain Meadow	Green	#16b673	Interpolated Strings
Horizon	Blue	#5b858b	Comments
Eastern Blue	Blue	#16a3b6	Function Calls
Turcoise	Blue	#49d6e9	Method Calls
Dodger Blue	Blue	#33b1ff	Code that needs to stand out
Cornflower Blue	Blue	#7060eb	Numbers & Booleans
Pale Violet Red	Red	#df769b	Keywords & Operators
Burnt Sienna	Brown	#e97749	Function & Variable Declaration, Tags & this
Buddha Gold	Yellow	#cc9900	Attributes, Constants & Type annotations
Gold Sand	Yellow	#e4b781	Variables & Parameters
Desert Sand	Brown	#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.