Makes Bluesky cleaner and adds color and font options
Better Bluesky by FennyFlametail
Details
AuthorFennyFlametail
LicensePublic domain
Categorybsky
Created
Updated
Size38 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
A cleaner, friendlier Bluesky! Removes borders and adds translucency effects by default. Choose a custom font and colors in Stylus to make it your own. Regularly updated, because I use it daily!
Install it using Stylus on Chrome and Firefox, or the Userscripts app on Safari (desktop and iOS). See line 46 of the code for instructions on using it with Safari.
Respects your device's Reduce motion and Reduce transparency settings (the latter is currently only supported on Chrome-based browsers).
by @fenny.zone! Inspired by the "blue blue sky" Arc boost by @twobabyteeth on Twitter.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Better Bluesky
@namespace https://bsky.app/profile/fenny.zone
@version 4.2
@description by @fenny.zone on Bluesky. Loosely based on the "blue blue sky" Arc boost by @twobabyteeth on Twitter
@author https://bsky.app/profile/fenny.zone
@license MIT
@match https://*.bsky.app/*
@var select tweak-option-use-title "Use Custom Title" {
"yes:Yes": "none",
"no:No": "0px"
}
@var text tweak-option-title "Custom Title (in quotes)" "'☁️'"
@var text tweak-option-font "Font Family" "'Avenir Next', 'SF Pro Rounded', ui-rounded, system-ui;"
@var number tweak-option-line-height "Line Height" [1.3, null, null, 0.05]
@var select tweak-option-text-transform "Text Transform" {
"none:None": "revert",
"lowercase:lowercase": "lowercase",
"uppercase:UPPERCASE": "uppercase"
}
@var select tweak-option-disable-outlines "Disable Focus Outlines (select No if you use keyboard navigation)" {
"yes:Yes": "none",
"no:No": "1px auto"
}
@var color tweak-option-bg "Light Mode Background" #f9f3ec
@var color tweak-option-accent "Light Mode Accent" #388098
@var color tweak-option-text "Light Mode Text Color" #9e5574
@var color tweak-option-bg-dark "Dark Mode Background" #222232
@var color tweak-option-accent-dark "Dark Mode Accent" #f48da4
@var color tweak-option-text-dark "Dark Mode Text Color" #8fc7e8
==/UserStyle== */
/*
Section headings (search for the emoji to jump to them quickly!)
🔘 CONTROLS
📱 UI
🏠 FEED
💬 POSTS
🖱️ CONTEXT MENUS
🪟 MODALS
📝 POST COMPOSER
🖼️ IMAGES
🔍 SEARCH & MY FEEDS
📋 LISTS
🔔 NOTIFICATIONS
👤 PROFILE
🛠️ MODERATION/SETTINGS
*/
@-moz-document domain("bsky.app") {
/* 🚨📲🚨 if you're using Userscripts for iOS, delete the @-moz-document line
above, and the closing "}" at the very bottom of the file.
Then uncomment the block below and replace the values with your options.
When the theme updates, just remove the @-moz-document lines again, and copy
your customized options block into the new version. */
/* :root {
--tweak-option-use-title: none;
--tweak-option-title: '☁️';
--tweak-option-font: 'Avenir Next', 'SF Pro Rounded', ui-rounded, system-ui;
--tweak-option-line-height: 1.3;
--tweak-option-text-transform: revert;
--tweak-option-disable-outlines: none;
--tweak-option-accent: #388098;
--tweak-option-bg: #f9f3ec;
--tweak-option-text: #9e5574;
--tweak-option-accent-dark: #f48da4;
--tweak-option-bg-dark: #222232;
--tweak-option-text-dark: #8fc7e8;
} */
:root {
--tweak-accent: var(--tweak-option-accent, #388098);
--tweak-bg: var(--tweak-option-bg, #f9f3ec);
--tweak-fg: var(--tweak-option-text, #9e5574);
--tweak-bg-secondary: color-mix(in srgb, var(--tweak-bg) 90%, black);
--tweak-bg-tertiary: color-mix(in srgb, var(--tweak-bg) 75%, black);
--tweak-bg-translucent: color-mix(in srgb, var(--tweak-bg) 75%, transparent);
--tweak-fg-translucent: color-mix(in srgb, var(--tweak-fg) 75%, transparent);
--tweak-fg-more-translucent: color-mix(in srgb, var(--tweak-fg) 25%, transparent);
--tweak-accent-translucent: color-mix(in srgb, var(--tweak-accent) 50%, transparent);
--tweak-accent-more-translucent: color-mix(in srgb, var(--tweak-accent) 25%, transparent);
--tweak-radius: 14px;
--tweak-blur: blur(30px);
--tweak-shadow: rgba(0, 0, 0, 0.3) 0px 5px 20px;
--background: var(--tweak-bg) !important;
--backgroundLight: var(--tweak-bg) !important;
--text: var(--tweak-fg) !important;
}
/* override inline light mode colors */
@media (not (prefers-color-scheme: dark)) {
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(246, 247, 249)"] {
background-color: var(--tweak-bg) !important;
}
[style*="background-color: rgb(226, 231, 236)"],
[style*="background-color: rgb(240, 242, 245)"],
[style*="background-color: rgb(241, 243, 245)"],
[style*="background-color: rgb(243, 243, 248)"] {
background-color: var(--tweak-bg-secondary) !important;
}
[style*="color: rgb(7, 10, 13)"],
[style*="color: rgb(11, 15, 20)"],
[style*="color: rgb(37, 51, 66)"]{
color: var(--tweak-fg) !important;
}
[style*="color: rgb(66, 87, 108)"],
[style*="color: rgb(102, 127, 153)"],
[style*="color: rgb(111, 134, 159)"] {
color: var(--tweak-fg-translucent) !important;
}
[fill="#000000" i],
[fill="#545664" i],
[fill="#71768A" i] {
fill: var(--tweak-fg-translucent) !important;
}
}
/* override inline dark mode colors */
@media (prefers-color-scheme: dark) {
:root {
--tweak-accent: var(--tweak-option-accent-dark, #f48da4);
--tweak-bg: var(--tweak-option-bg-dark, #222232);
--tweak-fg: var(--tweak-option-text-dark, #8fc7e8);
--tweak-bg-secondary: color-mix(in srgb, var(--tweak-bg) 90%, white);
--tweak-bg-tertiary: color-mix(in srgb, var(--tweak-bg) 75%, white);
}
[style*="background-color: rgb(0, 0, 0)"],
[style*="background-color: rgb(8, 10, 12)"],
[style*="background-color: rgb(22, 30, 39)"],
[style*="background-color: rgb(28, 38, 49)"] {
background-color: var(--tweak-bg) !important;
}
[style*="background-color: rgb(30, 41, 54)"],
[style*="background-color: rgb(38, 53, 68)"],
[style*="background-color: rgb(33, 45, 59)"] {
background-color: var(--tweak-bg-secondary) !important;
}
[style*="color: rgb(215, 221, 228)"],
[style*="color: rgb(255, 255, 255)"] {
color: var(--tweak-fg) !important;
}
[style*="color: rgb(174, 187, 201)"],
[style*="color: rgb(154, 170, 188)"],
[style*="color: rgb(108, 132, 157)"],
[style*="color: rgb(120, 142, 165)"] {
color: var(--tweak-fg-translucent) !important;
}
[fill="#FFFFFF" i],
[fill="#B9B9C1" i],
[fill="#707489" i] {
fill: var(--tweak-fg-translucent) !important;
}
}
* {
border: 0px solid var(--tweak-bg-secondary) !important;
-webkit-font-smoothing: auto;
}
*:focus {
outline: var(--tweak-option-disable-outlines, none);
}
*:not(input, textarea) {
text-transform: var(--tweak-option-text-transform, 'lowercase');
}
:not(.material-symbols-outlined, .material-icons) {
font-family: var( --tweak-option-font, 'Avenir Next', 'SF Pro Rounded', ui-rounded, system-ui) !important;
line-height: var(--tweak-option-line-height, 1.3) !important;
}
::selection {
background-color: color-mix(in srgb, var(--tweak-fg) 25%, transparent);
}
/* accent color override */
[style*='color: rgb(16, 131, 254)'],
[style*='color: rgb(32, 139, 254)'],
.ProseMirror a,
.ProseMirror .autolink {
color: var(--tweak-accent) !important;
}
[style*='background-color: rgb(0, 133, 255)'],
[style*='background-color: rgb(16, 131, 254)'],
[style*='background-color: rgb(32, 139, 254)'],
[style*='background-color: rgb(185, 185, 193)'] {
background-color: var(--tweak-accent) !important;
}
[fill^="hsl(211,"] {
fill: var(--tweak-fg) !important;
}
[fill="#0085ff"] {
fill: var(--tweak-accent) !important;
}
/* fix text color for style-colored buttons */
button[style*='background-color: rgb(0, 133, 255)'] div {
color: var(--tweak-bg) !important;
}
/* buttons with gradient backgrounds */
[style*="background-image: linear-gradient"][style*="rgb(90, 113, 250)"] {
background: var(--tweak-accent) !important;
}
[style*="background-image: linear-gradient"][style*="rgb(90, 113, 250)"] > div {
color: var(--tweak-bg) !important
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes scale-up {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
/* 🔘 CONTROLS */
/* text fields */
input,
textarea {
background: var(--tweak-bg-secondary) !important;
}
input::placeholder,
textarea::placeholder,
p[data-placeholder]::before,
[data-testid="composePostView"] [contenteditable="true"] {
color: var(--tweak-fg-translucent) !important;
}
textarea {
resize: vertical !important;
}
/* search glyphs */
svg:has(+ input) {
color: var(--tweak-fg) !important;
}
svg:has(+ input) path[fill] {
fill: var(--tweak-fg) !important;
}
/* slider track */
[style*="background-color: rgb(63, 63, 63)"] {
background-color: var(--tweak-accent) !important;
}
[style*="background-color: rgb(179, 179, 179)"] {
background-color: var(--tweak-accent-translucent) !important;
}
/* on/off switches */
.r-1mhb1uw {
justify-content: center;
border-width: 1px !important;
border-color: var(--tweak-accent) !important;
}
[style*='background-color: rgb(19, 63, 109)'] {
background-color: var(--tweak-accent-translucent) !important;
}
/* post language radio buttons */
button path[d^='M256 512A256'] {
fill: var(--tweak-accent) !important;
}
/* settings radio buttons */
...