Salesforce B2C Commerce PWA Kit のテーマを編集してみる

※ これから記載する事項は、私が所属する会社とは一切関係のない事柄です。

今回は PWA Kit の拡張テンプレートを利用して下記のように見た目を変更してみたいと思います。拡張テンプレートに関しては「[PWA Kit の拡張テンプレートを使ってみる](https://qiita.com/syunyama/items/b97057c4d2e5073c6eee)」を参照してください。

**BEFORE**
![スクリーンショット 2023-10-26 13.12.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/fba9cd4a-99ef-c212-e011-59b4770c05b6.png)


**AFTER**
![スクリーンショット 2023-10-26 13.11.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/97efc630-3475-d0fc-227b-7fa14231e16a.png)



## PWA Kit のテーマ

- PWA Kit では主に [Chakra UI](https://chakra-ui.com/) を利用しています。Chakra UI のコンポーネントのテーマは [styled-system](https://github.com/styled-system/styled-system) に基づいてカスタマイズすることができます。（詳細は[ヘルプ](https://developer.salesforce.com/docs/commerce/pwa-kit-managed-runtime/guide/retail-react-app.html#chakra-ui)をご覧ください）
- テーマを拡張している PWA Kit のエントリポイント部分は[こちら](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/index.js#L70)をご覧ください。テーマの拡張方法の詳細は [Chakra UI のヘルプ](https://chakra-ui.com/docs/styled-system/customize-theme#customizing-single-components)をご覧ください。
- PWA Kit では [app/theme](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/v3.1.1/packages/template-retail-react-app/app/theme) ディレクトリに PWA Kit で利用されているテーマの設定が保存されています。拡張テンプレートではこのディレクトリ内のファイルを上書きすることでテーマを修正することができます。




## 今回の修正点

* 全体のフォントを（変化がわかりやすそうだったので）装飾系（fantasy）にする
* ページ全体、ヘッダーのバックグラウンドを黒に。文字を白にする
* ヘッダー内にあるリストメニューの文字も白にする
* ボタンのデフォルトを青色から黒色にする

![スクリーンショット 2023-10-26 13.12.36 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2110894/62a9ecfd-046d-9d33-7a8c-36b114f311f3.png)



## 拡張テンプレートでの修正

純粋に [`app/theme`](https://github.com/SalesforceCommerceCloud/pwa-kit/tree/v3.1.1/packages/template-retail-react-app/app/theme) ディレクトリのファイルをコピーしてきてもいいのですが、今回はどの部分を修正したかがわかるように上書きするファイルに上書きする形でいきたいと思います。



## ファイルの修正

### ・ 全体のフォントを（変化がわかりやすそうだったので）装飾系（fantasy）にする

html と body にフォントを追加します。

##### 元のファイル

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/foundations/styles.js


##### 上書きしたファイル


```javascript: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](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/components/_app/index.jsx#L272) とヘッダーのコンポーネント [app/components/header/index.jsx](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/components/header/index.jsx#L118) にバックグラウンドと文字の色の設定をしていきます。

##### 元のファイル

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/components/project/_app.js

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/components/project/header.js

##### 上書きしたファイル



```javascript: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
```



```javascript: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](https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/components/list-menu/index.jsx#L65) に文字の色の設定をしていきます。


##### 元のファイル

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/components/project/list-menu.js


##### 上書きしたファイル



```javascript: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
```




### ・ ボタンのデフォルトを青色から黒色にする

[ボタンのコンポーネント](https://chakra-ui.com/docs/components/button/usage)は Chakra UI のコンポーネントライブラリに入っているものですが、他のコンポーネント同様に上書き可能です。

##### 元のファイル

https://github.com/SalesforceCommerceCloud/pwa-kit/blob/v3.1.1/packages/template-retail-react-app/app/theme/components/base/button.js

##### 上書きしたファイル



```javascript: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
```