Custom Color Twitter by nukumori-org

Details
Authornukumori-org
LicenseCC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlike
Created
Updated
Categorytwitter
Description
customize your twitter color
How to use it
- Install it.
- Choose default blue on twitter.com from “More” on right side menu > “Display”.
- Choose your favorite color on Stylus options.
If strangely colored you can fix it!
- Click ⚙ button of Custom Color Twitter.
- Click "Custom Color" palette
- Click "<->" button and show "HEX / hex".
Notes
Support us
🍺 If you like this, you can buy us a beer!
Changes
- v2.0.5 2022/8/17 adjust mod background color to visible on dark
- v2.0.4 2022/8/13 adjust mod colors
- v2.0.3 2022/8/11 mod icon hover, improve mod search input, improve mod buttons/labels on dim/dark
- v2.0.0 2022/8/7 add mod background color you can switch on/off on the style settings
- v1.0.7 2022/6/11 mod selected tweet outline on navigation by keyboard(j, k)
- v1.0.6 2022/6/10 mod thread vertical line color on Dim and Dark
- v1.0.5 2022/6/5 mod twitter icon color on settings to follow the pallet, mod thread vertical line color
- v1.0.4 2022/5/29 adjust color, colors on hover some
- v1.0.3 2022/5/23 fix mod icon color on "Customize your view" dialog on dim/dark
- v1.0.2 2022/5/23 mod icon and radio button color on "Customize your view" dialog on narrow
- v1.0.1 2022/5/23 fix mod icon color on "Customize your view" dialog
- v1.0.0 2022/5/22 add mod more and more, navigation, icons, dim and dark
- v0.0.2 2022/5/15 add mod borders, improve mod colors
- v0.0.1 2021/10/17 1st release
Source code
/* ==UserStyle==
@name Custom Color Twitter
@description Can customize color of Twitter on the web
@namespace twitter.com
@version 2.0.5
@author nukumori.org
@homepageURL https://nukumori.org/
@license CC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlike
@preprocessor uso
@var color customcolor "Custom Color" #82c1da
@var select bg-selected "Background" {
"Custom": "var(--custom-default-transparent-lighter, none)",
"None": "none"
}==/UserStyle== */
@-moz-document domain("twitter.com") {
/* Custom Color Twitter by nukumori.org licensed on CC BY-NC-SA */
/* Created: October 17, 2021 */
/* Updated: Aug 17, 2022 */
/* ==================== */
/* common */
/* ==================== */
/* twitter logo on initial loading */
[role="heading"] svg.r-jwli3a,/* dim header twitter icon */
.r-13gxpu9,
.r-1n1174f,
.r-1cvl2hr .r-jwli3a,
[role="heading"] .r-13v1u17,
[role="heading"] .r-1cvl2hr {
color: var(--custom-default-normal);
}
/* Twitter icon on customize popup */
div[style*="https://pbs.twimg.com/profile_images/"][style*="zRim1x6M_"] {
filter: grayscale(1) brightness(75%) contrast(2);
}
/* ==================== */
/* Blue(Default) */
/* ==================== */
:root {
--custom-default-dark: /*[[customcolor]]*/ff;
--custom-default-light: /*[[customcolor]]*/88;
--custom-default-transparent: /*[[customcolor]]*/44;
--custom-default-transparent-dark: /*[[customcolor]]*/66;
--custom-default-transparent-light: /*[[customcolor]]*/33;/* added for customize */
--custom-default-transparent-lighter: /*[[customcolor]]*/17;/* added for customize */
--custom-default-normal: /*[[customcolor]]*/cc;
}
/* for dim/dark */
body:not([style*="background-color: rgb(255, 255, 255"]):not([style*="background-color: #FFFFFF"]) {
--custom-default-transparent: rgba(255, 255, 255, .05);
}
/* tab border */
.r-1pbtemp {
border-right-color: var(--custom-default-normal);
}
/* left sidebar button/top tab/radio button outside effect background hover */
/* *** also used as common color *** */
[data-testid^="AppTabBar_"]:hover > .r-zv2cs0,
[data-testid^="AppTabBar_"] + a:hover > .r-zv2cs0,/* Profile */
.r-1peqgm7 {
background-color: var(--custom-default-transparent);
}
[data-testid^="AppTabBar_"]:active > .r-zv2cs0,
[data-testid^="AppTabBar_"] + a:active > .r-zv2cs0,/* Profile */
.r-r18ze4 {
background-color: var(--custom-default-transparent-dark);
}
/* button background */
[style*="background-color: rgb(29, 155, 240)"],/* ### inline... need important */
.r-l5o3uw {
background-color: var(--custom-default-normal) !important;
}
/* button hover - dark; tweet button on left, done on color setting */
.r-1vtznih {
background-color: var(--custom-default-dark);
}
/* button active (top tweet area tweet button) */
.r-yuvema {
background-color: var(--custom-default-normal);
}
/* input - poll */
.r-vhj8yc,
/* outlined button outline */
.r-p1n3y5,
[style="border-color: rgb(29, 155, 240);"] {
border-color: var(--custom-default-normal) !important;
}
/* input selected - poll */
.r-9cip40 {
box-shadow: var(--custom-default-normal) 0 0 0 1px;
}
/* settings bar (class is universal just style is different)*/
.css-1dbjc4n.r-1awozwy.r-18u37iz.r-16y2uox.r-hdaws3[style="background-color: rgb(142, 205, 248);"],
.css-1dbjc4n.r-1awozwy.r-18u37iz.r-16y2uox.r-4v7adb[style="background-color: rgb(142, 205, 248);"] {
background-color: var(--custom-default-light) !important;
}
/* settings bar thumb (class is universal just style is different) */
.css-1dbjc4n.r-sdzlij.r-7dny9e.r-tbmifm.r-16eto9q[style="background-color: rgb(142, 205, 248);"],/* added20210813 for Settings >... Display*/
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"],/* dim */
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"],/* dark */
[role="dialog"] .css-1dbjc4n[style="background-color: rgb(142, 205, 248);"] {
background-color: var(--custom-default-light) !important;
}
[role="radiogroup"] [title="Blue heart"]:before {
content: "Altanative";
background-color: var(--custom-default-normal);
color: var(--custom-default-normal);
}
/* wheel */
svg > circle[style*="stroke: rgb(29, 155, 240)"] {
stroke: var(--custom-default-normal) !important;
}
/* ==================== */
/* Add-on */
/* ==================== */
/* text, icon */
[style="color: rgb(29, 155, 240);"],/* inline... need important */
.r-1cvl2hr, /* icon: authorized user, tweet area */
.r-1n1174f /* text: link */ {
color: var(--custom-default-normal) !important;
}
/* button */
[role="button"][style*="background-color: rgb(15, 20, 25);"],/* "Follow" button on "Discover new Lists" */
[role="link"].r-sdzlij.r-peo1c {
background-color: var(--custom-default-normal) !important;
}
[aria-label*="Follow"][role="button"] .r-18jsvk2 {/* "Follow" text inside follow button */
color: var(--custom-default-normal);
}
[aria-label*="Follow"][role="button"]:hover .r-18jsvk2 {/* "Follow" text inside follow button */
color: var(--custom-default-dark);
}
[role="link"].r-sdzlij.r-peo1c:hover,
[aria-label*="Follow"][role="button"]:hover {
background-color: var(--custom-default-light) !important;
}
/*** active ***/
[role="link"].r-sdzlij.r-peo1c:active,
[aria-label*="Follow"][role="button"]:active {
background-color: var(--custom-default-normal) !important;
}
/*** hover ***/
[aria-label*="Follow"][role="button"][data-testid*="unfollow"]:hover/* button - follow button on hover */ {
background-color: #fff !important;
border-color: var(--custom-default-dark) !important;
}
[role="button"].r-oelmt8:hover {/* "Follow" button on "Discover new Lists" */
background-color: var(--custom-default-dark) !important;
}
/* button/and icons on initial inline colors... */
[style*="background-color: rgb(249, 24, 128)"] {
background-color: var(--custom-default-normal) !important;
}
[style="color: rgb(249, 24, 128);"] {
color: var(--custom-default-light) !important;
}
/* icon/menu hover */
.r-1ydqjzz {
background-color: var(--custom-default-transparent) !important;
}
/* icon active */
.r-h9yrwi {
background-color: var(--custom-default-transparent-dark) !important;
}
/* right advertizement items */
.r-1hdo0pc,/* dark content tab */
.r-3al2xr,/* dim content tab */
.r-g6ijar,/* dim */
.r-1panhkp,/* hover */
.r-1218gd,/* hover*/
.r-1d6w8o1/* backgrounds */ {
/*background-color: var(--custom-default-transparent-light) !important;*/
background-color: var(--custom-default-transparent-lighter) !important;
border-color: var(--custom-default-transparent-light);/* ### 20220519 for right side content */
}
/* hover tweet */
.r-1cuuowz {
background-color: var(--custom-default-transparent-light) !important;
}
/* search input */
.r-1sw30gj {
background-color: var(--custom-default-transparent-dark);
}
/* <-/-> buttons on Explore tab */
a[role="link"][style*="background-color: rgb(15, 20, 25);"],/* black button - ex."change location" on explore */
[role="button"][style*="background-color: rgba(15, 20, 25, 0.75);"] {
background-color: var(--custom-default-normal) !important;
}
.r-19130f6,/* added in some reason */
a[role="link"].r-oelmt8,/* black button on hover - ex."change location" on explore */
[role="button"].r-pjtv4k/* hover */ {
background-color: var(--custom-default-dark) !important;
color: #fff !important;/* to distinguish text */
}
[role="alertdialog"] [role="button"].r-pjtv4k/* button on dialog when dim/dark */ {
background-color: var(--custom-default-transparent-light) !important;
}
/*** borders ***/
.r-1d6w8o1/* sidebar what's happening/who to follow block w/ background color */ {
border-color: var(--custom-default-transparent);
}
.r-1ets6dv,/* search input */
.r-jxzhtn {
border-color: var(--custom-default-transparent);
}
.r-140t1nj/* tottom border */ {
border-bottom-color: var(--custom-default-transparent);
}
.r-j5o65s {
border-bottom-color: var(--custom-default-transparent);
}
.r-c554xy,/* ex. input for new message search people */
.r-1dgieki {
border-top-color: var(--custom-default-transparent);
}
/* bellow tweet input */
.r-1sw30gj {
background-color: var(--custom-default-transparent);
}
/* for borders */
.r-18bvks7,/* dim */
.r-1kqtdi0/* dark */ {
border-color: var(--custom-default-transparent-dark);
}
.r-1ila09b,/* dim */
.r-1igl3o0/* dark */ {
border-bottom-color: var(--custom-default-transparent-dark);
}
.r-kuekak,/* dim */
.r-gu4em3/* dark */ {
background-color: var(--custom-default-transparent-dark);
}
/* borders/with fast twitter */
.r-1uusn97, .r-qo02w8 {
border-color: var(--custom-default-transparent-dark) !important;
}
/* tweet bottom */
.r-1kfrmmb,/* dim */
.r-2sztyj/* dark */ {
border-top-color: var(--custom-default-transparent-dark) !important;
}
/* analytics popup */
.ep-Cta .ep-CtaQPv1 {
border-color: var(--custom-default-normal);
background-color: var(--custom-default-normal);
}
.ep-Cta .ep-CtaQPv1:hover {
border-color: var(--custom-default-dark);
background-color: var(--custom-default-dark);
}
/* *** menu mod *** */
/* icons color */
svg.r-18jsvk2 {
color: var(--custom-default-dark) !important;
}
svg.r-vlxjld,/* dark */
svg.r-1nao33i /* dim */ {
color: var(--custom-default-dark) !important;
}
:root{
--custom-link-color: var(--custom-default-normal);
}
/* for dim/dark */
body:not([style*="background-color: rgb(255, 255, 255"]):not([style*="background-color: #FFFFFF"]) {
--custom-link-color: var(--custom-default-dark);
}
/* main navigation text on left color */
header [role="navigation"] .css-16my406/* normal */,
header [role="navigation"] .r-b88u0q .css-16my406/* active */ {
color: var(--custom-link-color) !important;
}
/* text inside badge of icons */
header [role="navigation"] .r-jwli3a .css-16my406/* normal */,
header [role="navigation"] .r-b88u0q .r-jwli3a .css-16my406/* active */ {
color: #fff !important;
}
/* =================== */
/* =================== */
/* added for customize */
/* =================== */
/* =================== */
/* nav hover */
.r-1ydqjzz {
background-color: var(--custom-default-transparent);
}
/* tweet hover */
.r-1panhkp {
background-color: var(--custom-default-transparent-light);
}
/* right side */
.r-x572qd/* normal */ {
/*background-color: var(--custom-default-transparent) !important;*//* need important to override .r-1d6w8o1 */
background-color: var(--custom-default-transparent-lighter) !important;/* need important to override .r-1d6w8o1 */
}
.r-1d6w8o1/* normal */ {
border-color: var(--custom-default-transparent-light);
}
.r-1hdo0pc/*dark override*/ {
/*background-color: var(--custom-default-transparent-dark) !important;*/
background-color: var(--custom-default-transparent-light) !important;
}
/*** dialog **/
[role="dialog"] label+div>svg.r-l5o3uw{
background-color: transparent;
}
.r-1roi411/* dark */,
.r-126aqm3/* dim */ {
border-color: var(--custom-default-transparent-dark);
}
[role="radiogroup"] .r-2tyz2o.r-tmtnm0 .r-l5o3uw {
background-color: transparent !important;
}
[style*="background-color: rgb(15, 20, 25);"] {
background-color: var(--custom-default-dark) !important;
}
[role="link"].r-1sw30gj {
background-color: var(--custom-default-light) !important;
}
/* twitter icon follow custom color */
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-12181gd/* normal */,
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-172uzmj/* dim/dark */ {
background-color: var(--custom-default-normal);
}
:is(.r-1p1nz3t, .r-1ifxtd0) [data-testid="tweet"] .css-1dbjc4n.r-18u37iz .css-1dbjc4n.r-1adg3ll.r-bztko3 .r-desppf:last-child {
mix-blend-mode: lighten;
}
/*** icon bottom on tweets ***/
[role="group"] .r-14j79pv {
color: var(--custom-default-light);
}
[role="group"] .r-1bwzh9t,/* dark */
[role="group"] .r-115tad6/* dim */ {
color: var(--custom-default-normal);
}
/*** active ***/
.r-1a7u7ko/* dark menu */ {
background-color: var(--custom-default-light);
}
.r-eg8bge,/* dim? */
.r-1auu7ko/* dark */ {
background-color: var(--custom-default-transparent);
}
/*** hover background ***/
.r-g2wdr4/* dim insde sub menu, dark right side */ {
background-color: var(--custom-default-transparent-dark);
}
/*** search/label ***/
.r-z32n2g/* dark */,
.r-8erxvq/* dim */ {
background-color: var(--custom-default-transparent-light);
}
/* text */
.r-115tad6/* dim */,
.r-1bwzh9t/* dark */ {
color: var(--custom-default-normal);
}
.r-90j39::placeholder/* dim */,
.r-13rk5gd::placeholder/* dark */ {
color: var(--custom-default-light);
}
/*** adjustment ***/
[data-testid="sidebarColumn"] .r-g2wdr4/* dark right side */ {
/*background-color: var(--custom-default-transparent-light);*/
background-color: var(--custom-default-transparent-lighter);
border-color: var(--custom-default-transparent-light);
}
/*** something inline like thumb on content on narrow ***/
[style*="background-color: rgb(142, 205, 248);"] {
background-color: var(--custom-default-light) !important;
}
/*** active load more tweet ***/
.r-h1syrq/* default */,
.r-q773ft/* dim */ {
background-color: var(--custom-default-transparent-dark);
}
/*** thread vertical line ***/
.r-1bimlpy/* default */,
.r-157er04/* dim */ {
background-color: var(--custom-default-transparent-light);
}
.r-1bnu78o/* dark */ {
background-color: var(--custom-default-transparent-dark);
}
/*** selected tweet by jk key scroll ***/
.r-ukrunq {
box-shadow: var(--custom-default-dark) 0 0 0 2px inset;
}
/*** dev list active ***/
.r-14tof1o,/* dark */
.r-1nvv5a4,/*dim*/
.r-vqp9x9/* default */ {
background-color: var(--custom-default-transparent-dark);
}
/*** unselected hovered radio padding ***/
/* tbd:
.r-lh8awq {
background-color: var(--custom-default-transparent-dark);
}*/
/*** mod background color ***/
:is(body[style*="background-color: rgb(0, 0, 0"], body[style*="background-color: #000000"]) :is(header, main) {
--custom-default-transparent-lighter: var(--custom-default-transparent-light);
}
header,
main {
background-color: /*[[bg-selected]]*/;
}
/* mod search input for mod background color... */
[data-testid="SearchBox_Search_Input_label"] {
/*background-color: var(--custom-default-transparent-light);*//* 20220811 */
border-radius: 24px;
}
[aria-label="Trending"] .r-14lw9ot:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*white*//*not serch filters area not radio button not icon */,
[aria-label="Trending"] .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
/*background-color: transparent;*/
background-color: #fff;
border-radius: 50px;
top: 6.5px;
height: 45px;
}
[aria-label="Trending"] .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
background-color: #000;
}
[aria-label="Trending"] form .r-14lw9ot:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*white*/ {
background-color: #fff;
border-radius: 8px;
top: 0;
height: auto;
}
[aria-label="Trending"] form .r-yfoy6g:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dim*/,
[aria-label="Trending"] form .r-kemksi:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf)/*dark*/ {
background-color: #000;
border-radius: 8px;
top: 0;
height: auto;
}
/* recober checkbox */
[aria-label="Trending"] .r-19wmn03:not(.r-le4sbl):not(.r-18yzcnr):not(.r-desppf):not(.r-1867qdf) {
top: 0;
height: 20px;
}
/*** icon hover ***/
.r-i49rur{
background-color: var(--custom-default-transparent-light);
}
/*** button on dim ***/
[role="alertdialog"] .r-1sw30gj[role="button"],
[data-testid="primaryColumn"] [data-testid="listCell"] .r-1sw30gj/* dim */ {
background-color: var(--custom-default-dark);
}
/* hover */
[role="alertdialog"] .r-jc7xae[role="button"],
[data-testid="primaryColumn"] [data-testid="listCell"] .r-jc7xae/* dim */ {
background-color: var(--custom-default-normal);
}
}