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**
```css
/* 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**
```html
The quick grey fox jumps over the lazy dog
```
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