つれづれなる備忘録

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

ブログデザイン備忘録 ~ はてなブログテーマの自作6

 Boilerplateのscssファイルを変更して新しいブログテーマの作成を進めている。今回はダークモードのデザインを行った。

ダークモードの設定を行うには、

atatat.hatenablog.com

で紹介したようにCSSのメディアクエリで@media (prefers-color-scheme: dark){}とすればよく、あとは通常のCSSと同じ要領で背景色や文字色を設定すればよい。

基本的には、下記の配色をベースとした。

atatat.hatenablog.com

BoilerplateのSCSSには以下のコードを追記した。

@media (prefers-color-scheme: dark) {
 
 #container-inner,body{
  background-color:darkolivegreen;
 #top-box{
 color:cyan;
 a{color:cyan;}
 }
  }
  #box2{
    background:#67876A;
    color:gold;
    a{color:gold;}
    }

  .entry{
   background-color:darkkhaki;
   a{color:blue;}
   } 
 
 img {
    filter: contrast(85%) brightness(85%);
  }
}

デザインした結果は以下の通り。

"ダークモードのデザイン"
ダークモードのデザイン

またimg {filter: contrast(85%) brightness(85%); }とするとダークモード時に画像を少し暗くできる。

"画像の明るさ調整"
画像の明るさ調整