Recolors some elements to make them fit the color palette.
Tumblr Color Tweaks by wac
Details
Authorwac
LicenseGNU GPLv3
Categorytumblr
Created
Updated
Size12 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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...