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.0.0
@license		MIT
==/UserStyle== */

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

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

/* 色の定義 */
:root {
    --color-red: rgb(220, 30, 41);
    --color-blue: rgb(29, 161, 242);
    --color-blue-hover: rgb(26, 145, 218);
    --color-white: rgb(255, 255, 255);
    --color-white-hover: rgba(15, 20, 25, 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;
}

/* メインメニューの各ボタンの各アイコン */
/* 条件に合う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="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;
}

/* ユーザーアクションボタン */
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;
}

/* 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"][aria-label="ツイート通知をオンにする"] {
    border-color: var(--color-blue) !important;
}
div[role="button"][aria-label="ツイート通知をオンにする"] > div > svg {
    color: var(--color-blue) !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;
}

/* プロフィールの保存ボタン */
div[role="button"][data-testid="Profile_Save_Button"] {
    background-color: var(--color-blue) !important;
}
div[role="button"][data-testid="Profile_Save_Button"] > div {
    color: var(--color-white) !important;
}
div[role="button"][data-testid="Profile_Save_Button"]:hover {
    background-color: var(--color-blue-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"][data-testid$="-follow"] {
    background-color: transparent !important;
    border-color: var(--color-blue) !important;
}
div[role="button"][data-testid$="-follow"] > div {
    color: var(--color-blue) !important;
}
div[role="button"][data-testid$="-follow"]:hover {
    background-color: var(--color-blue) !important;
}
div[role="button"][data-testid$="-follow"]:hover > div {
    color: var(--color-white) !important;
}

/* フォロー中ボタン */
div[role="button"][data-testid$="-unfollow"] {
    background-color: var(--color-blue) !important;
    border: none !important;
}
div[role="button"][data-testid$="-unfollow"] > div {
    color: var(--color-white) !important;
}
div[role="button"][data-testid$="-unfollow"]:hover {
    background-color: var(--color-red) !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;
}

}