Nightcall 🌃

A mellow, but colorful VS Code dark theme with vibrant shades of pink and purple.

I set out to make a theme versatile enough for any time of day that could better enable me to stare blankly at broken blocks of code while contemplating possible career changes work tirelessly on so many exciting and personally fulfilling projects.

Installation

1. Open Extensions sidebar panel in VS Code or go to View → Extensions
2. Search for Nightcall
3. Click Install to install it
4. Then go to Code → Preferences → Color Theme → Nightcall
5. Optional: Use the recommended settings below for best experience

No Italics

If you don't like italics (how dare you), select Nightcall (No Italics) as the theme.

Separate the Editor from the Sidebar

Taking a page from Night Owl's book, er, theme, if you'd prefer more constrast between the editor and sidebar, paste this into your user settings. These are my color recommendations:

"workbench.colorCustomizations": {
  "[Nightcall]": {
    "contrastBorder": "#181D36",
    "activityBar.background": "#0B0E1A",
    "activityBar.border": "#181D36",
    "sideBar.background": "#0F1221",
    "sideBar.border": "#181D36",
    "list.inactiveSelectionBackground": "#0F1221",
    "tree.indentGuidesStroke": "#181D36",
    "sideBarSectionHeader.background": "#0F1221"
  },
  "[Nightcall (No Italics)]": {
    "contrastBorder": "#181D36",
    "activityBar.background": "#0B0E1A",
    "activityBar.border": "#181D36",
    "sideBar.background": "#0F1221",
    "sideBar.border": "#181D36",
    "list.inactiveSelectionBackground": "#0F1221",
    "tree.indentGuidesStroke": "#181D36",
    "sideBarSectionHeader.background": "#0F1221"
  }
}

Recommended Settings

The font I'm using in the preview images is Dank Mono and is available here for purchase. For those not interested in buying a fancy font with cool italics, Fira Code also looks pretty good and can be downloaded here for free.

"editor.fontFamily": "Dank Mono",
"editor.fontLigatures": true,
"editor.letterSpacing": 0.3,

Recommended Plugin Settings

These are the settings I'm using:

Indent-Rainbow

"indentRainbow.colors": [
  "rgba(126, 144, 255, 0.05)",
  "rgba(187, 154, 247, 0.05)",
  "rgba(250, 166, 216, 0.05)",
  "rgba(255, 126, 199, 0.05)",
  "rgba(218, 188, 254, 0.05)",
],

Bracket Pair Colorizer 2

"bracket-pair-colorizer-2.forceIterationColorCycle": true,
"bracket-pair-colorizer-2.colors": [
  "#FF7EC7",
  "#FAA6D8",
  "#BB9AF7",
  "#7E90FF",
],

Footsteps

"footsteps.highlightColor": "rgb(248, 167, 212)",
"footsteps.highlightColorMaxOpacity": 0.05,

Import Cost

"importCost.smallPackageColor": "#98FACA",
"importCost.mediumPackageColor": "#98FACA",
"importCost.largePackageColor": "#F87171",

Misc

This is my first theme and there are many languages and parts of VS Code I don't use often (or at all), so needless to say I might've missed a few things 😅. Feel free to file an issue if something doesn't appear intentional, or very "Nightcall-sy" if you will.

Accessibility considerations and prolific use of italics inspired by Sarah Drasner's Night Owl theme.

TODO: Eventually add a more muted color theme option.