Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save contextnerror/fd5f23560db92f41d15e40d84406c269 to your computer and use it in GitHub Desktop.
Save contextnerror/fd5f23560db92f41d15e40d84406c269 to your computer and use it in GitHub Desktop.
Changes twitter UI to the old colors. By tsukumijima, modified to work on the English website.
/* ==UserStyle==
@name TwitterRevertColoring(English)
@description Changes twitter UI to the old colors. By tsukumijima, modified to work on the English website.
@namespace https://gist.github.com/contextnerror
@updateURL https://gist.githubusercontent.com/contextnerror/fd5f23560db92f41d15e40d84406c269/raw/TwitterRevertColoring.user.css
@author tsukumi
@version 1.3.6
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://twitter.com/"), url-prefix("https://mobile.twitter.com/") {
/* Style overwrite */
/* Color definition */
:root {
--color-blue: rgb(29, 161, 242);
--color-blue-hover: rgb(26, 145, 218);
--color-white: rgb(255, 255, 255);
--color-white-hover: rgba(29, 161, 242, 0.1);
}
/* Each button on the main menu */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(2) {
font-weight: 700;
}
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(2).r-b88u0q {
color: var(--color-blue) !important;
}
nav[role="navigation"][aria-label="Primary"] > * > div.r-1ydqjzz {
background-color: var(--color-white-hover) !important;
}
/* Each icon of each button in the main menu */
/* Since there was no CSS class that met the conditions, I pushed the SVG path as a clue */
/* Home */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M22.58 7.35L12.475 1.897c-.297-.16-.654-.16-.95 0L1.425 7.35c-.486.264-.667.87-.405 1.356.18.335.525.525.88.525.16 0 .324-.038.475-.12l.734-.396 1.59 11.25c.216 1.214 1.31 2.062 2.66 2.062h9.282c1.35 0 2.444-.848 2.662-2.088l1.588-11.225.737.398c.485.263 1.092.082 1.354-.404.263-.486.08-1.093-.404-1.355zM12 15.435c-1.795 0-3.25-1.455-3.25-3.25s1.455-3.25 3.25-3.25 3.25 1.455 3.25 3.25-1.455 3.25-3.25 3.25z"],
/* Search for topics */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M20.585 9.468c.66 0 1.2-.538 1.2-1.2 0-.662-.54-1.2-1.2-1.2h-3.22l.31-3.547c.027-.318-.07-.63-.277-.875-.206-.245-.495-.396-.822-.425-.65-.035-1.235.432-1.293 1.093l-.326 3.754H9.9l.308-3.545c.06-.658-.43-1.242-1.097-1.302-.665-.05-1.235.43-1.293 1.092l-.325 3.754h-3.33c-.663 0-1.2.538-1.2 1.2 0 .662.538 1.2 1.2 1.2h3.122l-.44 5.064H3.416c-.662 0-1.2.54-1.2 1.2s.538 1.202 1.2 1.202h3.22l-.31 3.548c-.057.657.432 1.24 1.09 1.3l.106.005c.626 0 1.14-.472 1.195-1.098l.327-3.753H14.1l-.308 3.544c-.06.658.43 1.242 1.09 1.302l.106.005c.617 0 1.142-.482 1.195-1.098l.325-3.753h3.33c.66 0 1.2-.54 1.2-1.2s-.54-1.202-1.2-1.202h-3.122l.44-5.064h3.43zm-5.838 0l-.44 5.063H9.253l.44-5.062h5.055z"],
/* Search for topics (magnifying glass version)) */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M22.06 19.94l-3.73-3.73C19.38 14.737 20 12.942 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c1.943 0 3.738-.622 5.21-1.67l3.73 3.73c.292.294.676.44 1.06.44s.768-.146 1.06-.44c.586-.585.586-1.535 0-2.12zM11 17c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6z"],
/* Notifications */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M21.697 16.468c-.02-.016-2.14-1.64-2.103-6.03.02-2.533-.812-4.782-2.347-6.334-1.375-1.393-3.237-2.164-5.242-2.172h-.013c-2.004.008-3.866.78-5.242 2.172-1.534 1.553-2.367 3.802-2.346 6.333.037 4.332-2.02 5.967-2.102 6.03-.26.194-.366.53-.265.838s.39.515.713.515h4.494c.1 2.544 2.188 4.587 4.756 4.587s4.655-2.043 4.756-4.587h4.494c.324 0 .61-.208.712-.515s-.005-.644-.265-.837zM12 20.408c-1.466 0-2.657-1.147-2.756-2.588h5.512c-.1 1.44-1.29 2.587-2.756 2.587z"],
/* Messages */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M11.55 12.082c.273.182.627.182.9 0L22 5.716V5.5c0-1.24-1.01-2.25-2.25-2.25H4.25C3.01 3.25 2 4.26 2 5.5v.197l9.55 6.385z"],
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M13.26 13.295c-.383.255-.82.382-1.26.382s-.877-.127-1.26-.383L2 7.452v11.67c0 1.24 1.01 2.25 2.25 2.25h15.5c1.24 0 2.25-1.01 2.25-2.25V7.47l-8.74 5.823z"],
/* Bookmarks */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M19.9 23.5c-.2 0-.3 0-.4-.1L12 17.9l-7.5 5.4c-.2.2-.5.2-.8.1-.2-.1-.4-.4-.4-.7V5.6c0-1.2 1-2.2 2.2-2.2h12.8c1.2 0 2.2 1 2.2 2.2v17.1c0 .3-.2.5-.4.7 0 .1-.1.1-.2.1z"],
/* Lists */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M19.75 2H4.25C3.013 2 2 3.013 2 4.25v15.5C2 20.987 3.013 22 4.25 22h15.5c1.237 0 2.25-1.013 2.25-2.25V4.25C22 3.013 20.987 2 19.75 2zM11 16.75H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h4c.414 0 .75.336.75.75s-.336.75-.75.75zm6-4H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75zm0-4H7c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h10c.414 0 .75.336.75.75s-.336.75-.75.75z"],
/* Profile */
nav[role="navigation"][aria-label="Primary"] > * > div > div:nth-child(1) > svg > g > path[d="M12.225 12.165c-1.356 0-2.872-.15-3.84-1.256-.814-.93-1.077-2.368-.805-4.392.38-2.826 2.116-4.513 4.646-4.513s4.267 1.687 4.646 4.513c.272 2.024.008 3.46-.806 4.392-.97 1.106-2.485 1.255-3.84 1.255zm5.849 9.85H6.376c-.663 0-1.25-.28-1.65-.786-.422-.534-.576-1.27-.41-1.968.834-3.53 4.086-5.997 7.908-5.997s7.074 2.466 7.91 5.997c.164.698.01 1.434-.412 1.967-.4.505-.985.785-1.648.785z"]
{
color: var(--color-blue) !important;
}
/* Addressed an issue with too small margins on images (thanks misoni) */
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]) > div {
margin-top: 12px !important;
}
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]) > div > div.r-1s2bzr4 {
margin-top: 0px !important;
}
/* Other black buttons */
/* As a fallback */
div[role="button"][style="background-color: rgb(15, 20, 25);"] {
background-color: transparent !important;
border-color: var(--color-blue) !important;
}
div[role="button"][style="background-color: rgb(15, 20, 25);"] > div {
color: var(--color-blue) !important;
}
div[role="button"].r-oelmt8 {
background-color: var(--color-white-hover) !important;
border-color: var(--color-blue) !important;
}
div[role="button"].r-oelmt8 > div {
color: var(--color-blue) !important;
}
/* Other black link buttons */
/* ご存知ですか?など */
a[role="link"][target="_blank"][style="background-color: rgb(15, 20, 25);"] {
background-color: var(--color-blue) !important;
}
a[role="link"][target="_blank"].r-oelmt8:hover {
background-color: var(--color-blue-hover) !important;
}
/* Upper right button of the generic modal */
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"],
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"] {
background-color: var(--color-blue) !important;
}
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"] > div,
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"] > div {
color: var(--color-white) !important;
}
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div[role="button"]:hover,
div[aria-modal="true"][aria-labelledby="modal-header"][role="dialog"] > div > div > div > div > div > div:nth-child(3) > div > div[role="button"]:hover {
background-color: var(--color-blue-hover) !important;
}
/* User action button */
div[role="button"][data-testid="userActions"] {
border-color: var(--color-blue) !important;
}
div[role="button"][data-testid="userActions"] > div > svg {
color: var(--color-blue) !important;
}
div[role="button"][data-testid="userActions"]:hover {
background-color: var(--color-white-hover) !important;
}
/* DM send (profile) button */
div[role="button"][data-testid="sendDMFromProfile"] {
border-color: var(--color-blue) !important;
}
div[role="button"][data-testid="sendDMFromProfile"] > div > svg {
color: var(--color-blue) !important;
}
div[role="button"][data-testid="sendDMFromProfile"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Notification on button */
div[role="button"][aria-label="Turn on Tweet notifications"] {
border-color: var(--color-blue) !important;
}
div[role="button"][aria-label="Turn on Tweet notifications"] > div > svg {
color: var(--color-blue) !important;
}
div[role="button"][aria-label="Turn on Tweet notifications"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Edit profile button */
a[role="link"][href="/settings/profile"] {
border-color: var(--color-blue) !important;
}
a[role="link"][href="/settings/profile"] > div {
color: var(--color-blue) !important;
}
a[role="link"][href="/settings/profile"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Topic follow button */
div[role="button"][id^="topic-follow-button"] {
background-color: transparent !important;
border-color: var(--color-blue) !important;
}
div[role="button"][id^="topic-follow-button"] > div {
color: var(--color-blue) !important;
}
div[role="button"][id^="topic-follow-button"]:hover {
background-color: var(--color-white-hover) !important;
}
div[role="button"][id^="topic-follow-button"].r-1niwhzg.r-1ets6dv {
background-color: var(--color-blue) !important;
}
div[role="button"][id^="topic-follow-button"].r-1ets6dv > div {
color: var(--color-white) !important;
}
div[role="button"][id^="topic-follow-button"].r-12d83nn:hover {
background-color: var(--color-blue-hover) !important;
}
div[role="button"][id^="topic-follow-button"].r-12d83nn:hover > div {
color: var(--color-white) !important;
}
/* Follow topic */
div[data-testid="placementTracking"] div[role="button"][aria-label^="Follow Topic"] {
border-color: var(--color-blue) !important;
}
div[data-testid="placementTracking"] div[role="button"][aria-label^="Follow Topic"] > div {
color: var(--color-blue) !important;
}
/* Following topic */
div[data-testid="placementTracking"] div[role="button"][aria-label^="Following"] {
background-color: var(--color-blue) !important;
}
div[data-testid="placementTracking"] div[role="button"][aria-label^="Following"] > div {
color: var(--color-white) !important;
}
/* Topic (not interested) */
div[aria-label="Timeline: Topics"] div[role="button"][id^="topic-follow-button"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Follow button */
div[role="button"][data-testid$="-follow"] {
background-color: transparent !important;
border-color: var(--color-blue) !important;
}
div[role="button"][data-testid$="-follow"] > div,
div[role="button"][data-testid$="-follow"] > span > span > span {
color: var(--color-blue) !important;
}
div[role="button"][data-testid$="-follow"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Following button */
div[role="button"][data-testid$="-unfollow"] {
background-color: var(--color-blue) !important;
border: none !important;
}
div[role="button"][data-testid$="-unfollow"] > div,
div[role="button"][data-testid$="-unfollow"] > span > span > span {
color: var(--color-white) !important;
}
div[role="button"][data-testid$="-unfollow"]:hover {
background-color: var(--color-blue-hover) !important;
}
/* Confirmation dialog approval button */
div[role="button"][data-testid="confirmationSheetConfirm"] {
background-color: var(--color-blue) !important;
margin-right: 0px;
}
div[role="button"][data-testid="confirmationSheetConfirm"] > div {
color: var(--color-white) !important;
}
div[role="button"][data-testid="confirmationSheetConfirm"]:hover {
background-color: var(--color-blue-hover) !important;
}
/* Followed lists */
div[aria-label^="Timeline: Your Lists"] div[role="button"]:hover {
background-color: var(--color-white-hover) !important;
}
div[aria-label^="Timeline: Suggested Lists"] div[role="button"]:hover {
background-color: var(--color-white-hover) !important;
}
/* Sugested lists (beginning) */
div[aria-label="Timeline: Suggested Lists"] h1[role="heading"] + div + div a {
background-color: var(--color-blue) !important;
}
div[aria-label="Timeline: Suggested Lists"] h1[role="heading"] + div + div a:hover {
background-color: var(--color-blue-hover) !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment