ブランディングもレスポンシブにできます。 ユーザーの好みに合わせて、ウェブサイトのデザインを調整できます。 その前にまず、ウェブサイトのブランディングにブラウザそのものが含まれるように拡張する方法を紹介します。
ブラウザ インターフェースをカスタマイズする
一部のブラウザでは、ウェブサイトのパレットに基づいてテーマの色を提案できます。
ブラウザのインターフェースが、指定した色に適応します。ページの head
にある theme-color
という名前の meta
要素に色を追加します。
<meta name="theme-color" content="#00D494">
theme-color
の値は JavaScript を使用して更新できます。ただし、この電力をうまく利用してください。
ブラウザのカラーパターンが頻繁に変更されると、ユーザーにとってはストレスがたまります。
テーマの色を調整する微妙な方法を検討しましょう。変更があまりにも不快な場合、ユーザーは不満を抱きます。
テーマカラーはウェブアプリ マニフェスト ファイルでも指定できます。 これは、ウェブサイトに関するメタデータを含む 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);
}
}
画像によっては、ダークモードで完全に入れ替えたい場合があります。
たとえば、地図をより暗めのカラーパターンで表示できます。
<source>
要素を含む <picture>
要素を prefers-color-scheme
メディアクエリで使用します。
<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>
タグライトモードまたはダークモードに関するユーザーのシステム設定を組み込むには、以下を使用します。
(prefers-color-scheme)
メディアクエリダークモードをサポートしていますが、フォーム入力はすべてライトテーマのままです。何ができる?
html { color-scheme: light dark; }
を CSS に追加します。<head>
タグに <meta name="supported-color-schemes" content="light dark">
を追加します。