Custom Color Twitter by nukumori-org

Custom Color Twitter screenshot
Homepage Install Get Stylus Write a review

Details

Authornukumori-org

LicenseCC BY-NC-SA - Creative Commons Attribution-NonCommercial-ShareAlike

Created

Updated

Categorytwitter

Statistics

Learn how we calculate statistics in the FAQ.

Total views891

Total installs4618

Weekly installs162

Description

customize your twitter color

How to use it

  1. Install it.
  2. Choose default blue on twitter.com from “More” on right side menu > “Display”.
  3. Choose your favorite color on Stylus options.

If strangely colored you can fix it!

  1. Click ⚙ button of Custom Color Twitter.
  2. Click "Custom Color" palette
  3. 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

History

Daily snapshots of style statistics.

2021-10-172021-10-312021-11-142021-11-282021-12-122021-12-262022-01-082022-01-222022-02-052022-02-192022-03-052022-03-18Date0.007.5015.0022.5030.0037.5045.0052.5060.00Daily countDaily installsDaily updatesDaily views
2021-10-172021-11-022021-11-172021-12-022021-12-172022-01-012022-01-172022-02-012022-02-162022-03-032022-03-18Date0.00180.00350.00530.00700.00880.001050.001230.001400.00Total countTotal installsTotal views

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);
}

}

Reviews

No reviews yet.