A port of Twitter Tweaks to Bluesky!
Bluesky Tweaks by noblereign
Details
Authornoblereign
LicenseNo License
Categorybsky.app
Created
Updated
Size97 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Latest: 3.1.1 - Blur strength option now affects the opacity of dropdowns and hover cards
Latest major: 3.0.0 - Support for Bluesky v1.93! If you're using the companion userscript, make sure to update it as well! (v3.0)
Everything should be back to normal, plus a couple of changes:
- [⭐ Replace likes with stars > Change text > Affect notifications]: Requires a userscript update for proper functionality (Bluesky changed how multi-user notifs work)
- [🌈 Custom Accent Color]: DMs in the process of being sent now apply accent color
- [🌈 Custom Accent Color > Affect borders]: Changed border colors to work better in all themes
- [🎞️ More Animations]: DMs in the process of being sent now have a blur-in animation
- [🎞️ More Animations]: Toasts now slide up when appearing, and can optionally fade out (enabled by default)
- [🎞️ More Animations]: Smoother modal animation
- [🖤 Wellbeing]: Added "Keep buttons visible" option for Follower and Following count
- [🖤 Wellbeing]: Added "Show Post Count" option
- Toasts now have a border and blurred background
- Chat view has a properly blurred background
Thanks for your patience, I hope you have fun!
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:
3.1.0 - Adds the following:
- [👁 Blur Effect Strength]: Changes how strong the background filter effects are
- [🎨 Feed: Color ]: Scuffed feed color changer. I leave making this look good an exercise for the reader
- [🖼 Profile banners as background > Blur]: Changes blur strength for banner backdrops.
3.0.5 - Fixed banner transition
3.0.4 - Fixed background if you had Profile Banner as Background off
3.0.3 - Even more bugfixes
3.0.2 - Various bugfixes + added [⚫ Feed: Avatar Roundness > Affect labels & buttons]
3.0.1 - Fixed embedded videos having a star for a play button in notifications
2.0.0 - A paw reaches from the grave...
Sorry for the long wait for updates, I've just been busy with working on other things, and I primarily use Fedi instead of Bluesky. Nevertheless, the theme should be mostly working again.
There are actually two new features in this update though: Colored borders are a happy little accident I decided to keep around as an option, and Full Width images are like Contained images, but they ALWAYS take up as much width as they can.
It's not really much, but I hope just being able to use the theme properly again is enough to suffice... I'm definitely going to sleep now 🥴
1.6.2 - Fixed broken themes and added support for new themes
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 3.1.1
@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", "full:Full Width", "Cropped", "Contained"]
@var range avatarRadius "⚫ Feed: Avatar Roundness" [30, 5, 50, 5, '%']
@var checkbox radiusTags " ↳ Affect labels & buttons" 0
@var range TLWidth "↔ Feed: Feed Width" [600, 600, 1000, 20, "px"]
@var range feedOpacity "🔎 Feed: Feed Transparency" [40, 0, 100, 1, "%"]
@var color bgColor "🎨 Feed: Color [Experimental]" #000000FF
@var range blurStrength "👁 Blur Effect Strength" [1, 0, 1, .01]
@var color themeColor "🌈 Custom Accent Color" #000000
@var checkbox borderColors " ↳ Affect borders" 0
@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 range bgBannerBlur " ↳ Blur" [10, 0, 30, 1, 'px']
@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 toastFades " ↳ Fade toasts (may fail in quick succession)" 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 showFollowersButton " ↳ Keep buttons visible" 0
@var checkbox followingCount "🖤 Wellbeing: Show Following Count" 1
@var checkbox showFollowingButton " ↳ Keep buttons visible" 0
@var checkbox postsCount "🖤 Wellbeing: Show Post 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
if not bgColor==#000000 {
--useBackground: bgColor
if luminosity(bgColor) < .3 {
--text: white !important;
} else {
--text: black !important;
}
} else {
--useBackground: var(--background)
}
--starColor: #ffac33
}
html.theme--dim {
if not bgColor==#000000 {
--useBackground: bgColor
} else {
--useBackground: rgb(22, 30, 39)
}
}
html.theme--light{
--starColor: #d08d2b
}
if not bgColor==#000000 {
html.theme--dark div.css-175oi2r.r-12vffkv[style*="background-color: rgb(0"][style*="0"][style*=" 0)"],
html.theme--dark div.css-175oi2r.r-1awozwy[style*="background-color: rgb(0"][style*="0"][style*=" 0)"],
html.theme--dark div.css-175oi2r[style*="flex-direction: row"][style*="background-color: rgb(0"][style*="0"][style*=" 0)"] {
background-color: bgColor !important;
if luminosity(bgColor) < .3 {
color: white !important;
} else {
color: black !important;
}
}
html.theme--dim div.css-175oi2r.r-12vffkv[style*="background-color: rgb(22"][style*="30"][style*=" 39)"],
html.theme--dim div.css-175oi2r.r-1awozwy[style*="background-color: rgb(22"][style*="30"][style*=" 39)"],
html.theme--dim div.css-175oi2r[style*="flex-direction: row"][style*="background-color: rgb(22"][style*="30"][style*=" 39)"] {
background-color: bgColor !important;
if luminosity(bgColor) < .3 {
color: white !important;
} else {
color: black !important;
}
}
html.theme--dim div.css-175oi2r.r-12vffkv[style*="background-color: rgb(22"][style*="30"][style*=" 39)"],
html.theme--dim div.css-175oi2r.r-1awozwy[style*="background-color: rgb(22"][style*="30"][style*=" 39)"],
html.theme--dim div.css-175oi2r[style*="flex-direction: row"][style*="background-color: rgb(22"][style*="30"][style*=" 39)"] {
background-color: bgColor !important;
if luminosity(bgColor) < .3 {
color: white !important;
} else {
color: black !important;
}
}
html.theme--light div.css-175oi2r.r-12vffkv[style*="background-color: rgb(255"][style*="255"][style*=" 255)"],
html.theme--light div.css-175oi2r.r-1awozwy[style*="background-color: rgb(255"][style*="255"][style*=" 255)"],
html.theme--light div.css-175oi2r[style*="flex-direction: row"][style*="background-color: rgb(255"][style*="255"][style*=" 255)"] {
background-color: bgColor !important;
if luminosity(bgColor) < .3 {
color: white !important;
}
else {
color: black !important;
}
}
}
/* 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 - 2px;
}
/*.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% - 300px - (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;
}
button[role="button"][style*="fixed; left: calc"] {
/*back to top button*/
left: calc(46vw - (var(--TLWidth) / 2)) !important;
}
div.r-1ljd8xs.r-13l2t4g.r-f8sm7e.r-33ulu8:has(div[data-testid="profilePager"]), /*profile page for some reason*/
div.r-1ljd8xs.r-13l2t4g.r-f8sm7e.r-33ulu8:has(div[data-testid="profileHeaderAviButton"]),
div.r-1ljd8xs.r-13l2t4g.r-f8sm7e.r-33ulu8:has(div[data-testid]) /*idk if this will break things lol, presumably every header?*/
{
width: TLWidth !important;
}
div.css-175oi2r.r-1ljd8xs.r-13l2t4g.r-5laclt.r-33ulu8 { /*main header*/
width: TLWidth !important;
left: calc((50% - 300px - (var(--TLWidth) - 600px)/2) - 0px) !important;
}
}
div.r-sa2ff0 > div.css-175oi2r > div.css-175oi2r[style*="height: 16px"],
div.css-175oi2r.r-1ljd8xs.r-13l2t4g.r-f8sm7e.r-33ulu8 > div.css-175oi2r.r-1ssbvtb.r-cnw61z.r-3pj75a:has([data-testid="listDescription"]) {
background-color: var(--useBackground) !important;
}
if radiusTags {
[data-testid="userAvatarImage"],
[data-testid="profileHeaderAviButton"],
div:has(div[data-testid="userAvat...