Beyond the Horizon

This theme is based on and enhances the Horizon theme by Jonathan Olaleye.

The purpose of this theme is to achieve the nice dark and warm theme that Horizon brings, but to correct issues such as the IDE layout being washed out and a few tweaks to help make code stand out a little more.

Installation

Open the Extensions sidebar in VS Code
Search for Beyond the Horizon Theme
Click Install
Open the Command Palette with Ctrl+Shift+P or ⇧⌘P
Select Preferences: Color Theme and choose a Beyond the Horizon variant.
Enjoy! 🎉 Also, check out some of the personalization options below...

Personalization

Tastes change all the time. Fortunately, VS Code makes it easy to customize just about every aspect of your editor. If you want to change something, open the Command Palette and select Preferences: Open Settings (JSON). Here, you can override VS Code's defaults or Beyond the Horizon's colors. Check out some of the personalization options below to customize Horizon to suit your taste.

For more info on theming, visit the Theme Authoring Guide and Theme Color Reference.

Italics

The normal theme only uses italics in a few places: comments, parameters, and some special keywords (e.g. this). If you would prefer no italics at all, you can configure this in your settings...

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "name": "No italics",
      "scope": ["comment", "variable.language", "variable.parameter"],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

Color Reference

Syntax Colors

Note: All syntax colors have 90% opacity so that they're easier on the eyes :)

Color	Usage
`#B877DB`	Keywords, template literals & embedded punctuation (e.g. `${}` or `{}` )
`#E95678`	Variables, property names, tags, markup headings
`#25B0BC`	Functions, escape characters, CSS #ids
`#F09483`	Constants, regex, attributes, units, CSS .classes
`#FAB795`	Strings, pseudo CSS, inherited classes, markup links
`#FAC29A`	Special keywords, classes

Terminal Colors

Color	Normal	Bright
Blue	`#26BBD9`	`#3FC4DE`
Cyan	`#59E1E3`	`#6BE4E6`
Green	`#29D398`	`#3FDAA4`
Magenta	`#EE64AC`	`#F075B5`
Red	`#E95678`	`#EC6A88`
Yellow	`#FAB795`	`#FBC3A7`

UI Colors

Color	Usage
`#1C1E26`	Primary background
`#232530`	Light background (popups & widgets)
`#2E303E`	Selection, highlights, input field background
`#6C6F93`	Accents (e.g. scrollbar, drag and drop highlights)
`#F43E5C`	Errors, deletion highlights
`#E95378`	Accents (e.g. active tab, badges)
`#FAB38E`	Debugging status bar
`#FAC39A`	Modified Git decoration (explorer)
`#21BFC2`	Modified highlights (gutter & scrollbar ruler)
`#27D797`	Warning highlights, untracked resources
`#09F7A0`	Addition highlights

Credits

Jonathan Olaleye for the original Horizon theme this one is based on and enhances.
Designed by Freepik for the ninja image I'm using as my extension icon for now.

Shane Yu