RespectMyEyes theme for VS Code
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!
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