Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Twitter の UI の配色を元に戻すユーザースタイル
/* ==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.6
@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="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;
}
/* 画像上のマージンが少なすぎる問題に対処 (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;
}
/* その他の真っ黒なボタン */
/* フォールバックとして */
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;
}
}
@Hayao0819

This comment has been minimized.

Copy link

@Hayao0819 Hayao0819 commented Aug 12, 2021

ありがとうございます助かりました

@Hashibutogarasu

This comment has been minimized.

Copy link

@Hashibutogarasu Hashibutogarasu commented Aug 12, 2021

これはすごく使える...

@kazuki111

This comment has been minimized.

Copy link

@kazuki111 kazuki111 commented Aug 12, 2021

感謝します!

@koaf

This comment has been minimized.

Copy link

@koaf koaf commented Aug 12, 2021

使わせていただきます!

@1234Yosuke

This comment has been minimized.

Copy link

@1234Yosuke 1234Yosuke commented Aug 12, 2021

これは助かる!!使わせていただきます!!

@pota-gon

This comment has been minimized.

Copy link

@pota-gon pota-gon commented Aug 12, 2021

素晴らしいですね。他にもいくつか、フォローボタンがあったので対応してみました。
良かったらお使いください。

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

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

This comment has been minimized.

Copy link

@pota-gon pota-gon commented Aug 12, 2021

私のコードが少しおかしかったので修正です。以下を追記してもらえれば大丈夫です。
(話題を検索のフォローでアカウントを選択したときに背景が青くなってしまっていました。)

div[aria-label="タイムライン: タイムラインを検索"] div[role="button"][data-testid="UserCell"]:hover {
    background-color: rgba(0, 0, 0, 0.03) !important;
}
@tsukumijima

This comment has been minimized.

Copy link
Owner Author

@tsukumijima tsukumijima commented Aug 12, 2021

素晴らしいですね。他にもいくつか、フォローボタンがあったので対応してみました。
良かったらお使いください。

私のコードが少しおかしかったので修正です。以下を追記してもらえれば大丈夫です。
(話題を検索のフォローでアカウントを選択したときに背景が青くなってしまっていました。)

追記させていただきました!ありがとうございます!

@Sango916

This comment has been minimized.

Copy link

@Sango916 Sango916 commented Aug 12, 2021

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

@Sango916

This comment has been minimized.

Copy link

@Sango916 Sango916 commented Aug 13, 2021

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

@ichii731

This comment has been minimized.

Copy link

@ichii731 ichii731 commented Aug 13, 2021

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

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

@tsukumijima

This comment has been minimized.

Copy link
Owner Author

@tsukumijima tsukumijima commented Aug 13, 2021

@Sango916

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

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

@pota-gon

This comment has been minimized.

Copy link

@pota-gon pota-gon commented Aug 14, 2021

『通知』などのユーザーのリンクを 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;
}
@JESSYxIWFP

This comment has been minimized.

Copy link

@JESSYxIWFP JESSYxIWFP commented Aug 14, 2021

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

/* 話題を検索(虫眼鏡版) */
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"],

@tsukumijima

This comment has been minimized.

Copy link
Owner Author

@tsukumijima tsukumijima commented Aug 14, 2021

@JESSYxIWFP

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

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

@JESSYxIWFP

This comment has been minimized.

Copy link

@JESSYxIWFP JESSYxIWFP commented Aug 14, 2021

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

@contextnerror

This comment has been minimized.

Copy link

@contextnerror contextnerror commented Sep 1, 2021

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.
Screen Shot 2021-09-01 at 2 26 38 AM
Screen Shot 2021-09-01 at 2 27 02 AM
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.

@tsukumijima

This comment has been minimized.

Copy link
Owner Author

@tsukumijima tsukumijima commented Sep 1, 2021

@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.

@contextnerror

This comment has been minimized.

Copy link

@contextnerror contextnerror commented Sep 1, 2021

It works! Thank you very much.

@contextnerror

This comment has been minimized.

Copy link

@contextnerror contextnerror commented Oct 9, 2021

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:

Screen Shot 2021-10-08 at 11 47 44 PM

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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment