Twitter の UI の配色を元に戻すユーザースタイル

TwitterRevertColoring.user.css

/* ==UserStyle==
@name			TwitterRevertColoring
@description	Twitter の UI の配色を元に戻すユーザースタイル
@namespace		https://gist.github.com/tsukumijima
@updateURL		https://gist.github.com/tsukumijima/931905c4ed3f181ce926730463a29d80/raw/TwitterRevertColoring.user.css
@author			tsukumi
@version		1.3.9
@license		MIT
==/UserStyle== */

@-moz-document url-prefix("https://twitter.com/"), url-prefix("https://mobile.twitter.com/") {

/* スタイルの上書き */

/* 色の定義 */
: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);
}

/* メインメニューの各ボタン */
nav[role="navigation"][aria-label="メインメニュー"] > * > div > div:nth-child(2) {
    font-weight: 700;
}
nav[role="navigation"][aria-label="メインメニュー"] > * > div > div:nth-child(2).r-b88u0q {
    color: var(--color-blue) !important;
}
nav[role="navigation"][aria-label="メインメニュー"] > * > div.r-1ydqjzz {
    background-color: var(--color-white-hover) !important;
}

/* メインメニューの各ボタンの各アイコン */
/* 条件に合う CSS クラスがなかったので SVG のパスを手がかりにゴリ押し */
/* ホーム */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* 話題を検索 */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* 話題を検索（虫眼鏡版） */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* コミュニティ */
nav[role="navigation"][aria-label="メインメニュー"] > * > div > div:nth-child(1) > svg > g > path[d="M9.273 12.148l-.502.387c-1.804 1.27-3.107 3.099-3.769 5.155H3.286c-1.419 0-2.549-1.325-2.232-2.735.405-1.805 1.467-3.43 3.031-4.55.961.764 2.178 1.227 3.502 1.227.203 0 .406-.011.598-.032.203-.021.395-.054.587-.097.149.225.319.44.501.645zM7.511 7.477c0 .882.16 1.733.459 2.518-.128.011-.256.022-.384.022-.779 0-1.516-.226-2.135-.624-.246-.151-.48-.323-.683-.527-.192-.194-.363-.398-.523-.624-.427-.646-.673-1.41-.673-2.238C3.572 3.797 5.376 2 7.586 2c.705 0 1.377.183 1.964.517-1.27 1.269-2.039 3.023-2.039 4.96zM20.723 22H8.521c-1.371 0-2.481-1.233-2.259-2.62.363-2.22 1.603-4.244 3.489-5.58l.776-.606c1.15.843 2.551 1.336 4.084 1.336h.01c1.533 0 2.934-.493 4.084-1.336l.787.606c1.876 1.336 3.116 3.36 3.479 5.58.222 1.387-.877 2.62-2.248 2.62zm-.646-14.523c0 1.528-.63 2.916-1.655 3.906-.278.28-.598.527-.939.732h-.011c-.577.366-1.206.624-1.9.753-.32.054-.651.086-.982.086-.459 0-.907-.054-1.334-.172-.673-.161-1.292-.452-1.836-.839-.278-.204-.534-.43-.769-.678-.48-.495-.875-1.087-1.132-1.743-.267-.624-.406-1.323-.406-2.045 0-1.539.63-2.927 1.655-3.917C11.75 2.592 13.106 2 14.59 2c3.021 0 5.487 2.454 5.487 5.477z"],
/* 通知 */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* メッセージ */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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="メインメニュー"] > * > 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"],
/* ブックマーク */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* リスト */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],
/* プロフィール */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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;
}

/* その他の真っ黒なボタン */
/* フォールバックとして */
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;
}
    
/* その他の真っ黒なリンクボタン */
/* ご存知ですか？など */
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;
}

/* 汎用的なモーダルの右上にあるボタン */
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;
}

/* ユーザーアクションボタン */
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送信（プロフィール）ボタン */
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;
}

/* 通知オンボタン */
div[role="button"][aria-label="ツイート通知をオンにする"] {
    border-color: var(--color-blue) !important;
}
div[role="button"][aria-label="ツイート通知をオンにする"] > div > svg {
    color: var(--color-blue) !important;
}
div[role="button"][aria-label="ツイート通知をオンにする"]:hover {
    background-color: var(--color-white-hover) !important;
}

/* プロフィールを編集ボタン */
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;
}

/* トピックのフォローボタン */
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;
}

/* トピックをフォロー */
div[data-testid="placementTracking"] div[role="button"][aria-label^="トピックをフォロー "] {
    border-color: var(--color-blue) !important;
}
div[data-testid="placementTracking"] div[role="button"][aria-label^="トピックをフォロー "] > div {
    color: var(--color-blue) !important;
}

/* トピックをフォロー中 */
div[data-testid="placementTracking"] div[role="button"][aria-label^="フォロー中 "] {
    background-color: var(--color-blue) !important;
}
div[data-testid="placementTracking"] div[role="button"][aria-label^="フォロー中 "] > div {
    color: var(--color-white) !important;
}

/* トピック(興味なし) */
div[aria-label="タイムライン: トピック"] div[role="button"][id^="topic-follow-button"]:hover {
    background-color: var(--color-white-hover) !important;
}

/* フォローボタン */
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;
}

/* フォロー中ボタン */
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;
}

/* 確認ダイヤログの承認ボタン */
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;
}

/* リストのフォロー */
div[aria-label^="タイムライン: 自分のリスト"] div[role="button"]:hover {
    background-color: var(--color-white-hover) !important;
}
div[aria-label^="タイムライン: おすすめリスト"] div[role="button"]:hover {
    background-color: var(--color-white-hover) !important;
}

/* おすすめリスト（はじめる） */
div[aria-label="タイムライン: おすすめリスト"] h1[role="heading"] + div + div a {
    background-color: var(--color-blue) !important;
}
div[aria-label="タイムライン: おすすめリスト"] h1[role="heading"] + div + div a:hover {
    background-color: var(--color-blue-hover) !important;
}

}

ですが、適用先を変更してしまうと、更新する度に設定し直さないと行けませんね…

コードをお借りして独立したChrome拡張を作ってみました

https://0115765.com/samples/build.zip

@Sango916

AndroidのKiwi Browserにて、適用先をmobile.twitter.comにすることで動作することを確認致しました！

報告ありがとうございます！試しにスタイルの適用先に mobile.twitter.com を追加してみました。

『通知』などのユーザーのリンクを hover した場合、div が span タグになるのでその対応です。
下記設定でリスト以外のフォローは意図した動きになると思います。
リストは CSSが設定しずらいのと仕様が良く分かっていないので対応してませんが良ければお使いください。

/* 色の定義 */
:root {
    --color-black: rgb(15, 20, 25);
    --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);
    --color-red: rgb(244, 33, 46);
    --color-red-hover: rgb(220, 30, 41);
    --color-border: rgb(207, 217, 222);
}

/* フォロー */
div[aria-label^="フォロー "] {
    background-color: var(--color-white) !important;
    border-color: var(--color-border) !important;
}
div[aria-label^="フォロー "]:hover {
    background-color: var(--color-blue-hover) !important;
}
div[aria-label^="フォロー "] > div, div[aria-label^="フォロー "] > span {
    color: var(--color-black) !important;
}
div[aria-label^="フォロー "]:hover > div, div[aria-label^="フォロー "]:hover > span {
    color: var(--color-white) !important;
}

/* フォロー中 */
div[aria-label^="フォロー中 "] {
    background-color: var(--color-blue) !important;
}
div[aria-label^="フォロー中 "] > div, div[aria-label^="フォロー中 "] > span {
    color: var(--color-white) !important;
}

/* フォロー解除 */
div[aria-label^="フォロー中 "]:hover {
    background-color: var(--color-red-hover) !important;
}

/* プロフィール(保存・生年月日) */
div[data-testid="Profile_Save_Button"],
div[data-testid="confirmationSheetConfirm"] {
    background-color: var(--color-blue) !important;
}
div[data-testid="Profile_Save_Button"]:hover,
div[data-testid="confirmationSheetConfirm"]:hover {
    background-color: var(--color-blue-hover) !important;
}

/* おすすめリスト(はじめる) */
div[aria-label="タイムライン: おすすめリスト"] h1[role="heading"] + div + div a {
    background-color: var(--color-blue) !important;
}
div[aria-label="タイムライン: おすすめリスト"] h1[role="heading"] + div + div a:hover {
    background-color: var(--color-blue-hover) !important;
}

話題を検索のアイコンが普段は「＃」なのですが、ブラウザの幅を短くしたとき？虫眼鏡タイプになることがありまして、そのときに選択したとき色が黒のままだったので自分なりに調べてみました。おそらくこれで合ってると思うのでお知らせしておきます。

/* 話題を検索(虫眼鏡版) */
nav[role="navigation"][aria-label="メインメニュー"] > * > 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"],

@JESSYxIWFP

話題を検索のアイコンが普段は「＃」なのですが、ブラウザの幅を短くしたとき？虫眼鏡タイプになることがありまして、そのときに選択したとき色が黒のままだったので自分なりに調べてみました。おそらくこれで合ってると思うのでお知らせしておきます。

そういえばそうでしたね…失念していました。ありがとうございます！！

こちらこそ素敵なものを公開してくださって、ありがとうございました♪

Hello, I seem to have found a glitch. When a twitter user is mentioned in a profile or tweet, the follow button text is the wrong color.


I don't know why it does this, or how to fix it...I'd be very grateful if you knew how to make it work.

@contextnerror
I'm surprised that people from overseas are using it. Thank you.
Oops, I forgot to fix it. Updated to 1.3.6. It probably be fixed.

It works! Thank you very much.

Hello again,
I noticed another black button today in the home feed. I couldn't get it to show up again with the language set to Japanese, but the English version looks like this:

I've included the code for the button below. Hopefully it will be helpful for finding a solution.

<div class="css-1dbjc4n r-18u37iz r-1h0z5md r-1no09lo">
    <div role="button" tabindex="0" class="css-18t94o4 css-1dbjc4n r-42olwf r-sdzlij r-1phboty r-rs99b7 r-peo1c r-1ps3wis r-1ny4l3l r-1guathk r-o7ynqc r-6416eg r-lrvibr" style="width: auto; background-color: rgb(15, 20, 25);">
        <div dir="auto" class="css-901oao r-1awozwy r-jwli3a r-6koalj r-18u37iz r-16y2uox r-37j5jr r-a023e6 r-b88u0q r-1777fci r-rjixqe r-bcqeeo r-q4m81j r-qvutc0">
            <span class="css-901oao css-16my406 css-bfa6kz r-poiln3 r-a023e6 r-rjixqe r-bcqeeo r-qvutc0">
                <span class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">Turn on notifications
                </span>
            </span>
        </div>
    </div>
</div>

以前のUIが好きだったのでこのスタイルシートを愛用させていただいているのですが、「画像上のマージンが少なすぎる問題に対処」という所でトレンド一覧のマージンも変更されてしまっていることに気付きました。

手元の環境では:not([data-testid="trend"])を追加することで直りました。
お時間のある時に追加していただけると助かります🙇

/* 画像上のマージンが少なすぎる問題に対処 (thanks misoni) */
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]):not([data-testid="trend"]) > div {
    margin-top: 12px !important;
}
[aria-labelledby*="id__"]:not(article):not([data-testid="card.wrapper"]):not([data-testid="trend"]) > div > div.r-1s2bzr4 {
    margin-top: 0px !important;
}

@fus1ondev ありがとうございます！1.3.8 として反映しました！

お返事が遅くなってすみません、動作確認できました。こちらこそ素早い対応ありがとうございます！