Skip to content
Bsky Profile

Customization

The component uses the following CSS variables to allow for easy customization:

:host {
  --bsky-color: #0072fe;
  --bsky-text-color: #000000;
  --bsky-muted-text-color: #42576c;
  --bsky-loading-color: #f0f3f5;
  --bsky-font-size: 1rem;
  --bsky-line-height: 1.5rem;
  --bsky-font-family: Arial, Helvetica, -apple-system, sans-serif;
  --bsky-profile-width: 20rem;
  --bsky-profile-background-color: #ffffff;
  --bsky-profile-border-radius: 0.75rem;
  --bsky-profile-box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1),
    0 1px 2px -1px rgb(0 0 0 / 0.1);
  --bsky-banner-width: 20rem;
  --bsky-banner-height: 6.5rem;
  --bsky-banner-background-color: #f0f3f5;
  --bsky-left-padding: 0.75rem;
  --bsky-right-padding: 0.75rem;
  --bsky-top-padding: 0.5rem;
  --bsky-bottom-padding: 0.5rem;
  --bsky-avatar-width: 4.5rem;
  --bsky-avatar-height: 4.5rem;
  --bsky-follow-color: #ffffff;
  --bsky-follow-padding: 0.5rem 0.75rem;
  --bsky-follow-border-radius: 10rem;
  --bsky-follow-font-size: 1rem;
  --bsky-follow-line-height: 1.5rem;
  --bsky-display-name-font-size: 1.5rem;
  --bsky-handle-font-size: 1rem;
  --bsky-stats-font-size: 1rem;
  --bsky-logo-width: 1.5rem;
  --bsky-logo-height: 1.5rem;
}


:host([data-theme="dark"]) {
  --bsky-text-color: #f1f3f5;
  --bsky-muted-text-color: #8c9eb2;
  --bsky-loading-color: #111b23;
  --bsky-profile-background-color: #000000;
  --bsky-banner-background-color: #111b23;
}


@media (prefers-color-scheme: dark) {
  :host([data-theme="auto"]) {
    --bsky-text-color: #f1f3f5;
    --bsky-muted-text-color: #8c9eb2;
    --bsky-loading-color: #111b23;
    --bsky-profile-background-color: #000000;
    --bsky-banner-background-color: #111b23;
  }
}

You can override these variables in your own CSS to customize the appearance of the component.

For example in your global css styles you can extend style with the following:

bsky-profile {
  --bsky-font-family: "Soege UI", sans-serif;
  --bsky-profile-width: 25rem;
  --bsky-banner-width: 25rem;
  --bsky-profile-background-color: #000000;
  --bsky-profile-border-radius: 1rem;
}


/* When its in dark theme */
bsky-profile[data-theme="dark"] {
  --bsky-profile-background-color: #000000;
  --bsky-banner-background-color: #111b23;
}

Customization with Style Attribute

You can also customize the component by using the style attribute. Which will only apply modify styles to that instance of the component.

<bsky-profile
  data-handle="danabra.mov"
  style="--bsky-font-family: 'Soege UI', sans-serif; --bsky-profile-width: 25rem; --bsky-banner-width: 25rem; --bsky-profile-background-color: #000000; --bsky-profile-border-radius: 1rem;"
></bsky-profile>