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.
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 | - |
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 |
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",
},
},
}
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"
}
}
}
Validation repos are listed here.