Prism v3.5.1-v3.5.3 | Custom (Snippet) Callout Content Override by the Theme

[Rivol0gY]

Describe the bug I defined my own callouts by using lucide icons plus a color scheme applied on it based on the Prism colors. It works perfectly with Prism v3.5.1:

And now with Prism v3.5.3, I got darker colors for the callout-title's border-color plus the callout-content's border-color and border-width that are reset to default (black and 1px):

To Reproduce Here is an example for the red color of the snippet that supersedes the theme:

/* Couleur rouge */
.prism-theme .callout:is([data-callout-metadata^="rouge"]) > .callout-title {
    color: var(--color-red-text);
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
}

.prism-theme .callout:is([data-callout-metadata^="rouge"]) > .callout-title .callout-icon .svg-icon {
    color: var(--color-red-text);
}

.prism-theme .callout:is([data-callout-metadata^="rouge"]) > .callout-content {
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
    border-width: 2px; /* bordure de la même épaisseur que le titre du callout */
}
/* ------------- */

When creating a callout, I have > [!pouce_bas|rouge]+ Ce que je n'ai pas aimé for the above screenshot.

Expected behavior As before with Prism v3.5.1. Thanks a lot Damian!

Screenshots See Describe the bug section

Setup Information

• Device Type: PC
• Operating System: Windows 11
• Prism version: v3.5.3
• Color Schemes Used: Latte / Mocha
• Obsidian Version: v1.6.5
• Obsidian Installer Version: v1.5.12

[damiankorcz]

Hi @Rivol0gY, It appers that you are missing some of the specificity required for the snippet to work as well as targeting the wrong attribute for the callout type.

Here is how you should be doing it:

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-title {
    color: var(--color-red-text);
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-red-text);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-content {
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
    border-width: 2px;
}

I do try and keep the wiki page on Callout customisation up to date so if you have any other issues with it in the future take a look there to see if the setup changed.

P.S. I've personally have been careful with using :is in my snippet and Prism since I've had it do unpredictable things when it comes to specificity. Something to keep in mind.

[Rivol0gY]

Hi Damian,

Thanks for the quick feedback.

I dit a try and it doesn't work because I defined the icon "separated" from the color.

For example with the thumb down, I have:

.callout[data-callout="pouce_bas"] {
    --callout-color: 128, 128, 128;
    --callout-icon: lucide-thumbs-down;
}

And then I combine, for example:

> [!pouce_bas|rouge]+ We don't care...

So with your correction, I have now:

BUT, if I keep only:

> [!rouge]+ We don't care...

I have the correct colors (w/o the correct icon of course, I'm presuming that the pencil is the default callout icon):

Any clue for merging both icon type plus color? (because I'm choosing the color depending on the context) I'm presuming that I need also to change the icon part in the CSS snippet but... I do not know how...

[damiankorcz]

Hi @Rivol0gY, Ah! I haven't seen it used like this before. In that case you were correct with using the data-callout-metadata for it to identify correctly. I guess for it to work correctly with a specified icon the way you had the following would work:

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout-metadata="rouge"] > .callout-title {
    color: var(--color-red-text);
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout-metadata="rouge"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-red-text);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout-metadata="rouge"] > .callout-content {
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
    border-width: 2px;
}

.callout[data-callout="pouce_bas"] {
    --callout-color: 128, 128, 128;
    --callout-icon: lucide-thumbs-down;
}

But to also have it work when you don't define a custom icon, I think it would make more sense to switch the order when you define the callouts and the CSS logic. That way it would work regardless if it has the icon or not:

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-title {
    color: var(--color-red-text);
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-red-text);
}

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="rouge"] > .callout-content {
    background-color: hsla(var(--color-red-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-red-tint);
    border-width: 2px;
}

.callout[data-callout-metadata="pouce_bas"] {
    --callout-color: 128, 128, 128;
    --callout-icon: lucide-thumbs-down;
}

You'd make the callout like this:

> [!rouge|pouce_bas]+ We don't care...
> test

[Rivol0gY]

It works perfeclty. Thank you very much for your clarifications and your help!