Change font color in callouts

[Ejx]

Hi I’m trying to change the default font color and background inside callouts, I have created a CSS snipet to customize my callouts and would like to have a custom font color and background inside.

I can’t seem to find any info on this.

thanks!

[Hermann]

.callout-content {
    font-family: "Avenir", "Avenir Lt Std", "Palatino" !important;
    font-size: 0.9em !important;
    padding: 3px 15px !important;
}

.callout-title {
    font-family: "Avenir", "Avenir Lt Std", "Palatino" !important;
    font-size: 0.9em !important;

}

[Hermann]

This snippet changes the font in “Avenir” OR “Avenir Lt Std” OR what you want.

[Ejx]

Thank Hermann, I’m guessing that I could also use that for color, but question where do I specify which calout has which color and font?

[ladyMonolid]

You could try the syntax here to target specific callouts: Use callouts - Obsidian Help

Including the snippet in case the section jump doesn’t work:

.callout[data-callout="my-callout-type"] {
    --callout-color: 0, 0, 0;
    --callout-icon: icon-id;
    --callout-icon: '<svg>...custom svg...</svg>';
}

[ariehen]

As far as I can tell, you have two options: create a custom callout as described above or define a label and add it to any existing callout. Here’s the label method (works in the default and Minimal themes):

The callout is written as:

>[!example|purple.red] Title
>Content 

and the css is:

.callout:is([data-callout-metadata^="purple.red"]) {
    color: #ff0000; /*-content font color - needs to be HEX-*/
    --callout-color: 128, 0, 128; /*-overall callout color - needs to be RGB-*/
    --callout-icon: lucide-beer; /*-callout icon-*/
} 

[Ejx]

this worked, I found out my theme had a background, so I included that background for dark theme, and then no background (same color as callout) for light theme.

thanks!

for future reference, since I liked the dark background in dark theme but not a white background in light theme, but in light theme wanted to keep the callout color as background I added the following at the begining of the snippet before the specific callout css

.theme-light .callout-content {
background: none;
}

.theme-dark .callout-content {
background: var(–background-primary-alt);
}

then my custom callouts, example:

.callout[data-callout=tip] {
color: #d19a00;
–callout-color: 209, 154, 0;
–callout-icon: lucide-zap;

}