notion-like callouts for bear blog

Here's a CSS snippet that adds nine different Notion-like callout styles to Bear: grey, brown, orange, yellow, green, blue, purple, pink, and red. It also handles light and dark modes automatically. Ignore the @media queries for light and dark color schemes if your Bear theme does not use the prefers-color-scheme media feature. Instead, directly apply a variant that matches your current theme.

1. Snippet

/* notion-like callouts */
 .callout {
     font-size:95%;
     border-radius: 3px;
     padding: 16px;
}
 @media (prefers-color-scheme: light) {
     .grey_callout {
         background: rgb(241, 241, 239);
    }
     .brown_callout {
         background: rgb(244, 238, 238);
    }
     .orange_callout {
         background: rgb(251, 236, 221);
    }
     .yellow_callout {
         background: rgb(251, 243, 219);
    }
     .green_callout {
         background: rgb(237, 243, 236);
    }
     .blue_callout {
         background: rgb(231, 243, 248);
    }
     .purple_callout {
         background: rgba(244, 240, 247, 0.8);
    }
     .pink_callout {
         background: rgba(249, 238, 243, 0.8);
    }
     .red_callout {
         background: rgb(253, 235, 236);
    }
}
 @media (prefers-color-scheme: dark) {
     .callout {
         color: white;
    }
     .grey_callout {
         background: rgba(124,139,154,.13);
    }
     .brown_callout {
         background: rgb(55, 34, 13);
    }
     .orange_callout {
         background: rgb(71, 45, 1);
    }
     .yellow_callout {
         background: rgba(240,165,15,.13);
    }
     .green_callout {
         background: rgba(52,183,67,.12);
    }
     .blue_callout {
         background: rgba(33,172,232,.12);
    }
     .purple_callout {
         background: rgba(135,85,236,.12);
    }
     .pink_callout {
         background: rgba(225,71,174,.11);
    }
     .red_callout {
         background: rgba(209,46,46,.11);
    }
}

2. Usage

<p class="callout grey_callout">
The quick grey fox jumps over the lazy dog
</p>

Replace grey_callout with the color of your choice.

3. Examples

The quick grey fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick orange fox jumps over the lazy dog

The quick yellow fox jumps over the lazy dog

The quick green fox jumps over the lazy dog

The quick blue fox jumps over the lazy dog

The quick purple fox jumps over the lazy dog

The quick pink fox jumps over the lazy dog

The quick red fox jumps over the lazy dog