Various opinionated style changes to Bluesky, making it feel more like Twitter without impeding too much on its branding. All toggleable.
Bluesky, but kinda like Twitter by o_o
Details
Authoro_o
LicenseNo License
Categorybsky
Created
Updated
Size6.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Options
- Allow changing colors - If disabled, this userstyle won't change any colors in the UI. Note that this is from a visual standpoint, so you may still have to change theme compatibility settings if you have a custom theme installed.
- Style posts
- Matches padding, profile picture size, and font size to Twitter. This effectively makes it more compact.
- Prevents the date from overflowing, instead cutting off the handle
- Style name on profile - makes the name on a profile page smaller and bolded. This matches Twitter.
- Style compose button - removes the gradient and makes the button the same size as Twitter's.
- Style back to top button - makes the back to top button aligned and consistent with the compose button.
- Style snackbar - aka toasts, notifications. It's the thing that appears when you follow someone.
- The snackbar is moved above the navigation bar and centered on mobile
- Padding is changed
- Makes it blue instead of a translucent black
- Style mobile navigation - makes the mobile navigation the same size as Twitter.
- Style tabs - more closely matches the profile tabs to Twitter in proportions.
Theme compatibility
These have to do with having this userstyle work well with other userstyles that theme Bluesky. These options alone do not theme Bluesky.
If you only have this userstyle installed, you can safely leave these options as the default.
Source code
/* ==UserStyle==
@name Bluesky, but kinda like Twitter
@namespace dabric.xyz/post/bluesky-kinda-like-twitter
@version 1.1.2
@description Various opinionated style changes to Bluesky, making it feel more like Twitter. All toggleable
@author dabric
@preprocessor stylus
@var checkbox change-theme "Allow changing colors" 1
@var checkbox style-post-avatar "Style posts" 1
@var checkbox style-profile-username "Style name on profile" 1
@var checkbox style-new-post "Style compose button" 1
@var checkbox style-back-to-top "Style back to top button" 1
@var checkbox style-snackbar "Style snackbar" 1
@var checkbox style-nav "Style mobile navigation" 1
@var checkbox style-tabs "Style tabs" 1
@var select theme "Theme compatibility: Theme" ["vanilla:Vanilla", "goodie: Match Bluesky Goodie Bag", "mocha:Catppuccin Mocha", "custom:Custom"]
@var color custom-background-color "Theme compatability: Custom Background" #000
@var color custom-text-color "Theme compatability: Custom Text" #fff
@var color custom-primary-color "Theme compatability: Custom Primary" #208bfe
==/UserStyle== */
@-moz-document domain("bsky.app") {
if theme == "vanilla" {
// the paranthesis in the selector seeems to conflict
// with stylus's parser
:root {
--goodie2-primary-color: rgb(32, 139, 254);
}
@css {
/*dark*/
body[style*="background-color: rgb(0, 0, 0)"] {
--goodie2-background-color: black;
--goodie2-text-color: white;
}
/*dim*/
body[style*="background-color: rgb(22, 30, 39)"] {
--goodie2-background-color: rgb(22, 30, 39);
--goodie2-text-color: white;
}
/*light*/
body[style*="background-color: rgb(255, 255, 255)"] {
--goodie2-background-color: white;
--goodie2-text-color: black;
}
}
} else if theme == "mocha" {
:root {
--goodie2-text-color: #cdd6f4;
--goodie2-background-color: #1e1e2e;
--goodie2-primary-color: #74c7ec;
}
} else if theme == "goodie" {
:root {
--goodie2-text-color: var(--goodie-text-color);
--goodie2-background-color: var(--goodie-background-color);
--goodie2-primary-color: var(--goodie-primary-color);
}
} else if theme == "custom" {
:root {
--goodie2-text-color: custom-text-color;
--goodie2-background-color: custom-background-color;
--goodie2-primary-color: custom-primary-color;
}
}
text-color = var(--goodie2-text-color)
background-color = var(--goodie2-background-color)
primary-color = var(--goodie2-primary-color)
mobile-breakpoint= 800px;
// shrink new post button
if style-new-post {
[data-testid="composeFAB"] {
width: 56px !important;
height: 56px !important;
> div {
width: 56px;
height: 56px;
if change-theme {background: primary-color !important;}
}
}
}
if style-back-to-top {
button[aria-label="Load new posts"] {
bottom: 30px !important;
height: 56px !important;
width: 56px !important;
border-radius: 9999px !important;
left: 24px !important;
}
}
nav-height=53px
// shrink bottom nav
if style-nav {
[style*="padding-bottom: 15px"]:has(> div[role=link]) {
padding-bottom: 0px !important;
height: nav-height;
}
[data-testid="replyPromptBtn"] {
transform: translateY(6px);
}
}
if style-post-avatar {
// posts
//
// detectes a link that has a specific padding and a profile link
// because there isn't a better way to detect posts that i know of...
//
// posts in search have a different structure, and this does not work
// with them currently
[role="link"]:has(>div >div > .r-1m04atk):has([href*="/profile/"]) {
> div {
padding: 0px 16px;
}
.r-1m04atk {
padding-left: 0px;
}
// left side of post with pfp
a[aria-label*="See profile"] {
[style*="width: 52px"] {
width: 40px !important;
height: 40px !important;
}
}
// the bottom part of the line used for a thread
> div > div:first-child[style*="padding-left: 8px"] {
padding: 0 !important;
> div[style*="width"] {
width: 40px !important;
}
}
[data-testid="postText"] {
font-size: 15px !important;
line-height: 20px !important;
}
// [[author name, handle], sepreator, timestamp]
div:has(> [href*="/post/"][data-tooltip*="at"]) {
display: flex;
overflow: hidden;
width: 100%;
* {
font-size: 15px !important;
line-height: 20px !important;
}
// author name, handle
> div:first-child {
flex-shrink: 1 !important;
overflow: hidden;
display: flex;
max-width: 100%;
// another container
> div {
max-width: 100%;
display: block;
// the handle and name
> a {
overflow: hidden;
text-overflow: ellipsis;
}
}
}
> a {
flex-grow: 1 !important;
}
}
}
// "View full thread"
[role="link"] > a[href*="/post/"].r-qi0n3 {
padding-left: 16px
> .r-1awozwy {
width: 40px !important;
}
}
}
if style-profile-username {
[data-testid="profileHeaderDisplayName"] {
font-size: 20px !important;
font-weight: 700 !important;
line-height: 24px !important;
}
}
if style-snackbar {
// snackbars
#root > div > div > div.r-17c3jg3 {
if change-theme {
background-color: primary-color;
}
padding: 15px 20px;
@media (max-width: mobile-breakpoint) {
bottom: nav-height + 15px;
left: 50%;
transform: translateX(-50%);
}
}
}
if style-tabs {
div:has(> [data-testid="profilePager"]) {
padding: 0;
}
[data-testid="profilePager-selector"] {
> div {
padding: 0px 14px;
> div:first-child {
padding-left: 0;
}
> div:last-child {
padding-right: 0;
}
}
}
}
}