Custom CSS Snippet for Callouts in Dark and Light Themes

Devs: Theme Design & Custom CSS
,
1

Hello everyone,

I created a CSS snippet for some custom Callouts that look like this:

.callout[data-callout="zotero-red"] {
--callout-color: #AF3029;
--callout-icon: lucide-pen-line;
}

.theme-dark .callout[data-callout="zotero-red"] {
--callout-color: #D14D41;
}

I think it could be simplified, but I don’t really know how. I tried this:

.callout[data-callout="zotero-red"] {
--callout-color-theme-dark: #AF3029;
--callout-color-theme-light: #AF3029;
--callout-icon: lucide-pen-line;
}

However, it doesn’t work.

Could someone help me? I would really appreciate it.

2

Here’s one method somewhat suitable if you want each zotero-color callout to have a different icon. It also makes it easy to change the colors on occasion. The three commented lines are where you would continue the pattern:

.theme-light {
	--zotero-red: #AF3029;
	--zotero-yellow: goldenrod;
	--zotero-green: seagreen;
	/* ... */
}

.theme-dark {
	--zotero-red: #D14D41;
	--zotero-yellow: gold;
	--zotero-green: springgreen;
	/* ... */
}

.callout[data-callout="zotero-red"] {
	--callout-color: var(--zotero-red);
	--callout-icon: lucide-pen-line;
}

.callout[data-callout="zotero-yellow"] {
	--callout-color: var(--zotero-yellow);
	--callout-icon: lucide-highlighter;
}

/* ... */

If you’re interested in wider color flexibility, consider setting the color in the callout metadata (the text after the pipe character |) instead of in the callout name. That way, you can do not only:

> [!zotero | yellow]

but also:

> [!info | yellow]

> [!summary | yellow]

> [!whatever | yellow]

The CSS for that is subjectively cleaner:

.theme-light {
	--my-callout-red: #AF3029;
	--my-callout-yellow: goldenrod;
	--my-callout-green: seagreen;
}

.theme-dark {
	--my-callout-red: #D14D41;
	--my-callout-yellow: gold;
	--my-callout-green: springgreen;
}

.callout[data-callout-metadata~="red"] { --callout-color: var(--my-callout-red); }
.callout[data-callout-metadata~="yellow"] { --callout-color: var(--my-callout-yellow); }
.callout[data-callout-metadata~="green"] { --callout-color: var(--my-callout-green); }

.callout[data-callout^="zotero"] {
	--callout-icon: lucide-pen-line;
}