サイトやブログをダークモードに対応させよう

Pocket

最近様々なサービスで黒を基調とした画面配色に切り替えられるダークモードが採用されていますよね。

CSSでは以下の指定を行うことでOSでダークモードを指定していると、サイトをダークモードに切り替えることが可能となります。

@media (prefers-color-scheme: dark) {
  body {
    background-color: #111;
    color: #fff;
  }
}

対応ブラウザは以下の通りです。

Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox Android Opera Android iOS Safari
× ×

 

またこの記事で使用しているアイキャッチ画像は以下より作成できます。

五角形アイコンを中央に配置したネオン風のテンプレート

Pocket

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です