いろいろなサイトを拡張機能Stylishでダークモードにしてみる

この記事を読むのに必要な時間は推定で最大約25分9秒で、速読ですとその半分ぐらいです。

メモを残しておくべきだった……

ダークモード表示に対応していないWebサイトを見ていると、目が疲れるなと思うようになってきたことに歳を感じてしまいます。目の疲れを軽減するべく、ブラウザの拡張機能で勝手に表示を変えてしまおうというわけで2024年後半から「Stylish」を使っていたんですよね。しかし、2025年1月12日に突然機能しなくなって何故だろうと思ったら、拡張機能「Stylish」の破損が原因でした。なんで破損したのかは不明。仕方なく修復を実行したらこれまで作成してきた設定がすべて消滅……えぇっ⁉

というわけでメモを残しておかないとダメだなということで、再作成しながらメモを残していきます。「Stylish」に設定のエクスポートとインポートが見当たらないのがつらいんですけれど……。だからメモを取っておかないといけないわけで💦

ダークモードにしているWebサイトの設定メモ

表示を完全にダークモードにしているわけではないので、手抜きにより見づらい表示になる部分もありますが、そこは妥協の産物ですのであらかじめご了承ください。

順次再設定をしてメモを公開していく予定。日付は最終更新日です。

AFP BB News

2025-01-13

body
{color:white; background:black;}

ASCII

2025-01-21

body,
#mainC
{color:white; background:black;}

#twitter-widget-0,
.ranking,
#sideR
{display:none !important;}

blockquote
{color:black; background:skyblue;}

Bloomberg

2025-01-13

body,
article,
article .body-copy > p,
.lede-text-only__highlight ,
.main-column
{color:white; background:black;}

.body-copy > p > a
{color:yellow;}
 
article .abstract__item > .abstract__item-text
{color:gray;}

CNET

2025-01-19

body
{color:white; background:black;}

.leaf-headline-ttl,
#NWrelart\:Body > p
{color:white !important;}

#editor_recommend li > a,
.story-rank > a
{color:gray;}

.gdpr_area_inner,
#article_under_nllink,
.right-info-block > .item
{display:none;}

DAILY GADGET

2025-01-13

body,
div#main,
h1.entry-title
{color:white; background:black;}

div.blog-card-title a
{color:yellow;}

div.blog-card-excerpt
{color:silver;}

FNN

2025-01-13

body,
div.article-header-info,
div.article-header-info__attr a,
.article-header-info__author-ttl,
h1.article-header-info__ttl,
.article,
.article-body > p
{color:white; background:black;}

.m-breadcrumb__list {
background:lightgoldenrodyellow;}

a > strong,
div.article-body a
{color:yellow;}

div.article-body > a
{color:blue;}

#cx-section-module
{display:none;}

Fly Team

2025-01-13

body,
section.section-frame,
article.article h2
{color:white; background:black;}

Forbes

2025-01-19

body
{color:white; background:black;}

.article-tit,
.section-side-related
{color:white !important;}

a
{color:yellow !important;}

.header_fixed .gnav__list-item > a,
.header .gnav__list-item > a
{color:blue !important;}

.breadcrumb__item > span,
.meta > .date,
.sp-none .js-favorite-author,
.sp-none .js-favorite-article,
.side-articles-list__item .date
{color:silver !important;}

.sp-none #twitter
{background:skyblue;}

.articles-list-pager__item > a
{background:gray;}

.side-articles-list__item .tit
{color:silver !important;}

Gigazine

2025-01-27

body,
.preface,
#URLClip
{color:white !important; background:black;}

.preface a
{color:yellow;}

#donate_footer
{display:none !important;}

b > a
{color:yellow !important;}

#URLClip
{color:blue !important;}

.preface > b
{color:red;}

grape

2025-01-28

body
{color:white; background:black;}

p > a
{color:yellow !important;}

.entry_title > p
{color:silver !important;}

.blogcard .title
{color:silver;}

.blogcard span
{color:gray !important;}

blockquote > p
{color:black;}

GIZMODO

2025-01-31

body,
article.p-post,
div.p-archive
{color:white; background:black;}

.p-post-contentLink .p-post-contentLinkDescription > a
{color:gray;}

.p-archive-cardItem .p-archive-cardTitle,
.p-archive-cardItem time
{color:silver;}

blockquote > p
{color:black;}

div.s-body-ranking
{display:none;}

.emphasis li,
.emphasis > p
{color:
black;}

LIFE HACKER

2025-01-13

body,
div.block_lBlock__cnfyl,
h1.article_pArticle_Title__XxTCi,
div.article_pArticle_Body__KWzIr
{color:white; background:black;}

div.textblock
{color:white; background:gray !important;}

h3
{color:red !important;}

h4
{color:skyblue !important;}

p.articles_pArticles_ItemTitle__QNr_b
{color:yellow;}

div.article_pArticle_mailMagazine__kIZaC,
div.regular_sRegular__rYPPa
{display:none;}

NHK

2025-01-13

body,
#content
{color:white; background:black;}

.Notifications__entryTitle
{color:yellow;}

PRESIDENT

2025-01-17

body
{color:white; background:black;}

h4
{color:skyblue !important;}

div.information,
div.sub-banner,
div.latest-issue,
iframe
{display:none;}


p > a
{color:yellow !important;}

.kakomi2
{color:black; background:gray;}

railf

2025-01-13

body,
div#wrapper,
div.contentinner
{color:white; background:black;}

div.mt-image-caption-div,
div#box_date_small small,
div.right_etc_title
{color:gray;}

td a
{color:yellow !important;}

td.left_title
{display:none;}

h3.list-title,
div.list-title h3
{color:silver;}

div.list-caption
{color:gray;}

div.calendar
{color:black; background:white;}

div.calendar a
{color:skyblue !important;}

Reuters

2025-01-13

body
{color:white; background:black;}

.text__heading_article__3WgTF,
.article-body__element__2p5pI > .text__text__1FZLe
{color:yellow;}

.body__full_width__ekUdw
{color:white;}

.date-line__date___kNbY
{color:silver;}

TRILL

2025-01-13

body,
div.trill-description
{color:white; background:black;}

li.articleDetail-RelatedTags_Item a
{color:skyblue;}

iframe
{display:none;}

WIRED

2025-01-30

header,
div.aspect-ratio--overlay-container,
div.ContentHeaderAccreditation-lfctVB,
div.ContentHeaderDek-bIqFFZ,
div.ArticlePageContentBackGround-cNiFNN,
div.ArticlePageContentBackGround-cNiFNN p
{color:white; background:black;}

h1
{color:red !important;}

h2
{color:skyblue !important;}

div.BaseWrap-sc-gjQpdd a,
p > a
{color:yellow !important;}

div.ContentCardEmbedDek-bA-DKch
{color:white !important;}

.etVsnJ content-header__accreditation
{color:silver;}

.VideoFigure-eayQIa
{display:none;}

.TagCloudLink-kvjZFu > .BaseWrap-sc-gjQpdd
{color:blue;}

カクヨム

2025-01-18

作品の各話の表示は公式の設定でダークモードにできるんだけど、ほかはなぜかライトモードのみなので設定を作成💦

body
{color:white; background:black}

section#trends a
{color:yellow !important;}

.isPC .widget-mediaHeading h2 .widget-mediaHeading-label, .isPC .widget-mediaHeading h2 .widget-mediaHeading-title,
#page-top #explore ul a
{color:gray;}

.isPC .widget-workBox .widget-workBox-titleLabel
{color:yellow;}

.isPC .widget-workBox.show-lastReadAt .widget-workBox-lastReadAt
{color:white; background:navy;}

div.widget-workBox
{background:black;}

div.widget-workBox-catchphrase a,
h4.widget-workCatchphraseForNext-title a
{color:skyblue !important;}

#page-top #readingHistories-workList .widget-workBox
{background:black;}

div#shareButtons,
div.pickupLink,
div#corporateCounter
{display:none;}

.LayoutItem_layoutItem__cl360 .ButtonAppearance_buttonAppearance__bQQjV
{color:blue;}

マイナビ

2025-02-04

body
{color:white; background:black;}

.c-button
{color:white;}

.articleRelated_postList_node .articleRelated_postList_nodeCatch,
h3 > span.bold
{color:silver;}

.articleAuthor_nameHead,
.author__txt,
h2, .article-box > p,
.bold,
.article-box
{color:black;}

日本経済新聞

2025-01-17

body
{color:white; background:black;}

div.container_cdx5k2y,
div.container_c6c1uvu,
#k-rtoaster-campaign
{display:none;}

産経新聞

2025-01-13

body
{color:white; background:black;}

.article-headline
{color:white;}

.article-middle-headline
{color:silver;}

div.lazyload-wrapper,
div.subscribe-container,
div.sns-container
{display:none;}

読売新聞

2025-01-13

body
{color:white; background:black;}

div.fn-sidebar-important-contents
{display:none;}

朝日新聞

2025-01-13

body,
div.y_Qv3 h1
{color:white; background:black;}

a.eWgMZ,
div.AH27z ul li a
{color:yellow;}

.nfyQp .AH27z li a
{color:yellow;}

div.w8Bsl
{background:black;}

ul.ListBlock a
{color:white;}

.Brsji dl.Gox12 dd p a
{color:silver;}

dl#AccessTop_list dd p a
{color:silver;}

div.Pd4of
{display:none;}

毎日新聞

2025-01-16

body,
article.news
{color:white; background:black;}

p.cat-title a,
section.related-list a,
.list-box h3,
figcaption
{color:silver !important;}

.title-page,
#articledetail-body > p
{color:white !important;}

h2
{color:red !important;}

東京新聞

2025-01-15

body,
.block
{color:white; background:black;}

div.image
{border-color:black;}

div.cmp-bnr001
{display:none;}

東洋経済

2025-01-19

body,
div.article-body-inner,
div.article-body-inner p
{color:white; background:black;}

div.genre-ranking-article li.no-icon a,
ul.js-mw-related li.no-icon a,
span.ttl
{color:gray;}

div.member-paid-articles,
#offer_a6ec8ee3fb1fbb797626-0
{display:none;}

a > strong
{color:yellow;}

.author-list > a
{color:gray;}

乗りものニュース

2025-01-14

body,
div#main-column
{color:white; background:black;}

span.social-comment-count
{color:black;}

div#writer-profile h2
{color:silver;}

span.text
{color:silver;}

div.article-latest li a
{color:gray;}

ul.side-social-count
{display:none;}

#writer-profile > p
{color:gray;}

コメント