How to change the color of const variables in VsCode

Question

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

Answer 1

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