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
The font used in screenshots is called Cartograph CF
Noctis
Noctis Azureus
Noctis Bordo
Noctis Minimus
Noctis Uva
Noctis Viola
Noctis Lux
Noctis Lilac
Noctis Hibernus
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 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.
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 | Dang Trung Kien | CertainLach |
Credits
This theme was inspired by the themes VS Dark, Solarized, Vue, Cobalt2, One Dark, Dracula, Pure Syntax and many others.