PCやスマホなどの「ダークモード」に、STORK19を最低限対応させるCSSをご紹介。
下記CSSを子テーマのstyle.cssや【外観 > カスタマイズ > 追加CSS】などに追記していただくことで対応可能です。
STORK19をダークモード対応にするCSS
/* ダークモード用CSS */
@media (prefers-color-scheme: dark) {
body,
#container,
#inner-content,
#breadcrumb {
background-color:#111!important;
}
.related_article__link,
#footer,
#navbtn_menu_content {
background: #222!important;
}
#authorbox {
border-color: #444!important;
}
.archives-list.card-list a {
box-shadow: 0 0 1px #ccc;
}
body,
body a,
#sidebar1,
.widget:not(.widget_text) a {
color: #fff!important;
}
}
非常に短いCSSですが、これだけで最低限対応ができます。
ただし細かな検証はできていません。
表現が不十分な箇所もあるかもしれませんが、その際は都度内容をアップデートしていきたいと思います。
簡単に解説
@media (prefers-color-scheme: dark) {
}
@media (prefers-color-scheme: dark) {}の中に書いたコードがダークモード時に適用されるCSSです。
端末側でダークモードなのかそうでないのかによってここのCSSが適用されるかどうかが決まります。すなわち、端末側でダークモード設定になっていなければここのCSSは適用されません。
サイト側でのダークモード対応というのが必要なのかどうかは議論の余地がありますが、その分、他のカラーリング設定の調整も必要になるので必然的にコード量が増えてしまいます。
ですのでSTORK19をはじめ、当テーマでは現在のところ導入を見送っています。
それでも対応しておきたいという場合は、この記事のカスタマイズを参考にしていただければと思います。
や
