Eva Theme

Description

Eva Theme is a colorful and semantic coloring code theme meet Visual Studio Code.

There are four styles in it: Dark, Dark Bold, Light, Light Bold. The Bold styles make keywords and function names thicker.

Requires a minimum of 1.12.0 VSCode version.

Support

Tested with the following languages in native environment, except derived frameworks:

HTML / XML / JSX / WXML
CSS / LESS / SCSS / WXSS
JavaScript / TypeScript
C / C++ / C#
Java
PHP
Pyhton
Golang
Ruby
Dart
JSON
Markdown

Other languages have syntax highlighting too, it's just not guaranteed to be semantic yet.

Installing

Paste the following command into VSCode extension input and press Enter:

ext install eva-theme

Activate

VSCode → Preferences → Color themes → Select Eva theme

Font

The above screenshots' font is CamingoCode. If you like, download and add it into system font folder, then open VSCode → Preferences → Settings :

"editor.fontFamily": "CamingoCode",

Icons

After trying multiple icon themes, I think file-icons is the best match for Eva Theme.

Advanced

For a better experience, I recommend an awesome plugin Bracket Pair Colorizer for you.

Here is my Bracket Pair Colorizer setting:

Match Eva Dark theme

"bracketPairColorizer.showHorizontalScopeLine": false,
"bracketPairColorizer.showVerticalScopeLine": false,
"bracketPairColorizer.consecutivePairColors": [
        "()",
        "[]",
        "{}",
        [
        "#838FA7",
        "#A78CFA",
        "#56B7C3",
        "#FF9070"
        ],
        "#e51400"
    ]

Match Eva Light theme

"bracketPairColorizer.showHorizontalScopeLine": false,
"bracketPairColorizer.showVerticalScopeLine": false,
"bracketPairColorizer.consecutivePairColors": [
        "()",
        "[]",
        "{}",
        [
        "#5D5D5FD8",
        "#7C4DFF",
        "#00BEC4",
        "#ff6500"
        ],
        "#e51400"
    ]

Conflicts

All theme plugins add color to characters based on its scope value.

You can check the scope value of all characters by pressing "Ctrl+Shift+P" (Windows) or "Cmd+Shift+P" (Mac) and selecting "Inspect TM Scopes".

Any plugin that changes the syntax highlighting rules will change the scope value of some characters and then change their color. e.g. "Babel", "JavaScript Atom Grammar".

Issue

Please note that this theme is not perfect yet. If you find any inconsistency in any language, you can help by reporting issues here(It is great to attach a case code, screenshot & copy), or leave me a comment on Marketplace. Thanks for your issues! I will keep updating!

Encourage

If you do like this theme, would you please give me a Github Star ☆ and Nice Rating as reward. Thanks so much! O(∩_∩)O~

fisheva