ブログデザイン備忘録～はてなブログテーマの自作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%);
  }
}