つれづれなる備忘録

日々の発見をあるがままに綴る

ブログデザイン備忘録~ダークモード対応

今回は本ページをダークモード対応にしてみたので、それを紹介したい。

Webページをダークモード対応させるにはCSSのデザインにメディアクエリ「prefers-color-scheme」を用いて設定する。:CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点 | コリス

具体的には以下のように、ダークモードになった場合の背景色や文字色を設定する。

@media (prefers-color-scheme: dark) {

  .entry{
   background-color:darkkhaki;
   } 
  .entry-content a{
   color:blue;
   }
  img {
    filter: grayscale(30%);
  }
}

今回はお試しで記事本体部分の背景色(background-color)を白から少し暗い色、リンク文字(color)の黄緑が見にくいので青に変更するようにした。 (本格的にダークモードのページにするには配色などカラーデザインをもう少し検討したい)

どの部分の背景色や文字色を変更するかはセレクタで指定する必要があるが、はてなブログのHTML構造は はてなブログのHTML構造(idとクラス)一覧図 - Plain【カスタマイズ用】はてなブログのHTML構造まとめ - 【ちゃんこめBlog】インド在住OLの雑記ブログを参考にするとよい。

記事本体だけでなくサイドバー部分も変更するにはidで#contentなどを指定する。

各OSでダークモードを指定して本ページを閲覧すると、以下のようにデザインが変更されていることがわかると思うが、Windows 10以外で試していないのでOSによってうまく動作しないかもしれない。

"ダークモード時のページ"
ダークモード時のページ

Windows 10のダークモード切替は、デスクトップで右クリックして個人用設定-色-色を選択するで設定する。 Windows 10に真の「ダークモード」が登場。アプリだけでなく全体を黒基調にできる! | できるネット