···

       
60
       
60
       
 
       
--atproto-color-text-secondary

     

       
61
       
61
       
 
       
--atproto-color-border

     

       
62
       
62
       
 
       
--atproto-color-link

     

       
63
       
63
       
-
       
/* ...and more */

     

       
63
       
63
       
+
       
/* ...and more, check out lib/styles.css */

     

       
64
       
64
       
 
       
```

     

       
65
       
65
       
 
       


     

       
66
       
66
       
 
       
### Override Component Theme

     
···

       
68
       
68
       
 
       
Wrap any component in a div with custom CSS variables to override its appearance:

     

       
69
       
69
       
 
       


     

       
70
       
70
       
 
       
```tsx

     

       
71
       
71
       
+
       
import { AtProtoStyles } from "atproto-ui";

     

       
72
       
72
       
+
       


     

       
71
       
73
       
 
       
<div style={{

     

       
72
       
74
       
 
       
  '--atproto-color-bg': '#f0f0f0',

     

       
73
       
75
       
 
       
  '--atproto-color-text': '#000',

     

       
74
       
76
       
 
       
  '--atproto-color-link': '#0066cc',

     

       
75
       
75
       
-
       
}}>

     

       
77
       
77
       
+
       
} satisfies AtProtoStyles}>

     

       
76
       
78
       
 
       
  <BlueskyPost did="..." rkey="..." />

     

       
77
       
79
       
 
       
</div>

     

       
78
       
80
       
 
       
```

     

···

       
196
       
196
       
 
       
			rkey: showParent && !record ? rkey : "",

     

       
197
       
197
       
 
       
		});

     

       
198
       
198
       
 
       


     

       
199
       
199
       
-
       
		const currentRecord = record || fetchedRecord;

     

       
199
       
199
       
+
       
		const currentRecord = record ?? fetchedRecord;

     

       
200
       
200
       
 
       


     

       
201
       
201
       
 
       
		const parentUri = currentRecord?.reply?.parent?.uri;

     

       
202
       
202
       
 
       
		const parsedParentUri = parentUri ? parseAtUri(parentUri) : null;

     

···

       
1
       
1
       
+
       
export type AtProtoStyles = React.CSSProperties & {

     

       
2
       
2
       
+
       
  '--atproto-color-bg'?: string;

     

       
3
       
3
       
+
       
  '--atproto-color-bg-elevated'?: string;

     

       
4
       
4
       
+
       
  '--atproto-color-bg-secondary'?: string;

     

       
5
       
5
       
+
       
  '--atproto-color-text'?: string;

     

       
6
       
6
       
+
       
  '--atproto-color-text-secondary'?: string;

     

       
7
       
7
       
+
       
  '--atproto-color-text-muted'?: string;

     

       
8
       
8
       
+
       
  '--atproto-color-border'?: string;

     

       
9
       
9
       
+
       
  '--atproto-color-border-subtle'?: string;

     

       
10
       
10
       
+
       
  '--atproto-color-link'?: string;

     

       
11
       
11
       
+
       
  '--atproto-color-link-hover'?: string;

     

       
12
       
12
       
+
       
  '--atproto-color-error'?: string;

     

       
13
       
13
       
+
       
  '--atproto-color-button-bg'?: string;

     

       
14
       
14
       
+
       
  '--atproto-color-button-hover'?: string;

     

       
15
       
15
       
+
       
  '--atproto-color-button-text'?: string;

     

       
16
       
16
       
+
       
  '--atproto-color-code-bg'?: string;

     

       
17
       
17
       
+
       
  '--atproto-color-code-border'?: string;

     

       
18
       
18
       
+
       
  '--atproto-color-blockquote-border'?: string;

     

       
19
       
19
       
+
       
  '--atproto-color-blockquote-bg'?: string;

     

       
20
       
20
       
+
       
  '--atproto-color-hr'?: string;

     

       
21
       
21
       
+
       
  '--atproto-color-image-bg'?: string;

     

       
22
       
22
       
+
       
  '--atproto-color-highlight'?: string;

     

       
23
       
23
       
+
       
};

     

···

       
1
       
1
       
 
       
{

     

       
2
       
2
       
 
       
	"name": "atproto-ui",

     

       
3
       
3
       
-
       
	"version": "0.5.3-1",

     

       
3
       
3
       
+
       
	"version": "0.5.4",

     

       
4
       
4
       
 
       
	"type": "module",

     

       
5
       
5
       
 
       
	"description": "React components and hooks for rendering AT Protocol records.",

     

       
6
       
6
       
 
       
	"main": "./lib-dist/index.js",