メインコンテンツまでスキップ

テーマコンテキスト

概要​

アプリ内の描画に用いられるカラーコードを用途毎に整理したテーマを管理するコンテキストです。 利用する色を一元管理することでアプリ全体のデザイン変更を容易にし、 また将来的なライトモード・ダークモードの切り替えへ容易に対応できるようにします。

提供するインタフェース​

このアプリでは、アプリ内にバンドルしたテーマをアプリ起動時にロードします。 ストレージや外部サービスへの入出力が発生しないため、ロードは失敗しない想定です。

  • テーマのロード
    • アプリ独自に定義したテーマを取得します
      • このアプリは現段階では端末OSのダークモード設定に基づくカラーテーマの切り替え、ユーザ設定によるカラーテーマの切り替えのいずれにも対応しません。そのため、常に同一のテーマが返されます

管理対象データ​

テーマとそれに付随する各カラーコードのデータは、アプリ内にバンドルする形で提供されます。 テーマ内のデータの追加・更新・削除は、アプリを再ビルドすることで行います。

このアプリは現段階では端末OSのダークモード設定、ユーザ設定によるカラーテーマの切り替えのいずれにも対応しません。 そのためテーマは1種類のみ用意し、ライトモード・ダークモードのいずれにおいても同じテーマを適用します。

このアプリで定義するテーマの形式は以下のとおりです。 現在はカラーコードのみを管理対象としていますが、将来的にはテーマに関連する他の情報を保持できるようにします。

type AppTheme = {
  name: string;
  colors: {
    background: string;
    backgroundHeader: string;
    backgroundBottomTab: string;
    backgroundSnackbar: string;
    text: string;
    textInverted: string;
    textStrong: string;
    textWeak: string;
    border: string;
    borderStrong: string;
    primary: string;
    primaryVariant: string;
    secondary: string;
    secondaryVariant: string;
    inactive: string;
    danger: string;
    error: string;
    warning: string;
  }
}

colors内の各属性で定義するカラーコードは、以下の用途に用いられます。

属性名用途
background画面の標準背景色
backgroundHeaderヘッダーの背景色
backgroundBottomTabボトムタブの背景色
backgroundSnackbar通知に用いるスナックバーの背景色
text標準文字色
textInverted標準背景色と濃淡が異なる背景に重ねる場合や、選択範囲内の色を反転させたい場合に用いる文字色
textStrong標準よりも強調したい場合の文字色（例：タイトル）
textWeak標準よりも控え目にしたい場合の文字色（例：プレースホルダー）
border標準ボーダー色
borderStrong標準よりも強調したい場合のボーダー色（例：テキスト入力欄の下線）
primary正常系のボタンや選択中の要素など、強調したい要素に用いる色
primaryVariant標準背景色と濃淡が異なる背景に重ねる場合のprimary色。primaryと同時に並べて濃淡を表現する場合にも用いる
secondary補助的な要素に用いる色
secondaryVariant標準背景色と濃淡が異なる背景に重ねる場合のsecondary色。secondaryと同時に並べて濃淡を表現する場合にも用いる
inactive無効化された、または非選択状態の要素に用いる色
danger破壊的操作のボタンや、破壊的操作への警告に用いる色（例：削除ボタン）
errorエラーメッセージなどに用いる色
warning警告メッセージなどに用いる色
備考

React NavigationにはTheme機能が存在します。 このTheme機能を用いると、React Navigationで提供されているコンポーネントの色を切り替えることができます。

React Native ElementsにもTheme機能が存在します。 こちらも同様にReact Native Elementsで提供されているコンポーネントの色を切り替えることができます。 また、コンポーネントのデフォルトのpropsも設定できます。

このアプリでは以下の理由から、それぞれのThemeのcolorsを設定することによる間接的な色の指定は行いません。 各コンポーネントのスタイルで、明示的にアプリのテーマで定義した色を指定します。 ただし、各コンポーネントのデフォルトのpropsを指定する際にReact Native ElementsのTheme機能を利用する場合はあります。

  • デザイン上各所の色が明示的に指定されているケースでは使いづらい
    • 各ライブラリのTheme内に定義されているcolorsの各属性の色を設定できますが、それらの色をどこに使うかは各ライブラリ側に任されています
    • 大体の色調を指定できれば良いケースではこれで十分ですが、デザイン上各コンポーネントの色が明確に指定されている場合には適していません
  • 各ライブラリのThemeの配色を変更した場合の影響範囲を直感的に把握しづらい
    • 各ライブラリのThemeでどの配色を変えるとどのコンポーネントのどの部分の色が変わるのかは、ドキュメントでは大まかにしか触れられておらず、詳細は各ライブラリのソースコードを確認する必要があります
    • アプリ側で個別に色を指定することで、影響範囲を追跡しやすくします
に最終更新