Callout doesn´t render colors darker/lighter than theme background

What I’m trying to do

So it’s a very minor issue but I want the body of callouts to be darker than the base color used as the background on the note. It works fine in source/edit mode, but on reading mode I just can’t get it to work. The same happens with photos too.

Things I have tried

I tried applying the snippet on multiple themes and on multiple devices. I even tried using another snippet to override the bg color of the note, but no change. I looked through the forum and didn’t find any topic about this either. Here’s the code i’m using

.theme-dark .callout > .callout-content {
  background-color: #000000 !important;

here’s the result on the prism theme, edit mode vs. reading mode

It works fine with any color lighter than the base color, but not darker colors. I wanted to know if there’s something wrong with my code or just an issue of the program itself. thanks!

Hi @nightriderlily,
Prism has a specific way of customising callouts outlined in the wiki here:

As for your specific use case, the following snippet should do what you want in Prism:

.theme-dark.prism-theme:not(.pt-disable-callout-styling) .callout > .callout-content {
    background-color: #000000;

hi, thanks for the reply. unfortunately it doesn’t seem to work either :confused: it’s the same as the previous code, works only with lighter colors than the background. i also tried it adding “!important” but nothing. here’s what i mean


Try changing the --callout-blend-mode variable. Maybe something like:

body {
--callout-blend-mode: normal !important;


body {
--callout-blend-mode: darken !important;
1 Like

this solved it, thank you so much !!

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.