Skip to content

Twitter Color Changer by aubymori

Screenshot of Twitter Color Changer

Details

Authoraubymori

LicenseUnlicense

Categorytwitter

Created

Updated

Size4.7 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Lets you change the color on Twitter to whatever you want!

Notes

⚠️ MAKE SURE TO SET YOUR COLOR IN TWITTER'S DISPLAY OPTIONS TO ORANGE! ⚠️

Source code

/* ==UserStyle==
@name           Twitter Color Changer
@namespace      aubymori
@version        1.3.0
@description    Allows you to change the Twitter color
@author         aubymori
@license        Unlicense
@preprocessor   less
@var            checkbox  notice  "⚠️ Make sure to set your Twitter color to Orange! ⚠️" 0
@var            color     color   "Color"                                                 #1D9BF0
@var            checkbox  btnfix  "Color Tweet buttons"                                   1
@var            checkbox  folfix  "Color Follow buttons"                                  1
@var            checkbox  colnav  "Color navigation items"                                1
==/UserStyle== */

@-moz-document domain("twitter.com"), domain("x.com") {
    /**
      * Any text/icon colored orange
      * as well as SVG elements colored
      * orange (such as loading icon)
      */
    [style*="color: rgb(255, 122, 0"],
    [style*="stroke: rgb(255, 122, 0"],
    :not([style*="-7.5px"]) >  .r-5c1b6u:not(.r-1h0z5md),
    [stroke="#FF7A00"],
    .r-5c1b6u {
        color: @color !important;
        stroke: @color !important;
    }
    
    /* Selected DM */
    .r-9tgftk {
        border-right-color: @color;
    }
    
    /* Who can reply background */
    .r-fovk4y {
        background: darken(@color, 50%);
    }
    
    /* Toggle background */
    [style*="rgb(255, 173, 97)"] {
        background: lighten(@color, 10%) !important;
    }
    
    /* Slider background */
    [style*="rgb(255, 189, 128)"] {
        background: lighten(@color, 20%) !important;
    }
    
    /* Border color */
    [style*="border-color: rgb(255, 122, 0"] {
        border-color: @color !important;
    }
    
    /* Textbox */
    .r-1a58od1 {
        caret-color: @color;
    }
    
    /* Any button background colored orange */
    [style*="background-color: rgb(255, 122, 0)"],
    .r-2r9icm,
    .r-tmwc1p {
        background: @color !important;
    }
    
    /* New notification flash */
    .r-kp635f {
        background: rgba(@color, .14);
    }
    
    /* Selected poll option */
    .r-1079r16 {
        background: rgba(@color, .58);
    }

    /* Button hover */
    .r-oo8a77 {
        background: darken(@color, 10%);
    }
    
    /* Button active */
    .r-2f19ci {
        background: darken(@color, 20%);
    }

    /* Text button hover */
    .r-1nvazc9 {
        background: rgba(@color, .1);
    }
    
    /* Text button active */
    .r-gz9rms {
        background: rgba(@color, .2);
    }
    
    /* Tab key navigation focus border */
    .r-14pf6q4,
    .r-1cm1fuq{
        box-shadow: lighten(@color, 10%) 0 0 0 2px inset;
    }
    
    /* Searchbox */
    .r-14u09jm {
        border-color: @color;
    }

    ::selection {
        background: @color;
        color: white;
    }
    
    /* Settings categories */
    .r-1c4dmg9 {
        border-right-color: @color;
    }
    
    /* Sidebar Tweet button */
    [data-testid="SideNav_NewTweet_Button"],
    [data-testid="tweetButton"],
    [data-testid="tweetButtonInline"] {
        & when (@btnfix = 1) {
            background: @color !important;

            & > div, svg {
                color: white !important;
            }

            &.r-jc7xae {
                background: darken(@color, 10%) !important;

            }
        }
    }
    
    :root when (@folfix = 1) {
        [data-testid$="-follow"],
        [data-testid="editProfileButton"],
        [data-testid="userActions"],
        [data-testid="userActions"] + button,
        [data-testid="sendDMFromProfile"],
        [data-testid="sendDMFromProfile"] + div > button {
            background-color: transparent !important;
            border-color: @color !important;
            
            &.r-jc7xae, &.r-pjtv4k {
                background-color: rgba(@color, .1) !important;
            }
            
            &, & > div, svg {
                color: @color !important;
            }
        }
        
        [data-testid$="-unfollow"] {
            border-color: @color !important;
            background-color: @color !important;
            
            &.r-qqmkd0 {
                background-color: #f4212e !important;
                border-color: #f4212e !important;
            }
            
            &, & > div, svg {
                color: white !important;
            }
        }
    }
    
    nav:has([data-testid="AppTabBar_Home_Link"]) { 
        & > a:has(.r-b88u0q) svg,
        .r-b88u0q {
            color: @color !important;
        }
    }
}

Reviews

No reviews yet.