Need help with night-owl-vscode-theme?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

sdras
2.2K Stars 200 Forks MIT License 321 Commits 46 Opened issues

Description

🌌 NIGHT OWL: A VS Code dark theme for contrast for nighttime coding, 🦉 LIGHT OWL: a daytime light theme

Services available

!
?

Need anything else?

Contributors list

# 4,407
JavaScr...
HTML
Nuxt.js
codepen
145 commits
# 166,904
vscode-...
dark-sy...
vscode
C#
14 commits
# 80,204
Webpack
HTML
vscode
dark-sy...
7 commits
# 230,138
TypeScr...
HTML
dark-sy...
vscode
4 commits
# 194,071
React
clj
Clojure
Clojure...
4 commits
# 290,152
vscode-...
dark-sy...
vscode
3 commits
# 105,048
Shell
Less
Django
dark-sy...
2 commits
# 158,929
HTML
mdn
vscode
dark-sy...
2 commits
# 94,071
React
ESLint
ecmascr...
dark-sy...
2 commits
# 619
JavaScr...
Shell
CSS
Vue.js
2 commits
# 83,144
React
ESLint
ecmascr...
twisted
2 commits
# 238,132
vscode-...
dark-sy...
vscode
C
2 commits
# 324,353
vscode-...
dark-sy...
vscode
2 commits
# 171,838
HTML
Twitch
vscode
dark-sy...
1 commit
# 381,103
vscode-...
dark-sy...
vscode
stripe
1 commit
# 36,849
JavaScr...
css-in-...
shadow-...
React
1 commit
# 33,908
TypeScr...
Visual ...
visual-...
vscode
1 commit
# 391,660
vscode-...
dark-sy...
vscode
1 commit
# 95,372
Less
HTML
dark-sy...
vscode
1 commit
# 3,208
node
ecmascr...
js
dark-sy...
1 commit

Night Owl 🌌

Version Downloads

A Visual Studio Code theme for the night owls out there. Fine-tuned for those of us who like to code late into the night. Color choices have taken into consideration what is accessible to people with colorblindness and in low-light circumstances. Decisions were also based on meaningful contrast for reading comprehension and for optimal razzle dazzle. ✨

As of 1.0.0, there's a Light Owl Theme too! Color balanced from the Dark version for easy viewing in daylight. 🌅

About this theme, and some of the considerations made while creating it (as well as how to create it should you want to make your own): https://css-tricks.com/creating-a-vs-code-theme/

Night Owl

First Screen Night Owl Frameworks

Light Owl

First Screen Light Light Owl Frameworks

Installation

  1. Install Visual Studio Code
  2. Launch Visual Studio Code
  3. Choose Extensions from menu
  4. Search for
    night owl
  5. Click Install to install it
  6. Click Reload to reload the Code
  7. From the menu bar click: Code > Preferences > Color Theme > Night Owl

Disable Italics

If you wish to disable italics, there is now a no-italic theme available. You will have access to both, select Night Owl No Italics as your color theme.

Other versions

The community is awesome and has ported this theme over to other environments.

Dark Theme

Light Theme

Separate the Editor from the Sidebar

This theme uses contrast sparingly so that when it's applied, it's more meaningful. This can help reduce noise and improve your ability to scan. However, some of the decisions may not work for everyone. One such decision that some disagree on is whether or not to have a separation between the editor and sidebar, and the amount of contrast. If you wish for this to have more visual signifigance, please paste this into your user settings preferences. These are my recommendations for these settings but you can use whatever colors you wish. ☺️

"workbench.colorCustomizations": {
  "[Night Owl]": {
    "activityBar.background": "#000C1D",
    "activityBar.border": "#102a44",
    "sideBar.background": "#001122",
    "sideBar.border": "#102a44",
    "sideBar.foreground": "#8BADC1"
  },
  "[Night Owl (No Italics)]": {
    "activityBar.background": "#000C1D",
    "activityBar.border": "#102a44",
    "sideBar.background": "#001122",
    "sideBar.border": "#102a44",
    "sideBar.foreground": "#8BADC1"
  }
},

Preferences shown in the preview

The font in the preview image is Dank Mono, available here. Editor settings to activate font ligatures:

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

The preview image is using Bracket Pair Colorizer, a really cool extension that highlights matching brackets. This can help reduce unwanted errors.

I use this setting:

"bracketPairColorizer.forceIterationColorCycle": true,

Bracket

Misc

This is my first foray into creating a theme, so if you see something amiss, please feel free to file an issue! I'm sure there are things I missed.

Any relevant changes for each version are documented in the changelog. Please update and check the changelog before filing any issues, as they may have already been taken care of.

This palette was inspired in part by Material Palenight Theme, and the accessibility idea was inspired in part by Solarized Themes

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.