テーマ切り替え(ダークモード、ライトモード)

[kos0514]

概要

ダークモード、ライトモードに切り替えを行うボタンを用意し、ボタン押下でモードの切り替えを行う。

目的

・見やすさの配慮。ダークモードでないと、目が痛くなるため。
・全面的なソースコード改修が必要になるため、ReactやTypeScriptおよびMUIへの理解が深まる想定。

タスク

• 疑問・調査事項の確認。
• 全てのソースコードの改修。
• styleを一箇所にまとめて、全ファイルはまとめたtsxファイルからstyleを参照するように修正する。

疑問・調査事項

• ロゴがモード切り替えにより、どのような色彩になるのか調査。
• モード切り替えにより、ロゴに違和感が発生した場合、フォトショップを利用し、加工が必要な可能性がある。もしくはAdobeでロゴを作成するか検討。https://www.adobe.com/jp/express/

補足

MUIのダークモードサンプルページ
https://mui.com/material-ui/customization/dark-mode/
https://mui.com/material-ui/react-switch/#customization

★ライトモードの色彩
　・CardRGB(255,255,255) #ffffff
　・Card外RGB(231,235,240) #e7ebf0
　・MUIのライトモード RGB(255,255,255) #ffffff

★ダークモードの色彩
　・CardRGB(18,18,18) #121212
　・Card外RGB(26,32,39) #1a2027
　・MUIのダークモード RGB(0, 30,60) #001e3c

・モードのステータスはlocalStorageに詰める。