<atshare-selector
url="https://yoursite.com/post"
text="Check this out:">
</atshare-selector>/* Dark theme */
atshare-selector {
--atshare-bg: #1c1c30;
--atshare-bg-hover: #242438;
--atshare-color: #E8E8EC;
--atshare-border: rgba(100, 223, 223, 0.14);
--atshare-accent: #64DFDF;
}/* Custom brand theme */
atshare-selector {
--atshare-accent: #a78bfa;
--atshare-accent-text: #1a0a2e;
--atshare-radius: 20px;
}CSS custom properties
All properties are scoped to the component's shadow DOM and can be set on any ancestor element.
| Property | Default | Description |
|---|---|---|
| --atshare-bg | #ffffff |
Button and popover background |
| --atshare-bg-hover | #f8fafc |
Row hover background |
| --atshare-color | #0f172a |
Primary text color |
| --atshare-border | #e2e8f0 |
Border and divider color |
| --atshare-accent | #64DFDF |
Accent color — orbit symbols, sign-in button, @ panel |
| --atshare-accent-text | #1A1A2E |
Text color on accent backgrounds |
| --atshare-radius | 10px |
Border radius for button and popover |
| --atshare-font-size | 14px |
Base font size |
| --atshare-orbit | 1 |
Set to 0 to disable the orbit animation |