Tumblr Color Tweaks by wac
Details
Authorwac
LicenseGNU GPLv3
Created
Updated
Categorytumblr
Statistics
Learn how we calculate statistics in the FAQ.
Total views
Total installs
Weekly installs
Weekly updates
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:
-
[New] 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
Source code
/* ==UserStyle==
@name Tumblr Color Tweaks
@version 20230327.23.33
@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 */
.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 */
/*---------------------------------*/
.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;
}
/* 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));
}
}
@-moz-document regexp("https:\\/\\/www\\.tumblr\\.com\\/blog\\/.*\\/blaze") {
/* Blaze */
.N9v9O {
align-items: center;
background: linear-gradient(211.29deg, rgb(var(--red)) 16.78%, rgb(var(--orange)) 49.4%, rgb(var(--yellow)) 80.04%);
color: rgb(var(--white));
}
}
@-moz-document domain("www.tumblr.com") {
/* For extensions */
/* Shinigami Eyes */
body {
--ShinigamiEyesTFriendly: rgb(var(--green)) !important;
--ShinigamiEyesTransphobic: rgb(var(--red)) !important;
}
.shinigami-eyes-theme-purple-yellow {
--ShinigamiEyesTFriendly: rgb(var(--purple)) !important;
--ShinigamiEyesTransphobic: rgb(var(--yellow)) !important;
}
.shinigami-eyes-theme-cyan-orange {
--ShinigamiEyesTFriendly: rgb(var(--blue)) !important;
--ShinigamiEyesTransphobic: rgb(var(--orange)) !important;
}
/* xKit */
figure.accesskit-visible-alt-text figcaption {
/* Makes the background of the alt text the same as the background of an ask/answer.
This is because the default behaviour is very hard to read on palettes such as Ghost */
background-color: rgba(var(--black), .07);
}
body.accesskit-blue-links article a[target="_blank"][href^="https://t.umblr.com/redirect"],
body.accesskit-blue-links article a[target="_blank"][href^="https://href.li/"] {
/* This is more of a personal choice, because I use a custom palette with a red accent but I want my links to be blue */
color: rgb(var(--blue));
}
}