このはてなブログをダークモードに対応してみた。

このはてなブログには「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デザインのテーマに変えるのもだるいし、どーしますかね。