/*_*/

Squirrelsong

Light & dark themes for web developers

Get it now!

Features

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.

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>
  );
}

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.

<!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'
)

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.

Squirrelsong light theme for Visual Studio Code

Get it for your editor, terminal, or app

Visual Studio Code, JetBrains, Sublime Text, iTerm2, Terminal.app, Google Chrome DevTools, Google Chrome, Alfred, Slack, Telegram, Bear, Prism

Visual Studio Code

lightdark

Open View → Command Palette or press Cmd+Shift+P
Choose Install Extension
Type Squirrelsong Light or Squirrelsong Dark
Select it or press Enter to install

JetBrains

light

Works in all JetBrains IDEs: Android Studio, IDEA, PhpStorm, PyCharm, RubyMine, WebStorm, etc.

Open Settings
Choose Plugins, then Marketplace
Type Squirrelsong Light
Press Install
Open Settings, choose Squirrelsong in Appearance & Behavior → Appearance → Theme and Editor → Color Scheme → Scheme

Sublime Text

lightdark

Download the repository as a ZIP acrhive
Unzip the files
Select Preferences → Browse Packages to open your Sublime Text packages directory
Copy the light/Sublime Text/Squirrelsong Light or dark/Sublime Text/Squirrelsong Dark folder into your Sublime Text packages directory
Go to Preferences → Color Scheme → User and select the Squirrelsong Dark theme

iTerm2

dark

Download Squirrelsong Dark.itermcolors
Open Settings, then Profiles, then Colors
Open Color presets dropdown at the bottom, and chooseImport
Select Squirrelsong Dark.itermcolors
Select Squirrelsong Dark in Color presets dropdown

Terminal.app

dark

Download Squirrelsong Dark.terminal
Open Settings, then Profiles
Press the button with three dots at the bottom of the sidebar, and chooseImport
Select Squirrelsong Dark.terminal
Select Squirrelsong Dark in the sidebar
Select Default next to it

Google Chrome DevTools

light

Also works for Microsoft Edge, and other Chromium-based browsers.

Follow the instructions on GitHub

Google Chrome

light

Also works for Microsoft Edge, and other Chromium-based browsers.

Follow the instructions on Chrome Web Store

Alfred

light

Follow the instructions on Alfredapp.com

Slack

light

Follow the instructions on GitHub

light

Follow the instructions on Telegram

Bear

light

Follow the instructions on GitHub

Prism

lightdark

Follow the instructions on GitHub: light theme, dark theme

If something is missing or broken, feel free to send me a pull request on GitHub.

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, 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 used 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?

Drop me a line at artem@sapegin.ru, @sapegin@mastodon.cloud, @iamsapegin, or open an issue.

The font used in all examples and logo is MonoLisa. The icons on the Visual Studio Code screenshots are from the Catppuccin Icons extension.