Custom Callout

Instructions are given for the Prism theme and the default theme. Prism Callouts are customised slightly differently to how you would normally do so in vanilla Obsidian.

Default theme

Prism theme

Note these won't look right when viewed in the Prism theme.

To define a custom callout for Obsidian, create the following CSS block:

.callout[data-callout="custom-question-type"] {
  --callout-color: 0, 0, 0;
  --callout-icon: lucide-alert-circle;
}
.callout[data-callout="target"] {
  --callout-color: 153, 27, 27;
  --callout-icon: lucide-target;
}

Icons from Lucide can be referenced by prefixing with lucide-. You can also use inline SVG. Given a source of this:

> [!custom-question-type] Aim
> To show a custom callout

> [!target] Goal
> To create custom callouts like this

They render like this:

Aim

To show a custom callout

Goal

To create custom callouts like this

See also Callouts (Obsidian docs). Analogous to Asciidoc block type creation.

Prism theme

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.

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.

Preset color 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 customize

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!

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:

Custom Nature Callout Screenshot