Add Bluesky replies, quotes, and reposts to any web page. Handy for adding a comments section anywhere.
Add dark mode examples to README
Shows the built-in .dark class convention and how to use
prefers-color-scheme for sites with different dark mode patterns.
+29
-1
+29
-1
README.md
+29
-1
README.md
···
87
87
| `--bsky-link-underline` | `rgba(82,82,91,0.5)` | `rgba(59,130,246,0.3)` | Link underline color |
88
88
| `--bsky-link-underline-hover` | `rgba(59,130,246,0.3)` | `rgba(59,130,246,0.3)` | Link underline hover color |
89
89
90
+
Override example:
91
+
90
92
```css
91
93
bsky-conversation {
92
94
--bsky-link-color: #333;
···
94
96
}
95
97
```
96
98
97
-
Dark mode activates when a parent element has the `dark` class.
99
+
### Dark mode
100
+
101
+
The component ships with a built-in dark palette that activates when any ancestor has the `dark` class. This works with common dark mode patterns:
102
+
103
+
```html
104
+
<!-- Toggle dark class on <html> or <body> -->
105
+
<html class="dark">
106
+
<body>
107
+
<bsky-conversation uri="..."></bsky-conversation>
108
+
</body>
109
+
</html>
110
+
```
111
+
112
+
If your site uses a different convention (e.g., `data-theme="dark"` or `prefers-color-scheme`), you can set the properties yourself:
113
+
114
+
```css
115
+
@media (prefers-color-scheme: dark) {
116
+
bsky-conversation {
117
+
--bsky-border-color: #374151;
118
+
--bsky-muted-color: #9ca3af;
119
+
--bsky-link-color: #60a5fa;
120
+
--bsky-link-underline: rgba(59, 130, 246, 0.3);
121
+
--bsky-link-hover: #3b82f6;
122
+
--bsky-link-underline-hover: rgba(59, 130, 246, 0.3);
123
+
}
124
+
}
125
+
```
98
126
99
127
## Behavior
100
128