sdras/night-owl-vscode-theme

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

Night Owl 🌌

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

Light Owl

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

• Hyper: https://github.com/pbomb/hyper-night-owl
• iTerm2
  1. https://github.com/nickcernis/iterm2-night-owl
  2. https://github.com/jsit/night-owl-iterm2-theme
  3. https://github.com/florianeckerstorfer/night-owl-itermcolors
  4. https://github.com/andrewfluck/night-owl-iterm2
• Xresources: https://github.com/alochaus/night-owl-xresources-theme
• Atom: https://atom.io/themes/night-owl-vs-code-syntax
• Jetbrains: https://github.com/xdrop/night-owl-jetbrains
• Emacs: https://github.com/aaronjensen/night-owl-emacs
• Vim
  1. https://github.com/Khaledgarbaya/night-owl-vim-theme
  2. https://github.com/haishanh/night-owl.vim
• Pygments https://github.com/liamdawson/nightowl-pygments-style
• Alfred: https://github.com/jbharat/night-owl-alfred-theme
• Ulauncher: https://github.com/christoph-fricke/ulauncher-night-owl-theme
• TextMate https://github.com/batpigandme/night-owlish
• Ace Editor https://github.com/batpigandme/night-owlish
• RStudio https://github.com/batpigandme/night-owlish
• Insomnia https://github.com/yoannfleurydev/insomnia-plugin-night-owl-theme
• Sublime Text 3 https://github.com/VonHeikemen/night-owl-sublime-scheme
• Slack https://github.com/clouby/night-owl-slack
• Xcode https://github.com/stealthanthrax/xcode-Night-Owl
• Visual Studio 2019: https://github.com/kai-oswald/NightOwl-VS-Theme
• Prism https://github.com/SaraVieira/prism-theme-night-owl
• Windows Terminal https://github.com/edurojasr/Windows_Terminal_Theme_Night_Owl
• Alacritty: https://github.com/alacritty/alacritty

Light Theme

• iTerm2: https://github.com/fcaldera/night-owl-light-iterm2
• Vim: https://github.com/macguirerintoul/night_owl_light.vim
• Tilix: https://github.com/johanhammar/light-owl-tilix
• Alacritty: https://github.com/nik27/night-owl-alacritty-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",
    "editorGroup.border": "#102a44",
    "sideBar.background": "#001122",
    "sideBar.border": "#102a44",
    "sideBar.foreground": "#8BADC1"
  },
  "[Night Owl (No Italics)]": {
    "activityBar.background": "#000C1D",
    "activityBar.border": "#102a44",
    "editorGroup.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,

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

night-owl-vscode-theme's Issues

highlight matched strings

Matched words don't get highlighted anymore.
in the image, all 'test's supposed to get a slight highlight.

Vim Visual Mode blanks out selected text if it's highlighted

Okay, so here's a weird one for you.

If you open up vim in the integrated terminal, and highlight some text via Vim's visual mode that isn't styled, it'll vanish (I think because it turns the text the same color as the background, not that the highlight is covering it up though I can't be sure).

I made a video to illustrate the problem https://cthos-backups.nyc3.digitaloceanspaces.com/images/vim_visual_mode.mp4

And here are some screenshots:

Before Visual mode highlighting:

After Highlighting:

Highlighted text in Peek Declaration list is the same color as the background

Right-click on a symbol and select Peek Declaration. The highlighted text in the list of results has no contrast against the background. (Peek Declaration may be specific to the C/C++ extension when Intellisense is configured for the project. I can provide whatever you need if you don't have code where this shows up.)

Night Owl:

Dark+ (Default):

Missing scope in italics config?

I copy/pasted from the readme and I still get a few:

It's not particularly bothersome here, just thought I'd point it out.

Arrow functions should not be italicized

https://twitter.com/smlombardi/status/997565804983017473

Powerlevel9k colors are washed out in integrated terminal

Not sure how relevant this would be for other people, but the colors of the Default powerlevel9k settings in zsh appear washed out in the Integrated terminal making them a bit difficult (for me at least) to read.

For comparison, here's the Dracula theme:

Visual cue needed for separation between the editor and the explorer

Thanks for working on this great theme! I am loving it.

I would like to suggest adding a border between the editor and the explorer or have a different background color for the explorer to provide a nice separation.

Mention ported versions?

Just to let you know that Night Owl's already been ported to iTerm 2 and Hyper:

• Hyper: https://github.com/pbomb/hyper-night-owl
• iTerm2: https://github.com/nickcernis/iterm2-night-owl

Could be mentioned in the readme or wiki, perhaps? Or not! That is fine too. :-)

support for PowerShell

First thing: Thank you very much, really nice theme. I used to switch themes depending on the project type. Now I have a couple weeks without switching, they just look great on Night Owl 👍

I also use VS Code for almost every text editing, and I do a lot of Powershell. And PS scripts looks... kinda funny.

Hope you find some time to check it out. Thanks again for your effort!

Parenthesis occasionally on italics looks "weird?"

Not sure if "weird" is the right word, but:

The circled areas should be self-explanatory, but I'll express here in words what they're about:

1. Parenthesis are shown in italics when calling a function, but not when declaring a function.
2. Parenthesis in italics, while the inner braces when passing an object literal to a function call are not.
3. Unlike with braces in the previous point, if you pass an array literal, the square brackets are in italic, which go along better with the wrapping parenthesis also in italics (I realized this last one after I took the screenshot so it's not there).

I'd say either all of these wrapping-kind of pairs of characters should be in italics, or none. I'm referring specifically to (), {}, [], and leaving string quotes out of the equation. In particular, the fact that parenthesis are put in italics some times and not in all situations, and square brackets are in italic but braces are not, seems odd.

Thoughts?

Toggling the Side Bar causes: "Cannot read property 'setVisible' of undefined"

Issue

When I'm on the Source Control side bar, pressing ctrl+B to toggle it causes the following error:

Cannot read property 'setVisible' of undefined

• See demo here.

System info

VS Code version: Code 1.23.1 (d0182c3417d225529c6d5ad24b7572815d0de9ac, 2018-05-10T16:04:33.747Z)
OS version: Linux x64 4.15.0-20-generic

System Info

Item	Value
CPUs	Intel(R) Core(TM) i7-7600U CPU @ 2.80GHz (4 x 2900)
GPU Status	2d_canvas: enabled flash_3d: enabled flash_stage3d: enabled flash_stage3d_baseline: enabled gpu_compositing: enabled multiple_raster_threads: enabled_on native_gpu_memory_buffers: disabled_software rasterization: disabled_software video_decode: unavailable_software video_encode: enabled vpx_decode: unavailable_software webgl: enabled webgl2: enabled
Load (avg)	2, 2, 2
Memory (System)	15.39GB (1.09GB free)
Process Argv	/usr/share/code/code --unity-launch
Screen Reader	no
VM	0%

Extensions (28)

Extension	Author (truncated)	Version
vscode-toggle-quotes	Bri	0.3.1
bracket-pair-colorizer	Coe	1.0.50
vscode-markdownlint	Dav	0.16.0
EditorConfig	Edi	0.12.2
code-settings-sync	Sha	2.9.2
project-manager	ale	0.25.2
vscode-custom-css	be5	2.7.0
npm-intellisense	chr	1.3.0
path-intellisense	chr	1.4.2
mustache	daw	1.1.1
jshint	dba	0.10.18
vscode-eslint	dba	1.4.9
githistory	don	0.4.1
eslint-disable-snippets	drK	1.1.4
gitlens	eam	8.3.0
tslint	eg2	1.0.29
vscode-npm-script	eg2	0.3.4
prettier-vscode	esb	1.3.1
auto-close-tag	for	0.5.6
vsliveshare	ms-	0.3.125
debugger-for-chrome	msj	4.4.3
vscode-code-outline	pat	0.2.1
vscode-icons	rob	7.23.0
vscode-fileutils	sle	2.8.1
es6-mocha-snippets	spo	0.1.3
addDocComments	ste	0.0.8
vscode-import-cost	wix	2.6.2
ReactSnippets	xab	2.1.0

(3 theme extensions excluded)

Unreadable Inactive Tabs in Unfocused Split Editor

Reliance on git

A windows user reported needing git to install, that should not be the case.

Preview Image in Readme is Broken

Sadly the preview image in the Readme.md is broken (file does not exists).

Suggestion: don't emphasize nested square brackets

I was testing out your theme (thank you!) while writing some tests 🔬and saw this use case which I personally found offputting, so I thought I'd bring it up:

Nested square brackets are italicized which particularly looks kind of funny when juxtaposed against other kinds of brackets, e.g., curly, as shown below.

I don't know if it's by design or not, but in any case, I thought I'd just put it out there. Plus, I realize it can easily be disabled in settings. Thank you for your work!

Text in divs/components have no contrast

Example here:
https://twitter.com/kentcdodds/status/999779167053856770

Contrast the panels

Hello Sarah,

good job on the theme. Was wondering if there is a plan to distinguish the panels with color contrast/saturation. Sometimes it is a a little painful to the eye as I try to run around the files and code panels.

Please document how I can adjust individual colors

Here is a quick and dirty issue so you can track the request (as per our conversation on Twitter)

As I have mentioned, the "green" color that is used is closer to "yellow" and causes some confusion for my eyes when executing PHPUnit tests (see screenshot)

This is how it appears in terminal

Bug in prompts

@clarkio mentioned that prompts are not correct, here's a gif:

New Logo For night-owl-vscode-theme

Hi @sdras, I love the Night Owl Vscode theme you made. Let me create a logo for this project. Thanks :)

Suggestion: Could you provide a free font alternative?

Theme looks awesome. But, it would be great if you have an alternative version using a free font.
Congrats!

Just recommendation on changelog

Just a short note on ordering your changelog that it helps readers to see what the recent changes are by ordering them in descending order.

Not sure it is common with VS Code extensions but a good many that I use the descending order....just gives quicker reference to the latest fixes without having to scroll down.

My eyes are loving the theme 🥇 🎉

feat: improve keyword recognition by making color unique

First off, thanks for working hard on bringing a new theme to the community that really feels truly original in the wide sea of theme options!

Problem

In JavaScript (and possibly other languages), there is a color duplication between keywords and object keys. This reduces the visibility of keywords, since they don't have a unique color by which to identify them.

Example

The debugger statement is not easily discernible among the object keys using the same color.

Ideas

For reference, here's the default dark theme from code:

It's interesting to note that they use a lighter version of the keyword. Maybe that's an idea to riff off? Take it wherever you want to, but I thought I would at least offer some potential inspiration.

Side Note

While playing with example code, I noticed that there are keywords that use a different color, like in a for..of loop:

This seems consistent with other themes like the default dark (again):

What seems different is how the alt color is used. You're certainly welcome to approach this however you see fit, but it appears that there are subclasses of keywords. My first concern with a theme is about instant control flow recognition, so I like when themes are consistent in how they group the coloration of things. On a sub-side note, you can also see that class types have some special coloration here.

suggestion for colors

it's not an issue. I've made these changes of colors to make it fit my needs
thought it might be helpful

"diffEditor.insertedTextBackground": "#99b76d20", "diffEditor.removedTextBackground": "#ef535020", "diffEditor.insertedTextBorder": "#00000000", "diffEditor.removedTextBorder": "#00000000", "tab.activeForeground": "#00ccff", "tab.inactiveForeground": "#5f7e9799", "editor.selectionHighlightBackground": "#ffffff22", "editorIndentGuide.background": "#05508d22", "editorGutter.background": "#00000011", "sideBar.background": "#011423", "editorHoverWidget.background": "#01111e", "panel.border": "#5f7e9728",

Scrollbar color is Indistinguishable from background Color

On my mac at least, the scrollbar color is the same as the background color so you can't really see where it is.

In the attached screenshot you can just barely see it where it's blocking out the side margin's line right below the blue change mark.

closing and opening brackets are too strongly highlighted

reported from twitter

HTML tag opening & closing mark

I would also add that, react (HTML) tags aren't marked like functions and objects are.

React HTML tags

VS

Function marker

Would love to see such a thing for HTML tags in general as well!
Great work so far!

Can not find theme in VS Code or Online

I can not find the theme in my local VS Code or online in the search of the marketplace (https://marketplace.visualstudio.com/search?term=night-owl-vscode-theme&target=VSCode&category=All%20categories&sortBy=Relevance).

Allow keyword italics to be disabled

Feature request:
I like Fira Code more than Dank Mono. This theme make keywords show up in italics, is there any way for me to disable that?

Some weird color if i set tab visibility to hidden

Hi,

Just installed this theme saw in trending it is good, but i notice one thing weird color on my tab area if its tab visibility hidden

tab color when i set tab visibility to hidden
Screenshot tab visibliey hiddeen

tab color when i set tab visibility to visible
Screenshot tab visibily visible

as its look good if i set tab visiblity to visible, but if i set that hidden that look weird.

Suggestion: React element and HTML element colors in JSX

Thank you for the great theme. I just wanna bring up one suggestion: when writing JSX, React elements and HTML elements have the same tag color:

Night Owl:

whereas in Material Theme Ocean:

I'm not sure if the design is intentional. Having separate colors helps me when writing JSX. I hope you can consider implementing this in the future or help guide me to tweak this myself. Thanks.

Suggestion: Add vertical line to help see block scope

Thanks so much for this theme @sdras! I've been enjoying it thus far! 🎉

One thing I just noticed is that most (if not all) of the other themes have a vertical line to help distinguish block scope. I have never jumped into the theme making world, so have no clue how this is done, but if it's not too much of a bother I'd like to make the suggestion of adding this to your Night Owl theme. Thank you for your consideration! 😄

Monokai Dimmed

Notice a vertical line to help distinguish block scope.

Night Owl

Notice no vertical line.

Contrast of selection highlight in sidebar forms to low

I often Ctrl+Shift+F to search globally. I take the selection highlight as a cue to see that I have focused the search form successfully.

In Night Owl the selection is barely visible:

Compare this to Code’s Dark theme:

Other than that I like the theme, so thank you :)

Comments are too faint

People have mentioned that they're hard to see.

This hinting is too strong

I'm not sure what these references are called (in yellow), but it should not be so strong:

light version

I know it sounds a bit strange, but I would love a light version of this theme. I often find myself programming in bright environments where I simply can not see dark themes very good. However, this theme is so meticulously crafted that I would love a version which I could still use in such an environment.

At the moment I use Monokai Light or Gitbub Clean White for this.

Typescript Support!

Thanks for the great work, I'm really enjoying the theme 😄. Just a quick question, is there a reason that the same rules for highlighting don't apply across javascript and typescript? For example in js imports are:

but in typescript they are:

Make a carbon theme

Not high priority, details here:

https://twitter.com/fixitup2/status/1001672452588498944

Increase contrast for line number foreground

Hello! Thank you for such an amazing theme 🌟

Would you consider increasing the color contrast for the inactive line number? The numbers are a bit hard to see against the background. For example, the numbers 10 and 12 are a little hard to see in the following image:

This isn't a problem when you're coding by yourself. However, I've found that my coworkers and I have a hard time finding line numbers when we're looking at the same screen and we refer to line numbers (i.e. "check out line X").

Thank you for taking the time to read this issue and considering it! Furthermore, I believe the following are the configuration settings that might need to be changed in order to fix this issue if it's accepted: editorLineNumber.foreground and editorLineNumber.activeForeground.

Can’t distinguish which tab is currently selected in the tab bar

Thanks so much for sharing this theme!

One bug that stood out: I can’t tell which tab is selected by the color palette (see attached image)

Screenshots vs real use

Thanks for creating and sharing this theme.

Are the screenshots in this README up to date? I was excited to try this for some cool colors but higher contrast because I work outdoors a lot. However after I installed it, everything is not nearly as bright as the screenshots.

Line for terminal separation

Like this tweet specifies: https://twitter.com/KevinDavus/status/997263930203389952

"workbench.colorCustomizations": {
"panel.border": "#7e57c2"
}

tagged release?

Is there a reason why there isn't a tagged release? Love this theme by the way. I pretty excited about it.

Color Issues inside PHP classes

I noticed some color issues with PHP classes where accessing a property has the same color as "$this->".

ignored files too pronounced

👋🏻

Files in the file explorer that have been .gitignored tend to be colored in a muted way, with less contrast against the background, in most themes. With Night Owl, they feel almost more pronounced in color and I find it a bit distracting to me. Maybe there's a darker blue that still gives enough contrast to be readable?

Screenshots of this theme & Dark "(Visual Studio)":

inconsistent italics in typescript

Inside of a deeply nested object literal in TS, the booleans are italicized:

Also, variable.other.object.property and variable.other.property should be treated the same?

Here's the TS file: http://jmp.sh/5aVMmPt

Focus color on secondary list

Hi! First of all, thanks for this incredible theme. It has been a blast to use.

I found an issue with list rendering. On the command list (cmd+shift+P), the focus (through keyboard navigation) indicator relies on a dotted border on the highlighted item:

But, on "secondary" lists, such as those generated by plugins, there is no dotted border, and the focus isn't really visible because "list.focusBackground": "#5f7e9700" means no opacity. Example from the 'Advanced New File' plugin (but I found it on other lists):

I guess the way to fix this would be adding the dotted border on these lists too, and I would be happy to PR for it, but I honestly don't know how to.

Italic || in rust code confusing

Love your theme! It's finally convinced me to switch back to a dark one.

There is one small annoyance, though. In Rust, you can write an anonymous function with no parameters that returns 42 like this || 42. In expression contexts, || is also boolean OR. So, I was quite surprised to see the double-pipe set in italic -- which looks like //, the start of a line comment.

The span in question looks like this:

<span class="mtk3 mtki">||</span>

Maybe you can either make operators non-italic in Rust or special case this case if possible?

Some of the coloring logic seems a little off

Specifically in Ruby:

• Class definitions keep scope resolution coloring, I think most other color palettes give the two sides of the :: two different colors. However in invocation, the two are colored properly, unless I invoke .new, in which case it goes back to the same color.

• calling a function with a symbol as an arg is the same color, I would have expected a different color to for better contrast.

Screenshot to illustrate:

Otherwise I love the theme! It looks great!

Suggestion: Coloring for increment and decrement operators

Hi Sarah,
great theme, I really enjoy using it. However, there is a small annoyance I observed:

As you can see, the increment operator ++ (-- is affected, too) has the same color as the value it is applied to, making it easy to miss while quickly scanning code.
I suggest giving them a different color (maybe the purple used for other math symbols?) to make them stand out more.

Thanks for making this theme :)