VS Code Themes

by Jacob Paris

From Paris with Love

From Paris with Love

1const btn = document.getElementById('btn')
2let count = 0
3function render() {
4 btn.innerText = `Count: ${count}`
5}
6btn.addEventListener('click', () => {
7 // Count from 1 to 10.
8 if (count < 10) {
9 count += 1
10 render()
11 }
12})
13

From Paris with Love is a medium-contrast dark theme designed around cool colours that aren't too hard on the eyes.

Welding steel (before I moved into tech) damaged my eyes and I can have light sensitivity issues looking at high contrast screens all day long.

Most dark themes I've used are too dark and too high contrast which is hard on my eyes, so I designed this one to help mitigate those effects.

Check it out on the VS Code Marketplace .

Stripe Docs Blue

Stripe Docs Blue

1const btn = document.getElementById('btn')
2let count = 0
3function render() {
4 btn.innerText = `Count: ${count}`
5}
6btn.addEventListener('click', () => {
7 // Count from 1 to 10.
8 if (count < 10) {
9 count += 1
10 render()
11 }
12})
13

This theme is based on the colors used in the Stripe documentation .

The Stripe docs are highly regarded among developers as excellent examples of documentation done right, and I wanted to bring the beautiful code snippets to VS Code.

To more closely match the documentation, I recommend the Menlo font.

Check it out on the VS Code Marketplace .

Stripe Docs Gray

Stripe Docs Gray

1const btn = document.getElementById('btn')
2let count = 0
3function render() {
4 btn.innerText = `Count: ${count}`
5}
6btn.addEventListener('click', () => {
7 // Count from 1 to 10.
8 if (count < 10) {
9 count += 1
10 render()
11 }
12})
13

This theme is based on the colors used in the Stripe Elements documentation .

The Stripe docs are highly regarded among developers as excellent examples of documentation done right, and I wanted to bring the beautiful code snippets to VS Code.

To more closely match the documentation, I recommend the Menlo font.

Check it out on the VS Code Marketplace .