Home

Awesome

<p align="center">A port of Sarah Drasner's <a href="https://github.com/sdras/night-owl-vscode-theme">Night Owl</a> VSCode theme</p> <p align="center"> A 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.

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

</p>

Getting Started

Installation

Recommended

Install Night Owl via Package Control.

  1. Open the Command Palette via <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd>
  2. Select Package Control: Install Package
  3. Search for Night Owl and press <kbd>↲ Enter</kbd>

Manual

  1. Clone or download this repository, (re)name the folder to Night Owl if necessary.
  2. Move the folder inside your sublime /Packages. (Preferences > Browse Packages...)

Activation

Color Scheme

Recommended
  1. Open the Command Palette via <kbd>Ctrl</kbd>/<kbd>⌘</kbd>+<kbd>Shift</kbd>+<kbd>p</kbd>
  2. Select UI: Select Color Scheme
  3. Search for Night Owlor Night Owl - Light and press <kbd>↲ Enter</kbd>
Via Preferences

Set the color scheme in your user settings Preferences > Settings:

"color_scheme": "Packages/Night Owl/Night Owl.sublime-color-scheme"

"color_scheme": "Packages/Night Owl/Night Owl - Light.sublime-color-scheme"

Color Palette

Dark theme

<table> <thead> <tr> <th> Use </th> <th> Color </th> <th> Sample </th> </tr> </thead> <tbody align="center"> <tr> <td> <code>Background</code> </td> <td> #011627 </td> <td> <img src='http://www.colorhexa.com/011627.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Foreground</code> </td> <td> #D6DEEB </td> <td> <img src='http://www.colorhexa.com/d6deeb.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Cursor</code> </td> <td> #80A4C2 </td> <td> <img src='http://www.colorhexa.com/80a4c2.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Active selection</code> </td> <td> #1D3B53 </td> <td> <img src='http://www.colorhexa.com/1d3b53.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Inactive selection</code> </td> <td> #7E57C25A </td> <td> <img src='http://www.colorhexa.com/7e57c2.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Search highlight</code> </td> <td> #5F7E97 </td> <td> <img src='http://www.colorhexa.com/5f7e97.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Comment</code> </td> <td> #637777 </td> <td> <img src='http://www.colorhexa.com/637777.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Constant</code> </td> <td> #FF6363 </td> <td> <img src='http://www.colorhexa.com/ff6363.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Numbers</code> </td> <td> #F78C6C </td> <td> <img src='http://www.colorhexa.com/f78c6c.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Keywords</code> </td> <td> #C792EA </td> <td> <img src='http://www.colorhexa.com/c792ea.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Functions</code> </td> <td> #82AAFF </td> <td> <img src='http://www.colorhexa.com/82aaff.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Quoted strings</code> </td> <td> #ECC48DFF </td> <td> <img src='http://www.colorhexa.com/ecc48d.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Support</code> </td> <td> #ADDB67 </td> <td> <img src='http://www.colorhexa.com/addb67.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Language variables</code> </td> <td> #7FDBCA </td> <td> <img src='http://www.colorhexa.com/7fdbca.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Invalid construct</code> </td> <td> #FF2C83 </td> <td> <img src='http://www.colorhexa.com/ff2c83.png' height='24' width='39'> </td> </tr> </tbody> </table>

Preview

More screenshots

preview dark theme

Light theme

<table> <thead> <tr> <th> Use </th> <th> Color </th> <th> Sample </th> </tr> </thead> <tbody align="center"> <tr> <td> <code>Background</code> </td> <td> #FBFBFB </td> <td> <img src='http://www.colorhexa.com/fbfbfb.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Foreground</code> </td> <td> #403F53 </td> <td> <img src='http://www.colorhexa.com/403f53.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Cursor</code> </td> <td> #90A7B2 </td> <td> <img src='http://www.colorhexa.com/90a7b2.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Active selection</code> </td> <td> #E0E0E0 </td> <td> <img src='http://www.colorhexa.com/e0e0e0.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Inactive selection</code> </td> <td> #EDEDED </td> <td> <img src='http://www.colorhexa.com/ededed.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Search highlight</code> </td> <td> #93A1A16C </td> <td> <img src='http://www.colorhexa.com/93a1a1.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Comment</code> </td> <td> #989FB1 </td> <td> <img src='http://www.colorhexa.com/989fb1.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Constant</code> </td> <td> #BC5454 </td> <td> <img src='http://www.colorhexa.com/bc5454.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Numbers</code> </td> <td> #AA0982 </td> <td> <img src='http://www.colorhexa.com/aa0982.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Keywords</code> </td> <td> #994CC3 </td> <td> <img src='http://www.colorhexa.com/994cc3.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Functions</code> </td> <td> #4876D6 </td> <td> <img src='http://www.colorhexa.com/4876d6.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Quoted strings</code> </td> <td> #C96765 </td> <td> <img src='http://www.colorhexa.com/c96765.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Support</code> </td> <td> #4876D6 </td> <td> <img src='http://www.colorhexa.com/4876d6.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Language variables</code> </td> <td> #0C969B </td> <td> <img src='http://www.colorhexa.com/0C969b.png' height='24' width='39'> </td> </tr> <tr> <td> <code>Invalid construct</code> </td> <td> #FF2C83 </td> <td> <img src='http://www.colorhexa.com/ff2c83.png' height='24' width='39'> </td> </tr> </tbody> </table>

Preview

More screenshots

preview light theme