今までのスマートフォン向け標準テーマは黒のみでしたが、2018Summerより、スマートフォン向け標準テーマに白が追加されました。
2018Spring 以前のバージョンでスマートフォン向け画面を作成している場合、ユーザが白テーマに切り替えると予期せぬ見た目になることがあります。
iAP の既存の画面では後述する対応を行いました。

まずは、それぞれのテーマモジュールで見た目の違いを確認してください。以下がテーマ毎の色情報です。

【スウォッチセットの見た目】
・https://www.intra-mart.jp/document/library/iap/public/development/script_programming_guide/texts/application/im_sp/smartphone_theme/index.html#%E3%83%86%E3%83%BC%E3%83%9E%E3%81%A8%E3%82%B9%E3%82%A6%E3%82%A9%E3%83%83%E3%83%81

【黒テーマ】
theme_black.PNG

【白テーマ】
theme_white.PNG

【対応有無の判定方法】
白テーマへ対応するにあたって、以下のいずれかに該当する場合、白テーマでレイアウトが崩れる可能性があります。
jQueryMobile のスウォッチを利用せず、独自の css や js を利用し、色情報を指定している箇所がある 
例：background-color や text-shadow の色情報
白背景で表示できないアイコンを利用、または独自で作成している 
例：im-smart-icon-common-32-mail、im-smart-icon-common-32-more などの主にフッターに置くアイコン
data-theme="c" を指定している箇所がある
まず、対応箇所があるかどうかを上記の方法で判定しました。対応が必要そうな場合、後続の作業を行ってください。


【修正方法】
■　jQueryMobile のスウォッチを利用せず、独自の css や js を利用し、色情報を指定している箇所がある場合の対応方針

・独自の css や js で色情報を指定した場合、テーマに関係なく固定した色になってしまいます。そのため、独自の css を利用せず、スウォッチを利用することを検討してください。（data-theme 属性による対応）

・data-theme による対応ができない場合、独自の css に白テーマ用の対応をしてください。白テーマには、im_theme_smartphone_white というクラスが body 要素に付与されます。このクラスを利用し、白テーマ用の css を作成してください。

・画面全体のレイアウトより、対応の必要がないと判断できれば対応の必要はありません。


■　白背景で表示できないアイコンを利用、または独自で作成している場合の対応方針 

・白テーマにすることで、白ベースのアイコンが見えなく（見づらく）なる可能性があります。独自でアイコンを利用する場合は、白テーマでも黒テーマでも見えるアイコンを作成してください。
・iAP のアイコンは、グレー背景に白の線を入れることでどちらのテーマでも見えるようにしています。既存のアイコンを使っている場合は既存のクラス名に「-2」を加えたクラスを利用してください。例：im-smart-icon-common-32-home を指定していた場合、im-smart-icon-common-32-home-2 を指定する
・アイコンを表示する要素に data-theme="a" または data-theme="c" を指定していない箇所については背景が白くなることはないので、対応の必要はありません。

■　data-theme="c" を指定している箇所がある場合の対応方針 

・data-theme="c" を指定している箇所は、白テーマ時には黒になります。iAPの画面の対応は、白テーマ時にも白にしたかったため、data-theme="d" を指定しました。 
d を指定することで既存の黒テーマ、白テーマどちらで表示しても要素の背景色を白にすることができます。
・黒になっても問題ないという判断であれば、対応の必要はありません。

■　上記のいずれにも該当しない場合の対応 
・上記の説明は、iAP の画面で起きた問題の対応になります。それ以外の問題はないと思いますが、白テーマにて画面の確認を行い、白テーマ時に想定外の見た目になっていないか確認を行ってください。

-- 対象 ------------------------------------------------------------------------
iAP/Accel Platform/2018 Summer 以降
--------------------------------------------------------------------------------


FAQID:692