※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。
今回は PWA Kit の拡張テンプレートを利用して下記のように見た目を変更してみたいと思います。拡張テンプレートに関しては「PWA Kit の拡張テンプレートを使ってみる」を参照してください。
BEFORE
AFTER
PWA Kit のテーマ
- PWA Kit では主に Chakra UI を利用しています。Chakra UI のコンポーネントのテーマは styled-system に基づいてカスタマイズすることができます。（詳細はヘルプをご覧ください）
- テーマを拡張している PWA Kit のエントリポイント部分はこちらをご覧ください。テーマの拡張方法の詳細は Chakra UI のヘルプをご覧ください。
- PWA Kit では app/theme ディレクトリに PWA Kit で利用されているテーマの設定が保存されています。拡張テンプレートではこのディレクトリ内のファイルを上書きすることでテーマを修正することができます。
今回の修正点
- 全体のフォントを（変化がわかりやすそうだったので）装飾系（fantasy）にする
- ページ全体、ヘッダーのバックグラウンドを黒に。文字を白にする
- ヘッダー内にあるリストメニューの文字も白にする
- ボタンのデフォルトを青色から黒色にする
拡張テンプレートでの修正
純粋に app/theme ディレクトリのファイルをコピーしてきてもいいのですが、今回はどの部分を修正したかがわかるように上書きするファイルに上書きする形でいきたいと思います。
ファイルの修正
・ 全体のフォントを（変化がわかりやすそうだったので）装飾系（fantasy）にする
html と body にフォントを追加します。
元のファイル
上書きしたファイル
overrides/app/theme/foundations/styles.js
import base from '@salesforce/retail-react-app/app/theme/foundations/styles'
base.global['html, body'].fontFamily = 'fantasy'
export default base
・ ページ全体、ヘッダーのバックグラウンドを黒に。文字を白にする
ページ全体のレイアウトを構成している app/components/_app/index.jsx とヘッダーのコンポーネント app/components/header/index.jsx にバックグラウンドと文字の色の設定をしていきます。
元のファイル
上書きしたファイル
overrides/app/theme/components/project/_app.js
import base from '@salesforce/retail-react-app/app/theme/components/project/_app'
base.baseStyle.container.backgroundColor = 'black'
base.baseStyle.container.color = 'white'
export default base
overrides/app/theme/components/project/header.js
import base from '@salesforce/retail-react-app/app/theme/components/project/header'
base.baseStyle.container.backgroundColor = 'black'
base.baseStyle.container.color = 'white'
export default base
・ ヘッダー内にあるリストメニューの文字も白にする
ヘッダー内のメニューリストコンポーネント app/components/list-menu/index.jsx に文字の色の設定をしていきます。
元のファイル
上書きしたファイル
overrides/app/theme/components/project/list-menu.js
import base from '@salesforce/retail-react-app/app/theme/components/project/list-menu'
base.baseStyle.listMenuTriggerLink.color = 'white'
export default base
・ ボタンのデフォルトを青色から黒色にする
ボタンのコンポーネントは Chakra UI のコンポーネントライブラリに入っているものですが、他のコンポーネント同様に上書き可能です。
元のファイル
上書きしたファイル
overrides/app/theme/components/base/button.js
import base from '@salesforce/retail-react-app/app/theme/components/base/button'
base.defaultProps.colorScheme = 'black'
export default base