Unicorn Theme

Installation

Open the Extensions sidebar in VS Code
Search for Unicorn Theme
Click Install
Open the Command Palette with Ctrl+Shift+P or ⇧⌘P
Select Preferences: Color Theme and choose a Unicorn Theme 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 Unicorn's colors. Check out some of the personalization options below to customize Unicorn Theme to your liking.

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

Contrast

To add a border between sections of the editor, add the following to your settings...

"workbench.colorCustomizations": {
  "contrastBorder": "#16161C"
}

Or for Bright variants...

"workbench.colorCustomizations": {
  "contrastBorder": "#1A1C231A"
}

Italics

The normal theme only uses italics in a few places. If you would prefer no italics at all, you can configure this in your settings...

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

Tag Brackets `<>`

For gray rather than red brackets around HTML tags...

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

Contributing

Check out the contributing guide to learn how you can report issues and help make changes.

Always be sure to follow the Code of Conduct.

Unicorn