Atlantic Night a VSC Theme

Atlantic Night a VSC Theme

After reading an article created by Sarah Drasner on creating a theme for Visual Studio Code, I got inspired to create my own.

I have used many themes in my time, the likes of Dracula, Material, Monokai and One Dark. These are some popular themes, but there was always something I would want to change one of them. After being inspired by the colours of the Atlantic ocean during a boat cruise around the island of Antigua. I went on to create my theme for VSC and called it Atlantic Night.

With coding at night in mind, the colour choices have been taking into consideration with accessibility in mind. All colours have been picked from Color Safe which empowers designers with beautiful and accessible colour palettes based on WCAG Guidelines of text and background contrast ratios, these ratios have been tweaked slightly, however, the colour choice originates from Color Safe.

With blue as my main base of colour, I then went on to use other colours. Such as green, purple, yellow and a couple more. This theme will ever be evolving I hope to get further input from the developer community to make the theme better. Even if that means rearranging the colour schemes for certain syntaxes.

I tried to keep the VSC workspace all the same colour with slight changes to separate each section of the window. This was to keep my eyes concentrated on the code and not the workspace, I am currently typing this up in my garden, it's very sunny and bright. The workspace has almost turned to black but the syntax still pops from the screen, the colours I used and the contrast created helps this.

Some people may say this theme is too similar to others, that might be the case. However, this is my theme. Which means I can change it to my needs whenever, but what is more important than that, is that its open-source and I get to share my little project with the developer community and also gather feedback to make it better.

Below are some code examples of the languages Atlantic Night currently supports. More will be coming, and even a light version is in the works.

The theme has also been listed as trending themes for VS Code that are growing in popularity for 2020 by DEV. Which I am very, very happy about!

Atlantic Night

Installation

  1. Install Visual Studio Code
  2. Launch Visual Studio Code
  3. Choose Extensions from menu
  4. Search for atlantic night
  5. Click Install to install it
  6. Click Reload to reload the Code
  7. From the menu bar click: Code > Preferences > Color Theme > Atlantic Night

Preferences shown in the preview

The font in the preview image is Menlo, at a size of 14px and a tabSize of 4.

"editor.fontFamily": "Menlo", (I now use Fira Code)
"editor.fontSize": 14,
"editor.tabSize": 4,

The preview image is using Bracket Pair Colorizer, a really cool extension that highlights matching brackets. This can help reduce unwanted errors.

Misc

This is my first attempt at creating a theme, so if you see something amiss, please feel free to file an issue! I'm sure there are things I missed.

Any relevant changes for each version are documented in the changelog. Please update and check the changelog before filing any issues, as they may have already been taken care of.

Paul Bennett

Written by Paul Bennett, Self-taught developer based in London.

© 2020 Paul Bennett