Cant change color of custom callout

[iraedeus]

I have my own callout with such a css:
.callout[data-callout=“define”] {
background-color: rgb(255, 255, 255);
}
.callout[data-callout=“define”] .callout-icon {
display: none;
}

i want to change color, but i cant if color is rgb(33, 33, 33)
but if i write white color it changes, why?
how can I change the color to a darker one? (rgb(40, 40, 40) is the default)
I use the Material Gruvbox color scheme

[ariehen]

Just to be clear, are you looking to change the background-color or the text color in the callout?

A bit hard to see the content text in light mode, but the below is working for me.

.callout[data-callout="define"] {
    background-color: rgb(40, 40, 40);
}
.callout[data-callout="define"] .callout-icon {
    display: none;
}

[iraedeus]

@ariehen

Just to be clear, are you looking to change the background-color or the text color in the callout?

i want to change background color.
this is result with css:

.callout[data-callout="define"] {
  background-color: rgb(0, 0, 0);
}
.callout[data-callout="define"] .callout-icon {
  display: none;
}

and its not black

If i change css to it:

.callout[data-callout="define"] {
  background-color: rgb(255, 255, 255);
}
.callout[data-callout="define"] .callout-icon {
  display: none;
}

the result is:

[iraedeus]

As far as I understand, I cannot change the color to a darker than the background on this background. If I switch to a light theme, then of course it will work.

[ariehen]

Huh, yeah. Not sure. Do you have any other snippets at play?

I’m using a less-than-great monitor at the moment, but I’m seeing black using this snippet and the Gruvbox Material in dark mode. You could try adding the callout-blend-mode to see if it helps.

.callout[data-callout="define"] {
    background-color: rgb(0, 0, 0);
    --callout-blend-mode: normal;
}

Also, for a test, I added this to color the active line:

.cm-active {
    background-color: rgb(0, 0, 0) !important;
}

[iraedeus]

It works! thank you very much