RespectMyEyes-VSCode Svelte Themes

Respectmyeyes Vscode

A light theme focused on Svelte, React, JS, TS, C# .NET, Razor Pages, Blazor, HTML, CSS and Markdown support.

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

This is a light theme focused on support for Svelte, React, JS / TS, C# / .NET, Razor Pages / Blazor, HTML, CSS and Markdown. It supports many other languages too.

UI screenshot

Source: PourOverPotato

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
HTML / XML -
CSS -
JSON -
Markdown -

Lazily supported languages

Maintainers for these and additional 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

Code screenshots

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

HTML

Source: Brad Traversy's Modern Portfolio

CSS

Source: Brad Traversy's Modern Portfolio

JSON

Source: Brad Traversy's Modern Portfolio

Markdown

Source: TogglPotato

VS Code settings.json UI customization

Here are the settings.json UI settings I'm using, hopefully there may be something useful for you too.

{
  // General:
  "workbench.sideBar.location": "right",
  //
  //
  //
  // File Explorer:
  "explorer.compactFolders": false,
  "workbench.iconTheme": "vscode-icons",
  "workbench.tree.indent": 20,
  "workbench.tree.expandMode": "singleClick",
  "workbench.tree.enableStickyScroll": false,
  "explorer.autoReveal": "focusNoScroll",
  "vsicons.presets.hideExplorerArrows": true,
  "vsicons.presets.foldersAllDefaultIcon": true,
  //
  //
  //
  // Editor UI:
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorWidth": 3,
  "editor.cursorBlinking": "blink",
  "editor.renderWhitespace": "boundary",
  "editor.snippetSuggestions": "inline",
  "editor.minimap.enabled": false,
  "editor.renderControlCharacters": false,
  "editor.guides.indentation": true,
  "editor.guides.highlightActiveIndentation": "always",
  "editor.bracketPairColorization.enabled": false,
  "editor.codeLens": false,
  "editor.rulers": [
    120
  ],
  "editor.suggestSelection": "first",
  "files.trimTrailingWhitespace": true,
  "editor.stickyScroll.enabled": false,
  "editor.inlayHints.enabled": "offUnlessPressed",
  //
  // Font:
  "editor.fontFamily": "Fantasque Sans Mono",
  "editor.fontSize": 16,
  "editor.fontLigatures": true,
  //
  //
  //
  "files.associations": {
    ".stylelintrc": "json",
    ".stylelintignore": "ignore",
    ".eslintignore": "ignore",
    ".browserslistrc": "properties",
    ".prettierrc": "json",
    ".env": "dotenv",
    ".env.development": "dotenv",
    ".env.development.local": "dotenv",
    "*.yml": "yaml",
    ".prettierignore": "ignore"
  },
  //
  //
  //
  // Indentation guides settings, Guides extension:
  "guides.active.extraIndent": true,
  "guides.active.expandBrackets": false,
  "guides.active.enabled": true,
  "guides.enabled": true,
  "guides.indent.showFirstIndentGuides": true,
  "guides.limit.maximum": -1,
  "guides.normal.enabled": true,
  "guides.overrideDefault": false,
  "guides.stack.enabled": false,
  "guides.active.hideOnSelection": false,
  "guides.active.style": "solid",
  "guides.normal.hideOnSelection": false,
  "guides.active.color.light": "#00B000A0",
  "guides.active.width": 1,
  //
  //
  //
  // 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,
  //
  //
  //
  // Terminal window:
  "terminal.integrated.fontSize": 15,
  "terminal.integrated.fontFamily": "CaskaydiaCove NF",
  "terminal.integrated.cursorStyle": "line",
  "terminal.integrated.cursorWidth": 3,
  "terminal.integrated.cursorBlinking": true,
  "terminal.integrated.cursorStyleInactive": "outline",
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  //
  //
  //
  // Theme customizations:
  "workbench.colorCustomizations": {
    // hide the inactive indent lines:
    "editorIndentGuide.background1": "#FFFFFF",
    "editorIndentGuide.background2": "#FFFFFF",
    "editorIndentGuide.background3": "#FFFFFF",
    "editorIndentGuide.background4": "#FFFFFF",
    "editorIndentGuide.background5": "#FFFFFF",
    "editorIndentGuide.background6": "#FFFFFF",
    //
    // don't grey out the unused variables:
    "editorUnnecessaryCode.opacity": "#000000",
    //
    // Terminal customizations:
    "[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": "#00CC7E",
    },
  },
}

Azure Data Studio compatibility customization

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"
    }
  }
}

Development

Validation repos are listed here.

License

Top categories

Loading Svelte Themes