Google Chrome, Microsoft Edge で標準色をダークモード / ダークカラーに変更するコードを紹介します。
概要
こちらの記事では、CSSのメディアクエリを利用してダークモードのカラーを定義するコードを紹介しました。
Google Chrome、Microsoft Edge のWebブラウザでは、メディアクエリを利用する方法以外に、
CSSの
color-scheme プロパティを利用するとデフォルトのカラーをダークモードのカラーに変更することができます。
この記事では、color-scheme プロパティを利用してデフォルトの配色をダークモードに変更するコードを紹介します。
書式
:root 疑似クラスに
color-scheme プロパティを記述します。
:root{
color-scheme:dark;
}
プログラム例
コード
下記のコードのHTML, CSSファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="ColorScheme.css" />
</head>
<body>
<h2>テストページです</h2>
<form method="post" enctype="multipart/form-data" action="">
<input type="text" /><br />
<select>
<option>Item1</option>
<option>Item1</option>
</select>
<br/>
<input id="check1" type="checkbox" /><label for="check1">TEST</label><br />
<input type="radio" id="radio1" name="rg1" /><label for="radio1">TEST1</label>
<input type="radio" id="radio2" name="rg1" /><label for="radio2">TEST2</label><br />
<input name="File01" type="file" /><br />
<input type="submit" value="POST" />
</form>
<p>コンテンツです。</p>
<p><a href="https://www.ipentec.com">コンテンツです。</a></p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
<p>コンテンツです。</p>
</body>
</html>
:root {
color-scheme: light;
}
body {
}
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
}
}
実行結果
上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。
Webブラウザのカラーモードをダークカラーのモードに変更し、再度ページを読み込みます。ページのカラーがダークカラーに変わることが確認できます。
背景や文字色だけでなく、スクロールバーや、テキストボックス、チェックボックスなどのフォームコントロールもダークカラーに変わることが確認できます。
color-scheme プロパティを利用して、ダークカラーに対応できました。
このページのキーワード
- CSS ダークモード 標準
- CSS ダークモード デフォルト
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
最終更新日: 2024-06-25
作成日: 2021-09-12
