VSCode Green Eyecare Theme
Tags: vscode, theme, green, eyecare
Published: 2021-04-12 02:52:16


## Green Eyecare Theme
[![Marketplace](https://vsmarketplacebadge.apphb.com/version/yezige.vscode-theme-green-eyecare.svg)](https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare)[![Installs](https://vsmarketplacebadge.apphb.com/installs/yezige.vscode-theme-green-eyecare.svg)](https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare)[![Ratings](https://vsmarketplacebadge.apphb.com/rating-short/yezige.vscode-theme-green-eyecare.svg)](https://marketplace.visualstudio.com/items/yezige.vscode-theme-green-eyecare)

[Green Eyecare](https://github.com/yezige/vscode-theme-green-eyecare) theme based on Material Design.

## Screenshots
![Screenshots](https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview.png)

_The font in the picture is Cascadia Code_

## Install

### Install using GUI
1. Enter extension panel or press `Ctrl+Shift+X`
2. Search `Green Eyecare`
3. Click `install`

### Install using Command Palette
1. Install using Command Palette
2. Go to `View` -> `Command Palette` or press `Ctrl+Shift+P`
3. Then enter `Install Extension`
4. Write `Green Eyecare`
5. Select it or press Enter to install

## Custom font

### Microsoft font (recommended): **Cascadia Code**
Installation: [**Cascadia Code**](https://github.com/microsoft/cascadia-code)

Screenshots:

![Screenshots](https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-cascadia-code.png)

#### Set font of VSCode

If you download and install the font in your system, you can add this option to have a custom font:

1. Go to `View` -> `Command Palette` or press `Ctrl+Shift+P`
2. Then enter `Open Settings(JSON)`
3. In the opened file, modify or add the value of `editor.fontFamily` to `Cascadia Code`

    ```json
    {
        "editor.fontFamily": "Cascadia Code"
    }
    ```

#### Set line height of VSCode

```json
{
    "editor.lineHeight": 22
}
```

#### No need to set font size

### My merged font: **Inconsolata + Yue Yuan**

Installation: [**LZ YueYuan Inconsolata**](https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/fonts/LZ-YueYuan-Inconsolata.otf)

Screenshots:

![Screenshots](https://raw.githubusercontent.com/yezige/vscode-theme-green-eyecare/master/screenshots/preview-LZ-YueYuan-Inconsolata.png)

#### Set font of VSCode
    
If you download and install the font in your system, you can add this option to have a custom font:

1. Go to `View` -> `Command Palette` or press `Ctrl+Shift+P`
2. Then enter `Open Settings(JSON)`
3. In the opened file, modify or add the value of `editor.fontFamily` to `LZ YueYuan Inconsolata`
    
    ```json
    {
        "editor.fontFamily": "LZ YueYuan Inconsolata"
    }
    ```

#### Set line height of VSCode

```json
{
    "editor.lineHeight": 22
}
```

#### Set font size of VSCode (Only fine fonts are recommended)

```json
{
    "editor.fontSize": 15
}
```

## What's new?

Click here to go to the [Changelog](https://github.com/yezige/vscode-theme-green-eyecare/blob/master/CHANGELOG.md)

## See my blog for details
[liu.app](https://www.liu.app/2018/08/29/VSCode/%E4%BF%AE%E6%94%B9VSCode%E7%9A%84%E4%B8%BB%E9%A2%98%E9%A2%9C%E8%89%B2%E4%B8%BA%E6%8A%A4%E7%9C%BC%E7%BB%BF/)


## Enjoy 🎉🎉🎉