Espresso Soda

Espresso Soda is a color theme for Visual Studio Code heavily inspired by the original Espresso syntax theme and built on the foundation of the default Light theme. Solarized Espresso Soda, which is based on the default Solarized Light theme, is also available.

Screenshots

React & SCSS:

HTML & SCSS:

Pug:

Less syntax highlighting

I recommend installing the better-less extension together with this theme for proper Less CSS syntax highlighting in VS Code.

Installation

This theme is available for free in the Visual Studio Code Marketplace.

Activation

a) After install the theme, launch Command Palette

• macOS: ⇧+⌘+P
• Linux: Ctrl+P
• Windows: Ctrl+P

b) Type theme and choose Preferences: Color Theme, then select this theme from the list.

Customization

You can customize the colors to your liking, overriding the ones provided by this theme or extending them. More info here.

For example, the code below in the config.json file (Preferences > Settings) changes the sidebar item text color to black and make the CSS tag color dark green:

"workbench.colorCustomizations": {
    "sideBar.foreground": "#000000"
},
"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": ["entity.name.tag.css", "entity.name.tag.less"],
      "settings": {
        "foreground": "#61862F"
      }
    }
  ]
}

The scopes are identified by using Command Palette > Developer: Inspect TM Scopes.

Contribution

Report issues and bugs to the issue tracker.