commit 41f95f23989ae10e2ede9aba93f02dacac27026c · nekomimi.pet/atproto-ui

+4 -2

README.md

···

       60
        
       --atproto-color-text-secondary

     

       61
        
       --atproto-color-border

     

       62
        
       --atproto-color-link

     

       63
       -
       /* ...and more */

     

       64
        
       ```

     

       65
        
       

     

       66
        
       ### Override Component Theme

     
···

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

     

       69
        
       

     

       70
        
       ```tsx

     

       0
        
       
     

       0
        
       
     

       71
        
       <div style={{

     

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

     

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

     

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

     

       75
       -
       }}>

     

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

     

       77
        
       </div>

     

       78
        
       ```

···

       60
        
       --atproto-color-text-secondary

     

       61
        
       --atproto-color-border

     

       62
        
       --atproto-color-link

     

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

     

       64
        
       ```

     

       65
        
       

     

       66
        
       ### Override Component Theme

     
···

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

     

       69
        
       

     

       70
        
       ```tsx

     

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

     

       72
       +
       

     

       73
        
       <div style={{

     

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

     

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

     

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

     

       77
       +
       } satisfies AtProtoStyles}>

     

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

     

       79
        
       </div>

     

       80
        
       ```

+1 -1

lib/components/BlueskyPost.tsx

···

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

     

       197
        
       		});

     

       198
        
       

     

       199
       -
       		const currentRecord = record || fetchedRecord;

     

       200
        
       

     

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

     

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

···

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

     

       197
        
       		});

     

       198
        
       

     

       199
       +
       		const currentRecord = record ?? fetchedRecord;

     

       200
        
       

     

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

     

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

+23

lib/theme-type.ts

···

       1
       +
       export type AtProtoStyles = React.CSSProperties & {

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

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

     

       23
       +
       };

+1 -1

package.json

···

       1
        
       {

     

       2
        
       	"name": "atproto-ui",

     

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

     

       4
        
       	"type": "module",

     

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

     

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

···

       1
        
       {

     

       2
        
       	"name": "atproto-ui",

     

       3
       +
       	"version": "0.5.4",

     

       4
        
       	"type": "module",

     

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

     

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