Skip to content

Tumblr Color Tweaks by wac

Screenshot of Tumblr Color Tweaks

Details

Authorwac

LicenseGNU GPLv3

Categorytumblr

Created

Updated

Size12 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Recolors some elements to make them fit the color palette.

Notes

Preview image description: Screenshot of Tumblr's Explore page on the Staff Picks tab, with the activity panel open.

  • Text: Includes gradient tags. Picture of tags coloured approximately like pride flags.
  • Text: Shinigami eyes extension test, red link, green link.
  • Text: And rainbow text (palette: pumpkin). "Welcome 2 da rawring 20s!" pictured with and without the style.

End of image description.

Currently recolors the following:

  • Dashboard view of people's blogs. Not just the posts, but the description background and so on.

  • Badges and SVGs: These are things like the note type (e.g. in activity, the little circle with the heart that says someone liked something)

  • Text colors: Only covers the text colors that you can add in the post editor

  • Gradient colors: For the gradient tags released for Pride a while ago.

  • The toggle for enabling/disabling the beta post editor.

  • The recommended tags on the Explore page, as well as the trending tags

  • The gradient background and text on the Tumblr ad-free settings page

For use with other extensions:

  • Shinigami Eyes colors for the following themes: default (red/green), purple/yellow, cyan/orange (using blue as cyan)
  • XKit alt text viewer background color, since it was hard to read the default with the Ghost palette

Note: Tumblr recently updated their messaging thing in a way that makes it unreadable when this style is on. I commented out the relevant section as a temporary fix, but so far it seems like Tumblr's new default behaviour already follows the color themes. Color me pleasantly surprised.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         Tumblr Color Tweaks
@version      20230811.00.00
@namespace    userstyles.world/user/wac
@description  Recolors some elements to make them fit the color palette.
@author       wac
@license      MIT

==/UserStyle== */
@-moz-document domain("www.tumblr.com") {
    /* Global */
    .FOqaP {
        /*Not sure why but the new post menu has the accent color for text? Which is weird on the true blue theme...*/
        color: rgb(var(--black))
    }
    
    
    .s0qqG {
        /* "You are using an unsupported browser" */
        background-color: rgb(var(--white));
        color: rgb(var(--black));
        border: 2px solid rgb(var(--yellow));
    }
    /* "Tumblr exclusive" button */
    .H4DuS .erLM8 {
        background-color: rgb(var(--blue));
        color: rgb(var(--white));
    }
    





    /*---------------------------------*/
    /*          Badges and SVGs        */
    /*---------------------------------*/
    /* Notes and reblog badges */
    .MFUX1:hover .qgvik [fill="#ffffff"] {
        fill: rgb(var(--secondary-accent));
    }

    .TZgeO.jdZxE [fill="#ffffff"],
    .TZgeO.jdZxE.WG8QO [fill="#ffffff"] {
        /* Looks awful with the Vampire palette */
        fill: rgb(var(--follow));
    }

    [fill="#ffffff"] {
        fill: rgb(var(--white));
    }
    [aria-label="Video Player"] [fill="#ffffff"] {
        fill: #ffffff;
    }
    [fill="#ff4930"],
    [fill="#FF4930"] {
        fill: rgb(var(--red));
    }
    [fill="#FF8A00"] {
        fill: rgb(var(--orange));
    }
    [fill="#00cf35"],
    [fill="#01CF35"] {
        fill: rgb(var(--green));
    }
    [fill="#00b8ff"],
    [fill="#00B8FF"] {
        fill: rgb(var(--blue));
    }
    [fill="#7c5cff"],
    [fill="#7C5CFF"] {
        fill: rgb(var(--purple));
    }
    [fill="#FF61CE"] {
        fill: rgb(var(--pink));
    }
    /* Other */
    .EvhBA.GTDnP [fill="#ffffff"] {
        fill: rgb(var(--white-on-dark));
    }
    /* Share badges */
    [style="background-color: rgb(255, 255, 255);"] {
        background-color: rgb(var(--white)) !important;
    }
    [fill="#000000"] {
        fill: rgb(var(--black));
    }
    [fill="#595959"] {
        fill: rgb(var(--black));
    }
    [fill="#3b5998"],
    [fill="#55acee"] {
        fill: rgb(var(--blue));
    }
    [fill="#bd081c"] {
        fill: rgb(var(--red));
    }
    /* Online indicator */
    .ErOUd {
        background-color: rgb(var(--green));
    }

    /*---------------------------------*/
    /*            Messaging            */
    /*---------------------------------
    temporarily disabled because tumblr updated their
    thing and now it's unreadable
    
    
    .RGQ9e [fill="#ffffff"],
    .dXzCH {
        fill: rgb(var(--white-on-dark));
        filter: drop-shadow(0px 0px 5px rgb(var(--navy)));
        color: rgb(var(--white-on-dark));
    }

    .cOy8n {
        background-color: rgb(var(--white));
    }

    #managed-icon__ellipsis,
    #managed-icon__arrow,
    #managed-icon__close {
        fill: rgb(var(--black));
    }

    .GCwhh svg {
        fill: rgba(var(--black), .7) !important;
    }

    .hpABw .vwvdr {
        background-color: rgb(var(--navy)) !important;
    }
    .kjUFb, .b7hYL {
        color: rgb(var(--white-on-dark)) !important;
    }
    

   



    /*---------------------------------*/
    /*         Gradient colors         */
    /*---------------------------------*/
    .d5ZGt, .oJTVB {
        /* Rainbow */
        background-image: linear-gradient(90deg, #000, #785017, rgb(var(--red)), rgb(var(--orange)), rgb(var(--yellow)), rgb(var(--green)), rgb(var(--blue)), rgb(var(--purple)));
    }
    .Si0tX, .WSuGf {
        /* Lesbian */
        background-image: linear-gradient(90deg, rgb(var(--red)), rgb(var(--orange)), rgb(var(--pink)), rgb(var(--purple)));
    }
    .I9Jxt, .JUs5Y {
        /* Gay (blue) */
        background-image: linear-gradient(90deg, rgb(var(--green)), rgb(var(--black)), rgb(var(--purple)));
    }
    .QrTcz, .Z0Apr {
        /* Bisexual */
        background-image: linear-gradient(90deg, rgb(var(--pink)), rgb(var(--purple)), rgb(var(--blue)));
    }
    .wwuCA, .cf8P9 {
        /* Transgender */
        background-image: linear-gradient(90deg, rgb(var(--blue)), rgb(var(--pink)), rgb(var(--black)), rgb(var(--pink)), rgb(var(--blue)));
    }
    .EfzaS, .XtFfb {
        /* Non-binary */
        background-image: linear-gradient(90deg, rgb(var(--black)), rgb(var(--yellow)), rgb(var(--purple)), rgb(var(--black)));
    }
    .iK3aH, .wDCa3 {
        /* Asexual */
        background-image: linear-gradient(90deg, rgb(var(--black)), rgb(var(--purple)));
    }
    .gpqeU, .g0GHd {
        /* Aromantic */
        background-image: linear-gradient(90deg, rgb(var(--green)), rgb(var(--black)));
    }
    .Jmqr5, .abB0A {
        /* Pansexual */
        background-image: linear-gradient(90deg, rgb(var(--pink)), rgb(var(--yellow)), rgb(var(--blue)));
    }
    
    #after-post-actions .MhNg6 .KcWiA {
        background-image: linear-gradient(180deg,hsla(0,0%,100%,.25) 0,RGB(var(--white)) 71.87%),linear-gradient(274.83deg,var(--green) 0,var(--blue) 22.92%,var(--purple) 42.71%,var(--pink) 60.42%,var(--orange) 81.25%,var(--yellow) 100%)
    }
    
    /*---------------------------------*/
    /*              Posts              */
    /*---------------------------------*/
    
    /* Link posts */
    .Sv170.POcHT .prqGC {
        background-color: rgba(var(--white), 0.4);
    } 
    .Sv170.POcHT .AO6cP{
        color: rgb(var(--black));
    }
    
    /*---------------------------------*/
    /*            Blog View            */
    /*---------------------------------*/
    .DCCfo.Hmu5M, .DCCfo.kXP4L {
        --blog-title-color: rgb(var(--white-on-dark)) !important;
        --blog-search-background-color: rgb(var(--white)) !important;
    }
    /* Have to handle it differently between these two, ugh */
    .DCCfo.Hmu5M { /* When on its own page */
        --blog-background-color: var(--navy) !important;
    }
    .DCCfo.kXP4L { /* When overlaid on top of the dash or whatever */
        --blog-background-color: rgb(var(--navy)) !important;
    }
    /* Make button legible */
    .nh7eU {
        color: rgb(var(--navy));
    }
}



@-moz-document url-prefix("https://www.tumblr.com/new"),
url-prefix("https://www.tumblr.com/edit"),
url-prefix("https://www.tumblr.com/reblog") {
    /* New post */
    
    .g3KgL,
    .g3KgL:hover {/* Beta post editor toggle */
        background-color: rgb(var(--purple));
        color: rgb(var(--navy));
    }
    .UZrDG.U_rPn {/* Beta post editor toggle */
        background-color: rgb(var(--green)) !important;
    }
    .g3KgL.bkzF7 {/* Beta post editor toggle */
        color: rgb(var(--navy));
    }
    /* HTML Editor */
    .block-editor-plain-text,
    .pkc2Y {
        background-color: rgb(var(--white));
        color: rgb(var(--black));
    }
}


@-moz-document url-prefix("https://www.tumblr.com/explore"),
url-prefix("https://www.tumblr.com/"),
url-prefix("https://www.tumblr.com/dashboard") {
    /* Explore page */
    .LnVVz .quD2R,
    .nKYyP .vT7_j li {
        /* Card - recommended and trending */
        background-color: rgba(var(--color), .25) !important;
        border-color: rgb(var(--color)) !important;
        color: rgb(var(--white-on-dark)) !important;
    }
    .nKYyP .vT7_j li::before {
        /* Number button - trending */
        background-color: rgb(var(--color)) !important;
        color: rgb(var(--navy));
        /* or white-on-dark */
    }
    .EvhBA.WdYx4 {
        /* Follow button - recommended */
        background-color: rgba(var(--color), .25) !important;

        color: rgb(var(--white-on-dark)) !important;
    }
    .jOrvN {
        /* Follow button text - recommended */
        color: rgb(var(--white-on-dark)) !important;
    }

    /* Explore page: Setting colours */
    .LnVVz:nth-of-type(7n+2),
    .nKYyP .vT7_j li[data-index="1"],
    .nKYyP .vT7_j li[data-index="8"] {
        --color: var(--red);
    }
    .LnVVz:nth-of-type(7n+3),
    .nKYyP .vT7_j li[data-index="2"] {
        --color: var(--orange);
    }
    .LnVVz:nth-of-type(7n+4),
    .nKYyP .vT7_j li[data-index="3"] {
        --color: var(--yellow);
    }
    .LnVVz:nth-of-type(7n+5),
    .nKYyP .vT7_j li[data-index="4"] {
        --color: var(--green);
    }
    .LnVVz:nth-of-type(7n+6),
    .nKYyP .vT7_j li[data-index="5"] {
        --color: var(--blue);
    }
    .LnVVz:nth-of-type(7n+7),
    .nKYyP .vT7_j li[data-index="6"] {
        --color: var(--purple);
    }
    .LnVVz:nth-of-type(7n+1),
    .nKYyP .vT7_j li[data-index="7"] {
        --color: var(--pink);
    }
}

@-moz-document regexp("https:\\/\\/www\\.tumblr\\.com\\/.*\\/queue"),
regexp("https://www.tumblr.com/blog/view/") {
    /* Queue */
    select {
        border: 2px solid rgb(var(--accent));
        background-color: rgba(var(--accent), 0.2);
        color: rgb(var(--accent));
        border-radius: 3px;
    }

    option {
        background-color: rgb(var(--white));
        color: rgb(var(--black));
    }
}

@-moz-document url-prefix("https://www.tumblr.com/settings/ad-free-browsing") {
    /* Tumblr ad-free */
    .xu8W2 {
        background-image: linear-gradient(167.96deg, rgb(var(--purple)), rgb(var(--pink)))
    }

    .o9Dc0 {
        color: rgb(var(--yellow));
    }
    .UX_E2,
    .RmcFk {
        color: rgb(var(--navy));
    }
    .CxLjL,
    .CxLjL > span,
    .Z8Ux2 {
        color: rgb(var(--black));
    }
    .qjTo7 {
        background-color: rgb(var(--white));
    }
    .YUhwz {
        background-color: rgb(var(--purple));
        color: rgb(var(--navy...

Reviews

No reviews yet.