Skip to content

🌌NIGHT OWL: An iTerm2 dark theme for contrast for nighttime coding

License

Notifications You must be signed in to change notification settings

jsit/night-owl-iterm2-theme

 
 

Repository files navigation

Night Owl 🌌

An iTerm2 theme based on Sarah Drasner’s VS Code theme of the same name.

Installation

Drag the file themes/Night Owl.itermcolors onto iTerm2, or import it in Preferences > Profiles > Colors.

There is also a Night Owl (inverse).itermcolors theme, which swaps the "normal"/"bright" colors; the default "normal" colors are the common foreground colors used in the VS Code theme, but if for some reason your iTerm setup uses the "bright" colors as foreground colors, you may use this inverse theme.

Recommended iTerm2 Settings

  • Preferences > Profiles > Text > Text Rendering
    • Draw bold text in bold font
    • Draw bold text in bright colors
    • Use thin strokes for anti-aliased text: On Retina Displays and Dark Backgrounds

Color sources

Normal Bright
Black #011627
editor.background
#44596b
activityBarBadge.background
Red #f78c6c
Number
#ef5350
errorForeground
Green #addb67
String
#22da6e
terminal.ansiBrightGreen
Yellow #ffcb8b
Class name
#ffeb95
Constant Other Color
Blue #82aaff
Built-in constant
Function name
#5ca7e4
RegExp String
Magenta #c792ea
Keyword
#7e57c2
button.hoverBackground
Cyan #7fdbca
Meta tag
#21c7a8
terminal.ansiCyan
White #bec5d4
PHP Variables
#ffffff
Object Comma

Original README follows.


Version Downloads

A VS Code theme for the night owls out there. Works well in the daytime, too, but this theme is 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. ✨

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/

Preview

Installation

  1. Install Visual Studio Code
  2. Launch Visual Studio Code
  3. Choose Extensions from menu
  4. Search for night-owl-vscode-theme
  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 of this Theme

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

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": {
  "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

About

🌌NIGHT OWL: An iTerm2 dark theme for contrast for nighttime coding

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published