Bluesky: custom accent color instead of blue
Swaps the signature blue for the color set in --jz-bsk-accent so links, buttons and icons match your taste.
Code to copy
/* Replace the default Bluesky blue accent with a custom color */
:root { --jz-bsk-accent: #b14fdb; }
a[role="link"][href^="/profile/"],
a[href^="/profile/"]:not([data-testid="composeButton"]),
[data-testid="postsFeedItem"] a[href*="bsky.app"],
button[aria-label*="Follow" i],
[data-testid="composeButton"] {
color: var(--jz-bsk-accent) !important;
}
[data-testid="composeButton"] {
background-color: var(--jz-bsk-accent) !important;
color: #fff !important;
}
button[aria-pressed="true"] svg[fill="#0085ff"],
svg[fill="#0085ff"], svg[fill="#0070ff"] {
fill: var(--jz-bsk-accent) !important;
}How to use this example
- Copy the code with the button above.
- Install JustZix (2 minutes) and open the extension on the target page.
- Add a new rule matching that page.
- Paste the code into the rule's CSS panel and save — the effect appears instantly.
Rate this example
No ratings yet — be the first.