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