テーマ設定

ブランディングもレスポンシブにできます。 ユーザーの好みに合わせて、ウェブサイトのデザインを調整できます。 その前にまず、ウェブサイトのブランディングにブラウザそのものが含まれるように拡張する方法を紹介します。

ブラウザ インターフェースをカスタマイズする

一部のブラウザでは、ウェブサイトのパレットに基づいてテーマの色を提案できます。 ブラウザのインターフェースが、指定した色に適応します。ページの head にある theme-color という名前の meta 要素に色を追加します。

<meta name="theme-color" content="#00D494">

で確認できます。 <ph type="x-smartling-placeholder">

</ph>

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);
  }
}

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

画像によっては、ダークモードで完全に入れ替えたい場合があります。 たとえば、地図をより暗めのカラーパターンで表示できます。 <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>

<ph type="x-smartling-placeholder">

</ph>

フォーム

ブラウザには、フォーム フィールドにデフォルトのカラーパレットが用意されています。 サイトでダークモードとライトモードがあることをブラウザに伝えます。 これにより、ブラウザでフォームに適切なデフォルト スタイルを設定できます。

次の内容を 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);
}

ダークモードの提供は、ユーザーの好みに合わせてサイトを調整する一例にすぎません。 次に、あらゆる種類のユーザー補助機能の考慮事項にサイトを適応させる方法を学びます。

理解度をチェックする

テーマ設定に関する知識をテストする