Atlantic Night a VSC theme
Tags: vscode, themes
Published: 2020-06-12 19:59:53

After reading an [article](https://css-tricks.com/creating-a-vs-code-theme/ "css tricks article on creating a vac theme") 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](https://draculatheme.com "Dracula Syntax theme"), [Material](https://material-theme.site "Material theme"), [Monokai](https://monokai.pro "Monokai Pro syntax theme") and [One Dark](https://binaryify.github.io/OneDark-Pro/#/ "One Dark syntax theme"). 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](http://colorsafe.co "Color Safe website") which empowers designers with beautiful and accessible colour palettes based on [WCAG Guidelines](http://webaim.org/blog/wcag-2-0-and-link-colors/ "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](https://dev.to/thegeoffstevens/50-vs-code-themes-for-2020-45cc). Which I am very, very happy about!

### HTML

![HTML](//images.ctfassets.net/53u3hzg2egeu/6MfBzKRjbm7EfL0Mtj5xsA/2f5edae2e86b485caaa0592ac34d9764/HTML.png)

### CSS

![CSS](//images.ctfassets.net/53u3hzg2egeu/74pYAuwbPwcTQFMKHb4P3A/85f0d273f22598058b183ce89bdd02a0/CSS.png)

### JS

![JS](//images.ctfassets.net/53u3hzg2egeu/4lhgoLOxh7Y4CLHgAXaXXj/e538ee6260bc0b2bcd689f0bdb48f09b/JS.png)

### React

![REACT](//images.ctfassets.net/53u3hzg2egeu/6Pwid0eyBq4j93CWMtkjoU/638a01acfc1f0b30535bc53fff5978e2/REACT.png)

### JSON

![JSON](//images.ctfassets.net/53u3hzg2egeu/3FwAQnoXTwLdy7vGZZWKLE/00f254e0bc10ae10e75dc12286290bdc/JSON.png)

### Python

![PYTHON](//images.ctfassets.net/53u3hzg2egeu/5Rl6Aa9F56kSZ9r9DP9GUD/b3c998d3847896e544c5cd88cb76423b/PYTHON.png)

### MarkDown

![MD](//images.ctfassets.net/53u3hzg2egeu/5G40TSoKteMBTzFTooWRD8/aa09845fc4cb51cb3ebfac58c69f560e/MD.png)

### Rust

![RUST](//images.ctfassets.net/53u3hzg2egeu/5flnf7XoZJP8SQ7rRXSLgw/a012688fa320ac670443fd7fa529047b/RUST.png)

### SQL

![SQL](//images.ctfassets.net/53u3hzg2egeu/6dye9xJZWr2mEFcsbuQCMP/f83c1528fc61b39ef6b84ecc6e0ed42a/SQL.png)

If you have any suggestions or ideas, please head over to the [repo and log an issue](https://github.com/mrpbennett/atlantic-night-vscode-theme/issues "Github Repo Issue"). Any help is welcome.