A port of Twitter Tweaks to Bluesky!
Bluesky Tweaks by noblereign
Details
Authornoblereign
LicenseNo License
Categorybsky.app
Created
Updated
Size55 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Latest: 1.6.2 - Fixed broken themes and added support for new themes
Latest major: 1.6.0 - Updated for latest Bluesky. Completely reworked backgrounds, and now they work everywhere!
Additionally, context menus now have blur effects, modal animations should be more consistent, and the theme should be less likely to break... hopefully.
This style is based on Twitter Tweaks. Thank you Freeplay for allowing me to share it!
This isn't nearly as polished as Twitter Tweaks, but nonetheless, these customizations made it over:
- Media resizing
- Avatar roundness
- Timeline Width
- Custom accent colors!
- Border hiding
- Feed contrast
- Profile banners as background*
- Custom backgrounds
- UI Animations
- 'Revert' Font*
- Wellbeing Controls
There are a few caveats:
- Profile Banner as Background requires a companion userscript to function. Bluesky isn't set up the same as Twitter, so my hand was forced...
- Revert Font requires Chirp/GT America installed on your computer. Yes, it reverts it to the Twitter font! Yes, it looks bad! 💙
Custom Backgrounds won't work on certain pages due to some elements not being consistent. You'll mainly notice this on: Moderation, My Feeds, Search, and user lists (e.g. Followers/Following page)Fixed as of 1.6.0!
Better than nothing though. And aside from that, a couple of the features were upgraded. Some are new, even (Banner Transitions)!
Make sure to open the settings and tweak them as you like. Have a fun one!
Historical Changelogs:
1.6.1 - Fixed background and share button issues
1.5.6 - Fixed incorrect search icon with likes to stars enabled + fixed some loading circles not getting rethemed
1.5.5 - Updated to work with latest Bluesky updates + improved theme colors
1.5.4 - Fixed incorrect star text coloration
1.5.3 - Fixed: missing button coloration, background showing up in alt text entry
1.5.2 - Fixed post language done button not being affected by theme color
1.5.1 - Fixed alt text "done" button not being affected by theme color
1.4.0 - Theme color now affects loading indicator
1.3.8 - Fixed profile pictures being missing
1.3.7 - Fixed broken background color + missing animations
1.3.5 - Updated for Bluesky 1.57. The Companion Userscript must be updated if you use the text replacement function.
1.3.3 - Fixed Timeline Width option
1.3.2 - Fixed search bar being opaque, and likes to stars now works on the loading placeholders
1.3.0 - Added the ability to replace likes ❤️ with stars ⭐️, if that's more your thing.
The Companion Userscript was also updated to 2.0 to help support this feature. It isn't required, but posts with 1 like will look a little weird without it, if you choose to change the counter text.
1.2.1 - Changed @author in the userstyle to be just me (because apparently Stylus just interprets everything after the first word to be a link?)
Freeplay is still mentioned everywhere else though 😅
1.2.0 - Now supports new Bluesky UI (September 26th 2023)
This inadvertently also made the Custom Background work in more places, so... yay! 🥴
1.1.0 - Added Light Theme support, polished up accent color options, new option to invert banner transition color, fixed some bugs
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Bluesky Tweaks by @wolfdo.gg
@version 1.6.2
@description It's just Twitter Tweaks by Freeplay but for Bluesky instead. Thank you Freeplay for giving me permission to share it!
@preprocessor stylus
-- AUTHOR STUFF --
@namespace NobleFurLyfe
@author Noble https://wolfdo.gg/@frost
@var text hehe "Thank you to Freeplay for making Twitter Tweaks and keeping my brain happy. If you're on the Fediverse, check out Mastodon Modern too:" '"https://twitter.com/FreeplayG/status/1528077571900035074"'
@var text notice 'Make sure you are using the "Stylus" browser extension, not "Stylish"! — Twitter Tweaks created by @FreeplayG' "'https://add0n.com/stylus.html'"
@var text companion 'Companion userscript' "'https://greasyfork.org/en/scripts/475412-bluesky-tweaks-companion-userscript'"
@var select fullWidthMedia "🖼 Feed: Media Size" ["Default", "Cropped", "Contained"]
@var range avatarRadius "⚫ Feed: Avatar Roundness" [30, 5, 50, 5, '%']
@var range TLWidth "↔ Feed: Feed Width" [600, 600, 1000, 20, "px"]
@var range feedOpacity "🔎 Feed: Feed Transparency" [40, 0, 100, 1, "%"]
@var color themeColor "🌈 Custom Accent Color" #000000
@var select noBorder "⛔ Border Style" ["Default*", "Hide", "keep:Only Timeline Separators"]
@var checkbox columnBG "💡 Add Contrast between background and feed" 0
@var range bannerFadeHeight "🔲 Profile: Banner Transition Height" [0, 0, 150, 2, "px"]
@var range bannerFadeOpacity "🔲 Profile: Banner Transition Opacity" [1, 0, 1, .05]
@var checkbox bannerFadeInvertColor "🔲 Profile: Banner Transition Inverted" 0
@var checkbox bgBanner "🖼 Profile banners as background (REQUIRES COMPANION USERSCRIPT)" 0
@var range bgBannerOpacity" ↳ Brightness" [.3, 0.05, 1, .05]
@var text customBG "🖼 Custom Background (Link in quotes, if it doesn't work, upload to Bluesky and use url from there)" '""'
@var range customBGOpacity" ↳ Opacity" [1, 0.05, 1, .05]
@var range customBGBlur " ↳ Blur" [0, 0, 30, 1, 'px']
@var checkbox customBGAsFallback "🖼 Use Custom Background as fallback for Banner Background" 0
@var checkbox moreAnim "🎞️ More Animations" 1
@var checkbox revertFont "🇦 Twitter Font (requires Chirp or GT America on system)" 0
@var checkbox starsEnabled "⭐ Replace likes with stars" 0
@var checkbox starsNotifs " ↳ Affect notifications" 0
@var checkbox starsText " ↳ Change text (userscript recommended)" 0
@var checkbox starsMasto " ↳ 🐘" 0
@var checkbox followersCount "🖤 Wellbeing: Show Follower Count" 1
@var checkbox likesCount "🖤 Wellbeing: Show Like Count" 1
@var checkbox retweetsCount "🖤 Wellbeing: Show Repost Count" 1
@var checkbox commentsCount "🖤 Wellbeing: Show Comment Count" 1
==/UserStyle== */
@-moz-document domain("bsky.app") {
html {
scrollbar-color: rgba(155, 155, 155, 0.5) transparent;
--TLWidth: TLWidth
--useBackground: var(--background)
}
html.theme--dim {
--useBackground: var(--backgroundLight)
}
/* Column Width */
@media not screen and (max-width: 1278px) and (min-width: 987px) {
.r-1ye8kvj {
/*main column*/
width: 390px + TLWidth;
&.r-1ye8kvj {
max-width: calc(100vw - 90px);
width: TLWidth;
[data-testid="primaryColumn"] {
max-width: 100%;
}
}
}
.r-c4unlt {
left: calc(-540px - ((var(--TLWidth) - 600px)/2) + 50vw) !important;
}
div.css-175oi2r.r-196lrry.r-pm9dpa.r-1rnoaur.r-1xcajam.r-1ipicw7 {
/*search*/
left: calc(310px + 50vw + (var(--TLWidth) - 600px)/2);
}
.r-szihnw {
/*feeds bar*/
width: TLWidth - 2;
}
/*.r-13qz1uu { feeds bar
width: TLWidth - 2;
}*/
div.css-175oi2r.r-1pi2tsx div.css-175oi2r[style*="width: 598px"] {
/*feed topbar*/
width: TLWidth - 2 !important;
left: calc((50% - 299px - (var(--TLWidth) - 600px)/2) - 0px) !important;
}
div.css-175oi2r.r-1pi2tsx div.css-175oi2r[style*="width: 598px"] .r-13qz1uu:not(.r-1niwhzg.r-vvn4in.r-u6sd8q.r-1p0dtai.r-1wyyakw.r-4gszlv) { /*the 'not' is so that it doesnt hit PFPs*/
width: TLWidth - 2 !important;
}
.r-a2mu05 {
/*back to top button*/
transform: translateX(calc(var(--TLWidth) * -.47));
}
div.css-175oi2r.r-1ljd8xs.r-13l2t4g.r-1jj8364.r-lchren.r-33ulu8 { /*profile page for some reason*/
width: TLWidth !important;
}
}
div.r-sa2ff0 > div.css-175oi2r > div.css-175oi2r[style*="height: 16px"] {
background-color: var(--useBackground) !important;
}
[data-testid="userAvatarImage"],
.r-1wh0n7e {
/*avatar roundness*/
border-radius: avatarRadius !important;
transition: border-radius .5s, transform .5s;
}
/*make dummy fade for profile tabs so it doesnt look scuffed*/
div.css-175oi2r.r-iphfwy.r-gu64tb.r-tskmnb::after {
content: "";
width: TLWidth - 2;
height: 43px;
margin-bottom: -43px;
position: relative;
top: 4px;
left: -14px;
background: var(--useBackground);
background: linear-gradient(180deg, var(--useBackground) 0%, transparent 100%);
}
/*also a nice little fade for the banner :3*/
div.css-175oi2r.r-iphfwy.r-gu64tb.r-tskmnb::before {
content: "";
width: TLWidth - 2;
height: bannerFadeHeight;
margin-bottom: 0 - bannerFadeHeight;
position: relative;
top: 0px - (bannerFadeHeight + 8);
left: -14px;
opacity: bannerFadeOpacity;
if bannerFadeInvertColor {
background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, var(--text) 0%, transparent 100%);
}
else {
background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, var(--useBackground) 0%, transparent 100%);
}
}
/*.css-175oi2r.r-5kkj8d.r-1hfyk0a.r-1qfoi16.r-95jzfe*/
.r-c6jqw7, /*hide pointless backgrounds*/
.r-1u20jyi,
div.css-175oi2r.r-150rngu.r-eqz5dr.r-16y2uox.r-1wbh5a2.r-11yh6sk.r-1rnoaur.r-agouwx,
div.css-175oi2r .r-ryqm5k,
.r-1w88a7h,
.r-1ipicw7:not(.r-3pj75a),
.r-1udh08x.r-1hfyk0a.r-ry3cjt,
div.css-175oi2r.r-13awgt0[style*="rgb(7"][style*="10"][style*="13)"],
{
background-color: rgba(0, 0, 0, 0) !important;
}
[style*='background-color: rgb(38'][style*='39'][style*=' 45)'],
/*convert button hovers from grayscale to transparent*/
{
background-color: rgba(137, 140, 162, .275) !important;
}
[style*='background-color: rgb(20'][style*='25'][style*=' 31)'],
/*convert button hovers from grayscale to transparent*/
{
background-color: rgba(76, 80, 85, .275) !important;
backdrop-filter: blur(20px);
}
div.css-175oi2r.r-18u37iz.r-gu64tb {
background-color: #00000000 !important;
}
/* gotta backport everything right?*/
.css-146c3p1[style*='color: rgb(209'][style*='16'][style*=' 67)']::after,
.css-146c3p1[style*='color: rgb(251'][style*='162'][style*=' 178)']::after {
content: " What're you gonna do, go back to Twitter?";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
color: inherit;
opacity: .25;
}
if not followersCount {
[href$="/followers"] {
display: none !important;
}
}
if not likesCount {
[data-testid="likeCount-expanded"],
[data-testid="likeCount"],
[href$="/liked-by"] {
display: none !important;
}
}
if not retweetsCount {
[data-testid="repostCount-expanded"],
[data-testid="repostCount"],
[href$="/reposted-by"] {
display: none !important;
}
}
if not commentsCount {
[data-testid="replyBtn"] div {
display: none !important;
}
}
if not analyticsButton {
[href$="/analytics"] {
display: none;
}
}
if (not likesCount) && (not retweetsCount) {
.css-175oi2r.r-qklmqi.r-5kkj8d.r-18u37iz.r-ku1wi2.r-1g94qm0.r-1sp51qo {
display: none;
}
}
if fullWidthMedia !="Default" {
if fullWidthMedia=="Cropped" {
[style*="--expo-image"] {
max-height: 300px !important;
}
[style*="--expo-image"]:first-child:first-child {
object-fit: cover;
}
}
else if fullWidthMedia=="Contained" {
[style*="--expo-image"] {
max-height: 300px !important;
}
[style*="--expo-image"]:firs...