[Bug] `delimiter.parenthesis` and `delimiter.bracket` values not applied

[mohamed-cherifi]

Reproducible in vscode.dev or in VS Code Desktop?

• [X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

• [ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

Playground link

Monaco Editor Playground Code

// Theme matching (i.e. applying a style to a token) happens in JavaScript.
// We must therefore register the theme rules in JavaScript.

// A custom theme must name its base theme (i.e. 'vs', 'vs-dark' or 'hc-black')
// It can then choose to inherit the rules from the base theme or not
// A rule token matching is prefix based: e.g.
//  - string will match a token with type: string, string.double.js or string.html
//  - string.double will match a token with type string.double but will not match string or string.html

// !!! Tokens can be inspected using F1 > Developer: Inspect Tokens !!!

monaco.editor.defineTheme("myCustomTheme", {
    base: "vs", // can also be vs-dark or hc-black
    inherit: true, // can also be false to completely replace the builtin rules
    rules: [
        {
            token: "comment",
            foreground: "ffa500",
            fontStyle: "italic underline",
        },
        { token: "comment.js", foreground: "008800", fontStyle: "bold" },
        { token: "comment.css", foreground: "0000ff" }, // will inherit fontStyle from `comment` above
        {
            token: 'delimiter.bracket',
            foreground: "202020",
            background: "202020",
        },
        {
            token: 'delimiter.parenthesis',
            foreground: "202020",
            background: "202020",
        },
    ],
    colors: {
        "editor.foreground": "#000000",
    },
});

monaco.editor.create(document.getElementById("container"), {
    value: getCode(),
    language: "javascript",
    theme: "myCustomTheme",
});

function getCode() {
    return (
        `// Imports
import mongoose, { Schema } from 'mongoose'

// Collection name
export const collection = 'Product'

// Schema
const schema = new Schema({
  name: {
    type: String,
    required: true
  },

  description: {
    type: String
  }
}, {timestamps: true})

// Model
export default mongoose.model(collection, schema, collection)`
    );
}

Reproduction Steps

Set delimiter.parenthesis and delimiter.bracket to whatever colour you want.

Actual (Problematic) Behavior

if you try to set a colour for delimiter.parenthesis and delimiter.bracket they don't seem to get applied.

Expected Behavior

delimiter.parenthesis and delimiter.bracket are set when applied.

Additional Context

I am using @monaco-editor/react v4.6.0 What's weird is when you inspect the token in the editor the foreground and background values are correct but the parenthesis and bracket colours arent correct.

[gmbeal]

Also experiencing this issue with nested curly braces and parenthesis. Inspected foreground color is correct but not applied. Top level delimiters are correct. Is there a Monaco setting that controls nested delimiters?

[jamesb93]

I am experiencing this as well. The foreground colour is there and correct, but is not being applied. Other colours are.

[gmbeal]

I am experiencing this as well. The foreground colour is there and correct, but is not being applied. Other colours are.

I was able to resolve this by setting the bracket matching option when I init my monaco editor. This is the rule I added:

"bracketPairColorization.enabled": false

Once I set this then my brackets matched the foreground color I set. Hope this works for you!

[jamesb93]

Going to try this, thank you!

[jamesb93]

Unfortunately didn't work for me.

    editor = monaco.editor.create(document.getElementById("editor"), {
        value: ["function gotothis() {}"].join("\n"),
        language: "javascript",
        minimap: {
            enabled: false
        },
        theme: 'max',
        bracketPairColorization: {
            enabled: false
        }
    });

Is this how you are initialising it, roughly speaking?