Noctis is a collection 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 11 versions, 8 are dark and 3 are light.

• Noctis, Noctis Sereno & Noctis Obscuro background is a very saturated very dark cold bluish cyan
• Noctis Azureus' background is a very saturated very dark cold azure
• Noctis Bordo's background is a very unsaturated very dark warm rose
• Noctis Uva's background is a unsaturated dark cold blue. For those with more spartan taste
• Noctis Minimus' background offers a version of the Azureus palette with much lower saturation. (Thank you Draevin for your contribution)
• Noctis Viola's background is a saturated very dark cold violet
• Noctis Lux' background is a very saturated very light warm orange
• Noctis Hibernus' background is a very unsaturated very light cold bluish cyan
• Noctis Lilac's background is a very unsaturated very light cold blue

🆕 Noctis Bordo 🆕

Noctis Lux

Noctis Lilac

Noctis Hibernus

Noctis

Noctis Azureus

Noctis Minimus

Noctis Uva

Noctis Viola

Supported Languages

• 🆕 Apex (requires Salesforce Extension Pack extension)
• C/C++
• C#
• Clojure
• CoffeeScript
• Crystal (requires Crystal Language extension)
• CSS
  • Sass/SCSS
• Cucumber (Gerkin) (requires Cucumber (Gherkin) Full Support extension)
• Dart (requires Dart extension)
• Elm (requires elm extension)
• Elixir (requires ElixirLS: Elixir support and debugger extension)
• Erlang (requires erlang extension)
• F#
• Go
• GraphQL (requires GraphQL extension)
• Groovy
• Haskell (requires Haskell Syntax Highlighting extension)
• 🆕 HLSL
• HTML
  • EJS
  • Handlebars
  • Pug/Jade
• Java
• JavaScript
  • JSON
  • React/JSX
  • Typescript/TSX
• Julia (requires Julia extension)
• Kotlin (requires Kotlin extension)
• Lua (requires Lua Plus extension)
• Markup
  • AsciiDoc (requires AsciiDoc extension)
  • LaTeX (requires LaTeX Workshop extension)
  • Markdown
• Objective-C
• Ocaml (requires reason-vscode extension)
• PHP
  • Laravel Blade
  • Twig → (requires Twig Language 2 extension)
• PlantUML (requires PlantUML extension)
• PowerShell
• Python
• R
• ReasonML (requires reason-vscode extension)
• Ruby
• Rust
• Scala (requires Scala Syntax extension)
• SQL
• Shell Script
• Swift
• Vala (requires Vala Code extension)
• Visual Basic
• Other
  • Apache Conf (requires Apache Conf extension)
  • TOML (requires Better TOML extension)

I plan on adding support for new languages in the upcoming 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 administrator VS Code
2. install Custom CSS and JS Loader
3. download or copy the content of customvscode.css
4. copy customvscode.css in C:\Users\your-own-username. As an example 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 using the excellent online tools Name that Color and Color Name & Hue

Standard Colors

Color	Hex Code	Used for:
Eucalyptus	#49e9a6	Strings
Mountain Meadow	#16b673	Interpolated Strings
Horizon	#5b858b	Comments for default theme
Smalt Blue	#507b95	Comments for Azureus variant
Kimberly	#716c93	Comments for Uva variant
Trendy Pink	#7f659a	Comments for Viola variant
Eastern Blue	#16a3b6	Function Calls
Turcoise	#49d6e9	Method Calls
Picton Blue	#49ace9	Code that needs to stand out
Cornflower Blue	#7060eb	Numbers & Booleans
Pale Violet Red	#df769b	Keywords & Operators
Cinnabar	#e66533	Function & Variable Declaration, Tags & this
Japonica	#d67e5c	Object properties, ID selectors in CSS & Type annotations
Galliano	#d5971a	Attributes, Constants
Gold Sand	#e4b781	Variables & Parameters

Minimus Colors

Color	Hex Code	Used for:
Silver Tree	#70c27f	Strings
Viridian	#3f8d6c	Interpolated Strings
Hoki	#5e7887	Comments
Ming	#3f848d	Function Calls
Glacier	#72b7c0	Method Calls
Fountain Blue	#5998c0	Code that needs to stand out
Chetwode Blue	#7068B1	Numbers & Booleans
Viola	#c88da2	Keywords & Operators
Antique Brass	#c37455	Function & Variable Declaration, Tags & this
Contessa	#be856f	Object properties, ID selectors in CSS & Type annotations
Driftwood	#b0904f	Attributes, Constants
Tan	#d3b692	Variables & Parameters

Light Themes Colors

Color	Hex Code	Used for:
Jade	#00b368	Strings
Green Haze	#009456	Interpolated Strings
Cascade	#8ca6a6	Comments for Lux & Hibernus variant
Amethyst Smoke	#9995b7	Comments for Lilac variant
Bondi Blue	#0095a8	Function Calls
Robin's Egg Blue	#00bdd6	Method Calls
Azure Radiance	#0094f0	Code that needs to stand out
Electric Violet	#5842ff	Numbers & Booleans
PBrink Pink	#ff5792	Keywords & Operators
Trinidad	#e64100	Function & Variable Declaration, Tags & this
Santa Fe	#b3694d	Object properties, ID selectors in CSS & Type annotations
Dark Goldenrod	#a88c00	Attributes, Constants
Yellow Sea	#f49725	Variables & Parameters

Installation

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

How to contribute

Beginning with v7.21.0 the theme building process has been simplified. I started off with the idea used in Lucy theme and came up with this theme generator powered by Node.js. This will allow me or any contributor to easily add/suggest new theme variants or changes to the existing ones. In ./src/ folder you will find:

• syntax.mjs → syntax tokens based on the language grammar installed
• colors.mjs → the colors used for syntax highlighting
• ./src/workbench/ → all eight theme versions containing Workbench/UI colors

After you make a change in any of the above files you need to use npm run build command. The build output folder is ./themes/

Happy hacking!

Contributors

Matteo Campinoti	Draevin	Will Hoskings

Credits

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