How can I set the background color of a code block to match the background color of the parent callout?

[NordeN]

How can I set the background color of a code block to match the background color of the parent callout?

I have custom callout (I created CSS snippet for it), what I see:

[holroy]

In some cases you can simple use: background-color: inherit to achieve that goal. Not sure if it works in your case, so I’ve also change the category of your request to be moved into the Custom CSS & Theme Design channel where the real experts are lurking.

[ariehen]

Of course you’ll need to adjust this depending on how your callout is written, but (for example) you can use this to change the code block background in callouts:

.callout[data-callout="chatbot"] {
    --callout-color: 180, 190, 254;
    --callout-icon: "lucide-bot";
    width: 450px;

    & .callout-content pre {
        background-color: lightyellow;
    }
}

and this should made it match the overall background of the callout:

.callout[data-callout="chatbot"] {
    --callout-color: 180, 190, 254;
    --callout-icon: "lucide-bot";
    width: 450px;

    & .callout-content pre {
        background-color: rgba(var(--callout-color), 0); /* or var(--callout-color); */
    }
}