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

}

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

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 として反映しました！

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