🎨 A beautifully warm dark theme for Visual Studio Code
Branch: master
Clone or download
Latest commit cbe0e76 Feb 20, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode 🚀 Initial commit Aug 17, 2018
demos Add for...of and for...in loops to js demo Oct 7, 2018
docs Clean up CSS Nov 25, 2018
themes Fix debug toolbar color Feb 20, 2019
.vscodeignore Merge jolaleye/horizon (homepage) Oct 7, 2018
CHANGELOG.md Release 1.7.1 Feb 20, 2019
CODE_OF_CONDUCT.md Add code of conduct Oct 17, 2018
CONTRIBUTING.md Rephrase "reporting a problem", turn opensource.guide note into quote Oct 17, 2018
LICENSE Initial commit Aug 31, 2018
README.md Update installation instructions Feb 20, 2019
logo.png Add new logo Oct 19, 2018


horizon banner

marketplace version downloads rating donate


The preview above shows the Horizon theme with the Roboto Mono font. Horizon also includes italic and bold variants.


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

Visit the Horizon Homepage for some nice previews :)


Themes are highly subjective and tastes change all the time. Luckily, 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). You can then override VS Code's defaults or Horizon's colors in the right side of the settings view. 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.

Sidebar Contrast

"workbench.colorCustomizations": {
  "activityBar.background": "#1E2028",
  "activityBar.border": "#1E2028",
  "sideBar.background": "#1E2028",
  "sideBar.border": "#1C1E26"


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

Tag Brackets <>

"editor.tokenColorCustomizations": {
  "textMateRules": [
      "name": "HTML tag brackets",
      "scope": ["punctuation.definition.tag"],
      "settings": {
        "foreground": "#BBBBBB"


Code of Conduct

Always try your best to make a positive impact on this project and its community. By participating, you are expected to uphold the Code of Conduct.

Contributing Guide

Read the contributing guide to learn about how you can report issues and contribute to changes.

Color Reference

Syntax Colors

Note: All syntax colors have 90% opacity so your eyes don't burn :)

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


MIT © Jonathan Olaleye