ArEnSc/noctis

Noctis Minimus ← NEW

MINIMUS SCREENSHOT NEEDED

Noctis Viola ← NEW

Noctis Uva

Noctis

Noctis Azureus

Noctis Lux

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 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 Noctis Uva's is a unsaturated dark cold blue. For those with more spartan taste, Noctis Minimus offers a version of the Azureus palette with much lower saturation.
Blue is a cool calming color that shows creativity and intelligence and has a calming effect on the psyche.

Noctis Viola's background is a saturated very dark cold violet.
Like blue, violet is a calming color that can help to make wise and thoughtful decisions and encourages creative pursuits.

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

IMPORTANT: Run as administrator VS Code
install Custom CSS and JS Loader
download or copy the content of customvscode.css
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

in settings.json add:

  "editor.fontFamily": "Hasklig",
  "vscode_custom_css.imports":
    [
      "file://C:/Users/yourusername/vscodecustom.css"
    ],

press F1
select Enable Custom CSS and JS
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 excellent online tools Color Name & Hue and Name that Color.

Standard Colors

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
Cinnabar	Orange	`#e66533`	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

Minimus Colors

Color	Hue	Hex Code	Used for:
Silver Tree	Green	`#70c27f`	Strings
Viridian	Green	`#3f8d6c`	Interpolated Strings
Hoki	Blue	`#5e7887`	Comments
Ming	Blue	`#3f848d`	Function Calls
Glacier	Blue	`#72b7c0`	Method Calls
Fountain Blue	Blue	`#5998c0`	Code that needs to stand out
Chetwode Blue	Blue	`#7068B1`	Numbers & Booleans
Viola	Red	`#c88da2`	Keywords & Operators
Burning Sand	Orange	`#d18161`	Function & Variable Declaration, Tags & `this`
Husk	Yellow	`#b3994d`	Attributes, Constants & Type annotations
Tan	Brown	`#d3b692`	Variables & Parameters
Dust Storm	Orange	`#e1cbbc`	DOM Objects