RespectMyEyes-VSCode

Respectmyeyes Vscode

A light theme for Svelte, React, TypeScript, .NET, ASP.NET Core and some more languages.

Ukrainian flag RespectMyEyes theme for VS Code

Count of installations from Visual Studio Marketplace badge Extension version on Visual Studio Marketplace badge Last updated date on Visual Studio Marketplace badge

Core supported languages:

  • Svelte
  • JavaScript / TypeScript
  • React / JSX / TSX
  • C# / .NET / ASP.NET Core
  • CSS
  • HTML / XML
  • JSON
  • Markdown

Screenshots

User Interface

Source: PourOverPotato

Svelte

Source: PourOverPotato

JavaScript

Source: Brad Traversy's Modern Portfolio

TypeScript

Source: PourOverPotato

React / JSX / TSX

Source: React TypeScript RealWorld Example App

C#

Source: TogglPotato

CSS

Source: Brad Traversy's Modern Portfolio

HTML

Source: Brad Traversy's Modern Portfolio

JSON

Source: Brad Traversy's Modern Portfolio

Markdown

Source: TogglPotato

Core supported languages

Language Expected syntax highlight extension
Svelte Svelte for VS Code
JavaScript / TypeScript -
React / JSX / TSX -
C# / .NET / ASP.NET Core C# Dev Kit
C# Razor Pages / Blazor C# Dev Kit
CSS -
HTML / XML -
JSON -
Markdown -

Lazily supported languages

Maintainers for these and new languages are very welcome!

Language Expected syntax highlight extension
Vue Vue - Official
Angular Angular Language Service
Java Language Support for Java(TM) by Red Hat
Python Python
Go Go
Rust rust-analyzer
SQL -
PowerShell PowerShell
Shell -
Batch / CMD -
AutoHotKey AutoHotKey Plus Plus
SASS / LESS -
styled-components vscode-styled-components
YAML -
TOML Even Better TOML
Dockerfile -
.env DotEnv

Azure Data Studio compatibility

This is outdated and I'm going to improve it eventually.

You can install this theme or any other theme by downloading it's .vsix file and going to Extensions > Install from VSIX... in Azure Data Studio. Download the latest VSIX file from the Releases page.



Below are the fixes for the Azure Data Studio incompatibilites, put them into your settings.json in Azure Data Studio.

// settings.json
{ 
  "workbench.colorCustomizations": {
    "[RespectMyEyes Light]": {
      // Fix the invisible input borders:
      "input.border": "#D3D3D3",
      //
      // Fix the invisible button borders:
      "button.border": "#A9A9A9"
    }
  }
}

Terminal color customization

This is outdated and I'm going to improve it eventually.

Below are the suggested overrides for the terminal colors, put them into your settings.json file.

// settings.json
{
  "workbench.colorCustomizations": {
    "[RespectMyEyes Light]": {
      "terminal.ansiBlack": "#000000",
      "terminal.ansiBrightBlack": "#000000",
      "terminal.ansiBlue": "#FFFF40",
      "terminal.ansiBrightBlue": "#729FCF",
      "terminal.ansiCyan": "#06989A",
      "terminal.ansiBrightCyan": "#34E2E2",
      "terminal.ansiGreen": "#00B000",
      "terminal.ansiBrightGreen": "#00D000",
      "terminal.ansiMagenta": "#AD7FA8",
      "terminal.ansiBrightMagenta": "#F066FF",
      "terminal.ansiRed": "#CC0000",
      "terminal.ansiBrightRed": "#EF2929",
      "terminal.ansiWhite": "#000000",
      "terminal.ansiBrightWhite": "#000000",
      "terminal.ansiYellow": "#0000CC",
      "terminal.ansiBrightYellow": "#0BC5E3",
      "terminalCursor.foreground": "#00A000",
    }
  }
}

VS Code's UI customization

This is outdated and I'm going to improve it eventually.

If you've found something different from your setup in my screenshots above, here are some important settings from my settings.json file.

// settings.json
{
  // UI Layout:
  "explorer.compactFolders": false,
  "workbench.sideBar.location": "right",
  "workbench.iconTheme": "vscode-icons",
  "workbench.colorTheme": "RespectMyEyes Light",
  //
  // Editor UI:
  "editor.cursorSmoothCaretAnimation": true,
  "editor.renderWhitespace": "boundary",
  "editor.snippetSuggestions": "inline",
  "editor.minimap.enabled": false,
  "editor.renderControlCharacters": false,
  "editor.guides.indentation": false,
  "editor.bracketPairColorization.enabled": false,
  "editor.codeLens": false,
  "editor.rulers": [
    120
  ],
  "editor.suggestSelection": "first",
  "editor.linkedEditing": true,
  //
  // Font:
  "editor.fontFamily": "Fantasque Sans Mono",
  "editor.fontSize": 16,
  "editor.fontLigatures": true,
  //
  // Show the color for a color code, Color-Highlight extension:
  "color-highlight.enable": true,
  "color-highlight.markerType": "dot-before",
  "color-highlight.markRuler": false,
  "editor.colorDecorators": false,
  // Like this: #00BF00
  //
  // Terminal window:
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.fontFamily": "CaskaydiaCove NF",
  "terminal.integrated.cursorStyle": "underline",
  "terminal.integrated.cursorBlinking": true,
  //
  "files.associations": {
    ".stylelintrc": "json",
    ".stylelintignore": "ignore",
    ".eslintignore": "ignore",
    ".browserslistrc": "properties",
    ".prettierrc": "json"
  },
  "workbench.colorCustomizations": {
    "[RespectMyEyes Light]": {
      //
      // hide the inactive indent lines:
      "editorIndentGuide.background1": "#FFFFFF",
      "editorIndentGuide.background2": "#FFFFFF",
      "editorIndentGuide.background3": "#FFFFFF",
      "editorIndentGuide.background4": "#FFFFFF",
      "editorIndentGuide.background5": "#FFFFFF",
      "editorIndentGuide.background6": "#FFFFFF",
    }
  }
}

Development

Validation repos are listed here.

License

Top categories

Loading Svelte Themes