最近、多くのアプリがダークモードを搭載し、システムがダークモードになると連動してダークモードになるのを見かけた。後に、Webページでも同様の効果を実現できることを知り、ひと午後かけてこのサイトにダークモードを導入した。
色をシステム設定に応じて自動変更するには、CSSに簡潔な方法が用意されている。CSSでは、@mediaルールを使ってメディアクエリを行い、デバイスの特性やパラメータに基づいて異なるスタイルを適用できる。@media内のprefers-color-schemeは、ユーザーのシステムのテーマ色設定を検知できる。prefers-color-schemeは三つの値をサポートしている：no-preference（設定なし）、light（ライトモード）、dark（ダークモード）である。
NoteMDNドキュメントによると、
no-preferenceは、ブラウザのホストシステムがテーマ色設定をサポートしていないか、サポートしていてもデフォルトで未設定またはユーザーが設定を指定していないことを示す。
まずテスト用のWebページを作成する:
浅色模式示例
CSS部分は以下の通り
.card{
top: 40%;
margin: auto;
box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6);
padding: 8px 10px 6px;
background: rgba(255,255,255,.596078431372549);
border-radius: 25px;
position: relative;
text-align: center;
}
p{
color: #000;
font-size: 2em;
}
.bg{
background-image: url(https://cdn.vinking.top/bg.jpg);
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100vh;
background-size: cover;
opacity: .4;
filter: blur(8px);
}
ダークモードでは、文字色を白に、背景ボックスを黒の半透明にし、背景画像を暗色系に差し替えつつ透明度を上げたい。これらのスタイル変更を実現するため、@media (prefers-color-scheme: dark)メディアクエリを:root疑似クラスセレクタと組み合わせて、CSSコードを以下のように修正する：
CodeBlock Loading...
ユーザーがシステムのダークモードに切り替えると、ページの表示も自動的に更新される。
深色模式示例
Note最後に注意したいのは、
prefers-color-schemeをサポートしていないブラウザもある点である。対応ブラウザはこちらで確認できる