このはてなブログには「Nishikino」というテーマを適用しています。あれからWindows 10のぱちょこんでダークモードにして動作確認してるわけですが。
トップページはこんな感じ。
記事ページはこんな感じ。
はてなブログには複数のCSSが適用されているので、何が有効なのか難しかったです。こういう時、Google Chromeのデベロッパーツールが頼りです。
background-color と color を逆の色にすれば基本的にOKです。
目次のCSSもカスタマイズしているので、そのCSSも調整する必要があります。
ul.table-of-contents{
background: #fffcff; /*背景色*/
border:solid 1px #fcf;
padding: 0.5em;
margin: 1.5em 0em;
}
.table-of-contents:before{
content: ":::: I N D E X ::::";
display: block;
text-align: center;
font-weight:bold;
color:deeppink;
margin-bottom:1em;
padding-bottom:0.5em;
border-bottom: dotted 2px #fcf;
}
.table-of-contents li{
margin-left:2em;
}
.table-of-contents a:link{
text-decoration:none;
color:#999;
}
.table-of-contents a:hover{
text-decoration:underline;
}
デザイン＞カスタマイズ＞デザインCSS に以下のコードを貼り付けました。
@media (prefers-color-scheme: dark) {
html,body {
background-color: #333;color:#fff;
}
.btn, .entry-header .entry-header-menu a, .comment-box .leave-comment-title, .hatena-module-search-box .search-module-button,
#top-box .breadcrumb, pre, blockquote,ul.table-of-contents {
color: #fff;
background-color: #444!important;
}
.btn a:hover,
.entry-header .entry-header-menu a:hover,
.comment-box a:hover, .leave-comment-title a:hover,
.hatena-module-search-box a:hover, .search-module-button a:hover,
{
background-color: #999!important;
background:#999!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,#box2 .hatena-module-title a,.page-archive .archive-entries .date a{
color:#fff;
}
ul.table-of-contents li a:link, ul.table-of-contents a:visited{
color:#fff!important
}
}
しかし、どうしても［編集］ボタンとか［検索］ボタンとか［コメントを書く］ボタンに触れたときの背景色が変えられずにいます。
残念ながら使ってるテーマはレスポンシブWebデザインじゃないので、スマホバージョンを別途いぢる必要があるんですよね。
今更レスポンシブWebデザインのテーマに変えるのもだるいし、どーしますかね。
