Squirrelsong: light & dark themes for web developers
Tags: vscode, themes, tools, jetbrains
Published: 2023-09-07 13:26:12

---
title: Squirrelsong: light & dark themes for web developers
published: true
description: "Light & dark low contrast themes for web developers"
tags: 
  - vscode
  - themes
  - tools
  - jetbrains
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdu8hq8m7lj5gbliv6z9.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-07 13:07 +0000
---

I’m excited to share the new version of my color scheme — Squirrelsong. It’s a low-contrast light and dark code scheme and UI theme for web developers. 

I don’t like distractions, and most themes are too bright for me, especially the current trend in UI design (the new “minimalistic” JetBrains UI, for example). That’s why created the first version of Squirrelsong seven years ago, and was using it since then mostly unchanged. It was pretty but quite random.

In the past two months, I’ve rebuilt it almost from scratch, made it more consistent across different apps and programming languages, and added code themes for many more apps, as well as UI themes.

Here’s the light version:

![Squirrelsong Light theme for Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7zmhe8im0mna6uvzhel.png)

And here’s the dark:

![Squirrelsong Dark theme for Visual Studio Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsmhoy67vyzgmkhwjezd.png)

**[Get the theme for your editor, terminal, or app](https://sapegin.me/squirrelsong/)**


## Why Squirrelsong?

### 1. Low contrast with great readability

Most themes, especially dark ones, have very high contrast which makes them tiring for the eyes. Squirrelsong themes are low contrast but still provide enough color and style variety to distinguish various elements of the code and avoid long chains of code printed in the same style.

![Low contrast with great readability](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdu8hq8m7lj5gbliv6z9.png)

### 2. Made for web developers

Carefully crafted syntax highlighting for JavaScript, TypeScript, HTML, CSS, Sass, styled-components, Markdown, JSON, XML, React, and Astro. Also, works well with PHP, Python, Ruby, Rust, Java, Swift, etc.


![Made for web developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cx5w9nikga8ybcy5xd04.png)



### 3. Monochrome Markdown styles

Inspired by iA Writer, Markdown is styled in shades of gray to avoid distractions while writing your next blog post, documentation, or book.


![Monochrome Markdown styles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3ytzz7dlmwv2g9yh7ox.png)



### 4. Consistent highlighting of different programming languages

Colors and styles are consistent among different programming languages: for example, `this` in TypeScript is styled the same way as `$this` in PHP and `self` in Python or Rust. HTML looks the same as JSX in React or markup in Astro components.


![Consistent highlighting of different programming languages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2dku6lmsap7fmv47z84y.png)



### 5. Non-distracting UI

Custom UI for Visual Studio Code, JetBrains IDEs, and other apps without oversaturated bright colors to keep you focused on your code.


![Non-distracting UI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fb4dmmd8nfmfg59j7h09.png)



**[Get the theme for your editor, terminal, or app](https://sapegin.me/squirrelsong/)**