I tried to change the color scheme of vscode using setting.json file but unable find a way to change the syntax color of the constant variable.
what i got
what i wanted
I tried many things but variables name for const is still blue
Hears what i had tried
"editor.tokenColorCustomizations": {
"textMateRules": [
{
// Targeting general variables and constants
"scope": [
"variable.other.local.js", // JavaScript local variables
"variable.other.local.ts", // TypeScript local variables
"variable.other.local.go", // Go local variables
"variable.other.local.rust", // Rust local variables
"variable.other.js", // General JavaScript variables
"variable.other.ts", // General TypeScript variables
"variable.other.go", // General Go variables
"variable.other.rust" // General Rust variables
],
"settings": {
"foreground": "#E5C07B" // Yellow/gold color for variables
}
},
{
// Targeting specific variable types (const, let, var) keywords
"scope": [
"storage.type.js", // JavaScript variable declaration keywords
"storage.type.ts", // TypeScript variable declaration keywords
"storage.type.go", // Go variable declaration keywords
"storage.type.rust" // Rust variable declaration keywords
],
"settings": {
"foreground": "#C678DD" // Purple color for keywords
}
}
]
}
Another
"tokenColors": [
{
"name": "Template String",
"scope": [
"string.template"
],
"settings": {
"foreground": "#98C379"
}
}
]
my settings.json for my current vsCode scheme
// Theme and Fonts
"workbench.colorTheme": "Default Dark+", // You can start with a base dark theme
"editor.fontLigatures": true, // Enable ligatures for nice symbol connections
"editor.lineHeight": 22, // Ensures proper line spacing
// Editor Customizations
"editor.cursorStyle": "line",
"editor.cursorBlinking": "blink",
"editor.renderWhitespace": "none", // Clean look with no visible whitespace marks
"editor.smoothScrolling": true, // Smooth scrolling effect
// Custom Colors (based on image appearance)
"workbench.colorCustomizations": {
"editor.background": "#1e222a", // Dark background
"editor.foreground": "#ABB2BF", // Light foreground text
"editorCursor.foreground": "#E5C07B", // Blue cursor
"editorIndentGuide.activeBackground1": "#385977", // Indentation guide lines
"sideBar.background": "#1b1f27", // Sidebar background
"sideBar.foreground": "#ABB2BF", // Sidebar text color
"activityBar.background": "#1e222a", // Activity bar background
"tab.activeBackground": "#1e222a", // Active tab background
"tab.inactiveBackground": "#252931", // Inactive tab background
"statusBar.background": "#282C34", // Status bar background
"terminal.background": "#1E222A", // Terminal background color
"terminal.foreground": "#ABB2BF", // Terminal text color
"editorBracketMatch.border": "#61AFEF", // Bracket match highlight
"editorLineNumber.activeForeground": "#61AFEF",
"editor.selectionBackground": "#3E4451", // Selection background color
"editor.lineHighlightBackground": "#61afef00" // Current line highlight
},
// Syntax Highlighting
"editor.tokenColorCustomizations": {
"comments": "#5C6370", // Comment color
"functions": "#61AFEF", // Functions color (blueish)
"keywords": "#C678DD", // Keywords color (purple)
"strings": "#98C379", // Strings color (green)
"variables": "#E5C07B", // Variables color (gold/yellow)
"types": "#E06C75",
"textMateRules": [
{
"scope": "keyword.function.go", // This targets Go function keywords like `func`
"settings": {
"foreground": "#C678DD" // Replace with any color you prefer (Hex or named colors)
}
}
]
},
"window.density.editorTabHeight": "compact",
If you run editor.action.inspectTMScopes
.
You'll see that the semantic highlighting is overriding the TextMate highlighting.
So you'll need to modify
"editor.semanticTokenColorCustomizations": {
"enabled": true,
"rules": {
"variable.readonly": {
"foreground": "#e5c07be1"
},
"variable.defaultLibrary": {
"foreground": "#cf6160" // Set your desired color here
}
}
}
instead.
https://code.visualstudio.com/api/language-extensions/semantic-highlight-guide