ブランディングもレスポンシブにできます。ユーザーの好みに合わせてウェブサイトの表示を調整できます。まず、ウェブサイトのブランディングをブラウザ自体にまで拡張する方法について説明します。
ブラウザのインターフェースをカスタマイズする
一部のブラウザでは、ウェブサイトのパレットに基づいてテーマカラーを提案できます。ブラウザのインターフェースが、提案された色に合わせて変化します。ページの head の theme-color という名前の meta 要素に色を追加します。
<meta name="theme-color" content="#00D494">
JavaScript を使用して theme-color の値を更新できます。ただし、この権限は慎重に使用してください。ブラウザのカラーパターンが頻繁に変わると、ユーザーは混乱する可能性があります。テーマカラーを微妙に調整する方法を検討します。変更が急激すぎると、ユーザーは不満を感じて離れてしまいます。
ウェブアプリ マニフェスト ファイルでテーマカラーを指定することもできます。これは、ウェブサイトに関するメタデータを含む JSON ファイルです。
ドキュメントの head からマニフェスト ファイルへのリンク。rel の値が manifest の link 要素を使用します。
<link rel="manifest" href="/manifest.json">
マニフェスト ファイルで、Key-Value ペアを使用してメタデータをリストします。
{
"short_name": "Clearleft",
"name": "Clearleft design agency",
"start_url": "/",
"background_color": "#00D494",
"theme_color": "#00D494",
"display": "standalone"
}
サイト訪問者がウェブサイトをホーム画面に追加すると、ブラウザはマニフェスト ファイルの情報を使用して適切なショートカットを表示します。
ダークモードを提供する
多くのオペレーティング システムでは、ユーザーがライト カラーパレットまたはダーク カラーパレットのどちらを好むかを指定できます。ユーザーのテーマ設定に合わせてサイトを最適化することをおすすめします。この設定には、prefers-color-scheme というメディア機能でアクセスできます。
@media (prefers-color-scheme: dark) {
// Styles for a dark theme.
}
meta 要素内の prefers-color-scheme メディア機能を使用して、テーマの色を指定します。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)">
SVG 内で prefers-color-scheme メディア機能を使用することもできます。ファビコンに SVG ファイルを使用すると、ダークモードに合わせて調整できます。Thomas Steiner が、ダークモード アイコン用の SVG ファビコンの prefers-color-scheme について書いています。
カスタム プロパティによるテーマ設定
CSS 全体で同じカラー値を複数の場所で使用している場合、prefers-color-scheme メディアクエリ内でセレクタをすべて繰り返すのは非常に面倒です。
body {
background-color: white;
color: black;
}
input {
background-color: white;
color: black;
border-color: black;
}
button {
background-color: black;
color: white;
}
@media (prefers-color-scheme: dark) {
body {
background-color: black;
color: white;
}
input {
background-color: black;
color: white;
border-color: white;
}
button {
background-color: white;
color: black;
}
}
CSS カスタム プロパティを使用して、色の値を保存します。カスタム プロパティは、プログラミング言語の変数のように機能します。変数の名前を更新せずに、変数の値を更新できます。
prefers-color-scheme メディアクエリ内でカスタム プロパティの値を更新すると、すべてのセレクタを 2 回記述する必要がなくなります。
html {
--page-color: white;
--ink-color: black;
}
@media (prefers-color-scheme: dark) {
html {
--page-color: black;
--ink-color: white;
}
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
input {
background-color: var(--page-color);
color: var(--ink-color);
border-color: var(--ink-color);
}
button {
background-color: var(--ink-color);
color: var(--page-color);
}
カスタム プロパティを使用したテーマ設定のより高度な例については、カラーパターンを構築するをご覧ください。
画像
HTML で SVG を使用している場合は、カスタム プロパティを適用することもできます。
svg {
stroke: var(--ink-color);
fill: var(--page-color);
}
これで、アイコンの色がページ上の他の要素に合わせて変わるようになります。
ダークモードで表示される写真画像の明るさを抑えたい場合は、CSS でフィルタを適用できます。
@media (prefers-color-scheme: dark) {
img {
filter: brightness(.8) contrast(1.2);
}
}
一部の画像では、ダークモードで完全に置き換えることが望ましい場合があります。たとえば、暗いカラーパターンで地図を表示したい場合があります。prefers-color-scheme メディアクエリを含む <source> 要素を含む <picture> 要素を使用します。
<picture>
<source srcset="darkimage.png" media="(prefers-color-scheme: dark)">
<img src="lightimage.png" alt="A description of the image.">
</picture>
フォーム
ブラウザには、フォーム フィールドのデフォルトのカラーパレットが用意されています。サイトでダークモードとライトモードの両方を提供していることをブラウザに知らせます。これにより、ブラウザはフォームに適切なデフォルトのスタイルを適用できます。
CSS に以下を追加します。
html {
color-scheme: light;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
HTML を使用することもできます。ドキュメントの head に次のように追加します。
<meta name="supported-color-schemes" content="light dark">
CSS の accent-color プロパティを使用して、チェックボックス、ラジオボタン、その他のフォーム フィールドのスタイルを設定します。
html {
accent-color: red;
}
ダークテーマでは、ブランドカラーが控えめになるのが一般的です。ダークモードの accent-color の値を更新できます。
html {
accent-color: red;
}
@media (prefers-color-scheme: dark) {
html {
accent-color: pink;
}
}
すべての色の宣言を 1 か所にまとめておくために、カスタム プロパティを使用するのが妥当です。
html {
color-scheme: light;
--page-color: white;
--ink-color: black;
--highlight-color: red;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
--page-color: black;
--ink-color: white;
--highlight-color: pink;
}
}
html {
accent-color: var(--highlight-color);
}
body {
background-color: var(--page-color);
color: var(--ink-color);
}
ダークモードの提供は、ユーザーの好みに合わせてサイトを調整する一例にすぎません。次に、あらゆる種類のアクセシビリティの考慮事項に対応できるようにサイトを適応させる方法について説明します。
理解度をチェックしましょう
テーマ設定に関する知識をテストする
ウェブページ外のブラウザに影響するテーマカラーを指定するには、次のようにします。
<meta> タグを更新するために使用する場合のみ。manifest.json を指定できます。これには、モバイルのホーム画面から開いたアプリの外観を調整するためのテーマカラーを指定するフィールドが含まれます。<meta> タグ<head> タグでこのテーマカラーをできるだけ早く認識することで、不要な色の点滅を回避できます。ライトモードまたはダークモードに関するユーザーのシステム設定にフックするには、次のコードを使用します。
(prefers-color-scheme) メディアクエリダークモードをサポートしているのに、フォーム入力がすべてライトモードのままになっている。何ができる？
html { color-scheme: light dark; } を追加します。<head> タグに <meta name="supported-color-schemes" content="light dark"> を追加します。