/*_*/

Squirrelsong

Light & dark themes for web developers

Get it now!

A low-contrast, non-distracting, and neurodiverse-friendly theme that is comfortable for all-day coding without sensory overload.

Features

Low contrast with great readability

Most themes have very high contrast and bright colors, which makes them tiring for the eyes. Squirrelsong themes are low-contrast and use soft colors, 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.

type Props = {
  answer: string;
};

function Squirrelsong({
  answer,
}: Props) {
  return (
    <Stack gap="medium">
      <Heading level={1}>
        What did the squirrel say?
      </Heading>
      <Text variant="intro">
        {answer}
      </Text>
    </Stack>
  );
}

type Props = {
  answer: string;
};

function Squirrelsong({
  answer,
}: Props) {
  return (
    <Stack gap="medium">
      <Heading level={1}>
        What did the squirrel say?
      </Heading>
      <Text variant="intro">
        {answer}
      </Text>
    </Stack>
  );
}

Neurodiverse-friendly

Soft colors and low contrast are beneficial for neurodiverse people, such as those with attention-deficit/hyperactivity disorder (ADHD), autism, or high sensitivity (HSP). Such colors help reduce sensory overload and create a calming environment; they reduce distractions and visual clutter, so it’s easier to stay focused on your code instead of being distracted and overwhelmed by bright colors.

Squirrelsong Light theme

Default light theme for Visual Studio Code

Default Visual Studio Code theme

Made for web developers

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

<!doctype html>
<html lang="en">
  <head>
    <title>
      Squirrelsong
    </title>
  </head>
  <body>
    <h1>Hola!</h1>
  </body>
</html>

:root {
  --primary: #af9fc7;
}
button {
  color: var(--primary);
  border: 1px solid;
  padding-inline: 1rem;
}
button:hover {
  font-weight: bold;
}

{
  "name": "squirrelsong",
  "private": true,
  "version": "1.0.0",
  "author": "Squeaky",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

<!doctype html>
<html lang="en">
  <head>
    <title>
      Squirrelsong
    </title>
  </head>
  <body>
    <h1>Hola!</h1>
  </body>
</html>

:root {
  --primary: #af9fc7;
}
button {
  color: var(--primary);
  border: 1px solid;
  padding-inline: 1rem;
}
button:hover {
  font-weight: bold;
}

{
  "name": "squirrelsong",
  "private": true,
  "version": "1.0.0",
  "author": "Squeaky",
  "license": "MIT",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

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.

# A rebel’s guide to pull requests, commits, and code reviews

I’ve written before on [getting code reviewed faster](/blog/faster-code-reviews/) and have published a _frontend pull request checklist_ — check them out!

**Story time:** I once broke a deployment tool by adding an emoji into a commit message, and I still consider this a tiny victory in my programming career. Funnily, my colleagues split into two camps after this incident. The first camp was saying that I’m an idiot to use emojis in commit messages, and the second — that it shouldn’t be so easy to break the tool.

# A rebel’s guide to pull requests, commits, and code reviews

I’ve written before on [getting code reviewed faster](/blog/faster-code-reviews/) and have published a _frontend pull request checklist_ — check them out!

**Story time:** I once broke a deployment tool by adding an emoji into a commit message, and I still consider this a tiny victory in my programming career. Funnily, my colleagues split into two camps after this incident. The first camp was saying that I’m an idiot to use emojis in commit messages, and the second — that it shouldn’t be so easy to break the tool.

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.

class Squirrel {
  private name: string;

  public constructor(name) {
    this.name = name;
  }

  public greet() {
    console.log(
      `Hola, ${this.name}`,
    );
  }
}

// Greet the squirrel!
const sqrl = new Squirrel(
  "Squeaky",
);

<?php
class Squirrel {
  private string $name;

  public function __construct(string $name) {
    $this->name = $name;
  }

  public function greet() {
    print "Hola, {$this->name}";
  }
}

// Greet the squirrel!
$sqrl = new Squirrel(
	'Squeaky'
);
?>

class Squirrel:
  def __init__(self, name):
    self.name = name

  def greet(self):
    print(
      "Hola, %s" % self.name
    )

# Greet the squirrel!
sqrl = Squirrel(
  'Squeaky'
)

class Squirrel {
  private name: string;

  public constructor(name) {
    this.name = name;
  }

  public greet() {
    console.log(
      `Hola, ${this.name}`,
    );
  }
}

// Greet the squirrel!
const sqrl = new Squirrel(
  "Squeaky",
);

<?php
class Squirrel {
  private string $name;

  public function __construct(string $name) {
    $this->name = $name;
  }

  public function greet() {
    print "Hola, {$this->name}";
  }
}

// Greet the squirrel!
$sqrl = new Squirrel(
	'Squeaky'
);
?>

class Squirrel:
  def __init__(self, name):
    self.name = name

  def greet(self):
    print(
      "Hola, %s" % self.name
    )

# Greet the squirrel!
sqrl = Squirrel(
  'Squeaky'
)

UI themes for many apps

From your favorite code editor and terminal to Slack and Google Chrome. No trendy bright colors, no distractions.

Squirrelsong light theme for for Chrome — Squirrelsong Light for Chrome

Get it for your editor, terminal, or app

Themes for 26 apps and growing.

Light

Light

LightDark

Light

LightDark

Light

Dark

Light

Light

LightDark

Dark

Light

Light

Light

Light

Light

LightDark

LightDark

Dark

Light

LightDark

Light

Dark

Light

Dark

About the author

Hola! I’m Artem.

I’m a software engineer with 20 years of experience in small startups and large corporations, like Wayfair, Mail.ru, Here Technologies, Omio, Stage+, and Badoo. I created React Styleguidist (a tool to create React components and share them with your team), among many other open source projects.

I created the first version of this theme in 2016, and since then use it every day at work and for personal projects. Seven years later, I rebuilt it almost from scratch and improved many things.

Have a question?

Write me at artem@sapegin.ru, @sapegin@mastodon.cloud, @sapegin.me, or open an issue.

Like the theme?

Buy me a coffee

The font used in all examples and logo is MonoLisa. The icons on the Visual Studio Code screenshots are from the Catppuccin Icons extension. The gradient new tab page in the Chrome screenshot is from the Blank Sky extension.