⚠️ Important

Prism Callouts are customised slightly differently to how you would normally do so in vanilla Obsidian.

Due to it being requested, you can now use Prism Callouts as a CSS snippet and have them work in other themes.

Note that Style Settings Plugin is required for the snippet. It allows for the .prism-callout class to be added when the snippet is enabled, serving as an identifier when you create customisations to only apply when the snippet is on.

If you do use the snippet, you can keep it on at all times when switching to and from Prism. If you are using Prism and the Prism Callouts snippet is on, it will simply ignore it since the same code is also found in the theme.

I would advise you do the following customisations in their own CSS Snippet.

🗒️ CSS Snippet Example

Use this template when using the Prism theme only:

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="note"] > .callout-title {
    color: var(--color-grey-text);
    background-color: var(--color-grey-base);
    border-color: var(--color-grey-tint);
}

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

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

Use this template when using the Prism Callout Snippet:

.prism-callout .callout[data-callout="note"] > .callout-title {
    color: var(--color-grey-text);
    background-color: var(--color-grey-base);
    border-color: var(--color-grey-tint);
}

.prism-callout .callout[data-callout="note"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-grey-text);
}

.prism-callout .callout[data-callout="note"] > .callout-content {
    background-color: hsla(var(--color-grey-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-grey-tint);
}

You can also add .theme-light or .theme-dark at the very start (no spaces; just right against .prism-theme/.prism-callout if you want to customise light and dark themes separately.

🎨 Available Preset Colour Options

Each variable var() used has the following colour options:

• red
• orange
• yellow
• green
• mint
• cyan
• blue
• purple
• pink
• grey

e.g. You can change this variable var(--color-grey-tint) to var(--color-red-tint). Note that the colour names need to be all lower case!

The benefit of using the preset colours is that they all adapt to the different colour schemes available and will always look right!

If you still want to customise the colours further, you can use your own colours! Simply replace the var() with any currently supported CSS Colour model (e.g. RGB, RGBA, HSL, HSLA, HEX, etc).

🎯 Targeting the Callout to Customise

You can target any of the official Callout options:

• note (Uses Grey by default)
• abstract, summary, tldr (Use Cyan by default)
• info, todo (Use Blue by default)
• tip, hint, important (Use Mint by default)
• success, check, done (Use Green by default)
• question, help, faq (Use Yellow by default)
• warning, caution, attention (Use Orange by default)
• failure, fail, missing (Use Red by default)
• danger, error (Use Red by default)
• bug (Uses Pink by default)
• example (Uses Purple by default)
• quote, cite (Uses Grey by default)

Or you can create your own!

To target one of the options above or your custom one, change the .callout[data-callout="note"] section in the CSS Snippet Example above to another callout type. e.g. .callout[data-callout="important"] or .callout[data-callout="bug"].

💫 Changing the Callout Icon

In order to customise the icon used by the callout, you can use the following snippet with the icon name of your choice. The list of available icons can be found here: https://lucide.dev/

Simply replace flower with the name displayed under the icon you want to use.

.callout[data-callout="note"] {
    --callout-icon: flower;
}

Note that you will have to reopen the file to see the icon update!

📄 Custom Callout Example

Here is an example of how to style a custom callout called nature. Add the following into a CSS Snippet and enable it.

Use this template when using the Prism theme only:

.prism-theme:not(.pt-disable-callout-styling) .callout[data-callout="nature"] > .callout-title {
    color: var(--color-green-text);
    background-color: var(--color-green-base);
    border-color: var(--color-green-tint);
}

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

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

.callout[data-callout="nature"] {
    --callout-icon: trees;
    --callout-color: 0, 255, 0; /* Default colour customisation option used by Obsidian for Callouts. Comma separated RGB values is the format used. Keep this as a fallback when switching to another theme. */
}

Use this template when using the Prism Callout Snippet:

.prism-callout .callout[data-callout="nature"] > .callout-title {
    color: var(--color-green-text);
    background-color: var(--color-green-base);
    border-color: var(--color-green-tint);
}

.prism-callout .callout[data-callout="nature"] > .callout-title .callout-icon .svg-icon {
    color: var(--color-green-text);
}

.prism-callout .callout[data-callout="nature"] > .callout-content {
    background-color: hsla(var(--color-green-base-hsl), var(--callout-background-alpha));
    border-color: var(--color-green-tint);
}

.callout[data-callout="nature"] {
    --callout-icon: trees;
    --callout-color: 0, 255, 0; /* Default colour customisation option used by Obsidian for Callouts. Comma separated RGB values is the format used. Keep this as a fallback when switching to another theme and have the Prism Callout CSS snippet disabled. */
}

Use the following Markdown to initiate the custom callout:

> [!nature]-
> This is a custom callout

This should be the result: