STORK19をダークモードに対応させるCSS - OPENCAGE
新テーマ「STORK19」はこちら!

STORK19をダークモードに対応させるCSS

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をはじめ、当テーマでは現在のところ導入を見送っています。

それでも対応しておきたいという場合は、この記事のカスタマイズを参考にしていただければと思います。

CHECK! OPENCAGEのアフィリエイトプログラムについて /

NEWバージョン!

究極のモバイルファースト
WPテーマ「STORK19」

ブログを書くのが楽しくなる仕掛けや機能がたっぷり!STORK19は読む人も書く人も快適なWordPressテーマです。

いさぎよく、シンプル。
WPテーマ「スワロー」

SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。

「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。