ChromeでTwitterを黒く染める
Boltzmanです.
目が痛い. 近頃とにかく目が痛い.
授業でpdfの授業資料を使うようになってから, 学校にノートPCを毎日持っていくようになったのだが,
そうなるといよいよ一日中PCに向かうことになるのでとにかく目が痛い.
目が痛い状態でさらに授業の課題をやらないといけないとなると, もう大変つらい.
正直勘弁してほしい.
ということでとりあえずPCのハイコントラストの設定を変更. 全体的に黒っぽくなるようにした.
Microsoft Edgeはこれで素直に色が黒くなってくれる.
しかしChromeは色が変わらない.
Chromeのプラグインのハイコントラストを入れる.
ところがこいつがあまりtwitterと相性がよくない.
そのうえ, そのままにしておいてほしい画像データなども一括で色を変えてしまう.
どうしたものかと思い, 他に良いものは無いかと調べて出てきたのが「Stylish」.
まあとりあえずこいつで何とかしよう, と考えた.
正直, ページのレイアウトもいじりたいのであればStylishはかなり強力であるが,
ただ色を黒くしたいだけなのであれば正直ブラウザ側で色の解釈を変えてほしいのだが, 今回はStylishでやってみた.
如何せん, このコードを書いている最中も目が痛くて仕方がなかったので, とにかく適当. 動けばそれでいい.
色を指定できればところかまわず指定しちゃう見境なしなコードになった.
<br />
html, body, #doc, #page-outer{<br />
height: auto;<br />
}<br />
#body{<br />
background-color: #000;<br />
}</p>
<p>#page-outer{<br />
background-color: #000;<br />
}</p>
<p>.global-nav-inner{<br />
background-color: #000;<br />
}<br />
.wrapper{<br />
background-color: #000;<br />
}<br />
.content-main{<br />
background-color: #000;<br />
color: white;<br />
}</p>
<p>.top-timeline-tweetbox .timeline-tweet-box .tweet-form.condensed .tweet-box{<br />
background-color: #000;<br />
}</p>
<p>.global-nav .search-input{<br />
background-color: #000;<br />
color: #fff;<br />
}</p>
<p>.tweet{<br />
background-color: #000;<br />
}<br />
.tweet:hover{<br />
background-color: #000;<br />
}<br />
.fullname{<br />
color: yellow;<br />
}<br />
a, .btn-link, .btn-link:focus, .icon-btn, .pretty-link b, .pretty-link:hover s, .pretty-link:hover b, .pretty-link:focus s, .pretty-link:focus b, .metadata a:hover, .metadata a:focus, .account-group:hover .fullname, .account-group:focus .fullname, .account-summary:focus .fullname, .message .message-text a, .stats a strong, .plain-btn:hover, .plain-btn:focus, .dropdown.open .user-dropdown.plain-btn, .open > .plain-btn, #global-actions .new:before, .module .list-link:hover, .module .list-link:focus, .stats a:hover, .stats a:hover strong, .stats a:focus, .stats a:focus strong, .profile-modal-header .fullname a:hover, .profile-modal-header .username a:hover, .profile-modal-header .fullname a:focus, .profile-modal-header .username a:focus, .find-friends-sources li:hover .source, .stream-item a:hover .fullname, .stream-item a:focus .fullname, .stream-item .view-all-supplements:hover, .stream-item .view-all-supplements:focus, .tweet .time a:hover, .tweet .time a:focus, .tweet .details.with-icn b, .tweet .details.with-icn .Icon, .tweet .tweet-geo-text a:hover, .stream-item:hover .original-tweet .details b, .stream-item .original-tweet.focus .details b, .stream-item.open .original-tweet .details b, .client-and-actions a:hover, .client-and-actions a:focus, .dismiss-btn:hover b, .tweet .context .pretty-link:hover s, .tweet .context .pretty-link:hover b, .tweet .context .pretty-link:focus s, .tweet .context .pretty-link:focus b, .list .username a:hover, .list .username a:focus, .list-membership-container .create-a-list, .list-membership-container .create-a-list:hover, .card .list-details a:hover, .card .list-details a:focus, .card .card-body:hover .attribution, .card .card-body .attribution:focus, .new-tweets-bar, .onebox .soccer ul.ticker a:hover, .onebox .soccer ul.ticker a:focus, .remove-background-btn, .stream-item-activity-notification .latest-tweet .tweet-row a:hover, .stream-item-activity-notification .latest-tweet .tweet-row a:focus, .stream-item-activity-notification .latest-tweet .tweet-row a:hover b, .stream-item-activity-notification .latest-tweet .tweet-row a:focus b{<br />
color: yellow;<br />
}</p>
<p>.DashboardProfileCard{<br />
background-color: #000;<br />
}<br />
.DashboardProfileCard-name{<br />
color: yellow;<br />
}<br />
.u-textUserColor{<br />
color: yellow !important;<br />
}<br />
.module .flex-module{<br />
background-color: #000;<br />
}<br />
.Trends{<br />
background-color: #000;<br />
}<br />
.u-linkComplex:hover{<br />
color: yellow;<br />
}</p>
<p>.home-tweet-box{<br />
background-color: #000;<br />
}<br />
.new-tweets-bar{<br />
background-color: #000;<br />
}<br />
.new-tweets-bar:hover{<br />
background-color: #000;<br />
}</p>
<p>
まあ自分でなんとなく納得ができる範囲で作ったので, 大変汚いし, 不適切な部分が多々あるし, 不完全だったりもしています.
そもそも色の解釈を変更できないのかなー
#fffを#000に, #000をyellowにとか
また調べてみませう.
#追記20160603#
この記事投稿した2分後に「Change Colors」といういい感じのプラグインを見つけました.
サイトによっては表示がややバグりますが, 気になるようならそのページだけ無効化してStylishでいじるというのもよいかもしれません.