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
- 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 extension)
- Markup
- AsciiDoc (requires AsciiDoc extension)
- LaTeX (requires LaTeX Workshop extension)
- Markdown
- MJML (requires MJML extension)
- Nim (requires Nim extension)
- 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
- Terraform (requires Terraform extension)
- 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 color names were matched using the excellent online tools Name that Color and Color Name & Hue
| 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 |
| 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 |
| 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 |
Noctis can be installed by clicking on Ctrl + Shift + X on Windows or ⇧ + ⌘ + X on Mac and then searching for "Noctis".
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 installedcolors.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!
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Matteo Campinoti | Draevin | Will Hoskings | Dang Trung Kien | CertainLach |
This theme was inspired by the themes VS Dark, Solarized, Vue, Cobalt2, One Dark, Dracula, Pure Syntax and many others.