ブランディングにもレスポンシブにできます。ウェブサイトの表示は、ユーザーの好みに合わせて調整できます。 その前に、ウェブサイトのブランディングを拡張してブラウザ自体も組み込む方法を見ていきます。
ブラウザ インターフェースをカスタマイズする
一部のブラウザでは、ウェブサイトのパレットに基づいてテーマの色を提案できます。
ユーザーの色に合わせてブラウザのインターフェースが調整されます。ページの 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 は
prefers-color-schemeダークモードのアイコン用の SVG ファビコンで 投稿しました。
カスタム プロパティによるテーマ設定
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> タグを更新する場合にのみ使用します。manifest.json を指定できます。これにはテーマカラーを指定するフィールドがあり、モバイルのホーム画面から開いたときのアプリの色合いを調整します。<meta> タグ<head> タグでできるだけ早く認識できるため、不要な色の点滅を回避できます。ライトモードまたはダークモードに関するユーザーのシステム設定に接続するには、次のコマンドを使用します。
(prefers-color-scheme) メディアクエリダークモードをサポートしますが、フォーム入力はすべてライトテーマになります。どうすればよいでしょうか
html { color-scheme: light dark; } を CSS に追加します。<meta name="supported-color-schemes" content="light dark"> を HTML <head> タグに追加します。