Skip to content

Better Bluesky by FennyFlametail

Screenshot of Better Bluesky

Details

AuthorFennyFlametail

LicensePublic domain

Categorybsky

Created

Updated

Size38 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Makes Bluesky cleaner and adds color and font options

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.3
@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(91, 119, 149)'],
    [style*='background-color: rgb(140, 158, 178)'],
    [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)'],
    [aria-checked] > [style*='background-color: rgb(255, 255, 255)'],
    [aria-checked] > [style*='background-color: rgb(22, 30, 39)'] {
        background-color: var(--tweak-accent-translucent) !important;
    }

    /* post language radio buttons */
    button path[d^='M256 512A256'] {
        fill: var(--tweak-accent) !important;
    }

    /* settings radio buttons */
    .r-19tjxh9.r-1k25im9 {
        just...

Reviews

No reviews yet.