【Material Design】Theme設定
![【Material Design】Theme設定](https://manage.kumatech-lab.com/media/2020/11/material-design-theme/businessman-3105873_1920-1000x626.jpg)
今回はMaterial Design のThemeの設定方法を紹介します。
各種コンポーネントを使用する際にtheme設定をもとに色が決められます。
サイトの配色に合わせてtheme色を設定しておけば個々のコンポーネントごとに色を設定する必要がなくなります。
themeの設定
themeの設定は他のmaterial design componentより先に読み込む必要があります。
@useにwith句を使用することで色の変更ができます。
@use "@material/theme" with ($primary: #42a5f5,$secondary: #f59342,$on-primary: #424242,$on-secondary: #ffffff,);
上の設定をした場合のデフォルトが以下のようになります。
〇ボタン
![material-design-theme - 20201121085519](https://manage.kumatech-lab.com/media/2020/11/material-design-theme/20201121085519.png)
〇チェックボックス
![material-design-theme - 20201121085531](https://manage.kumatech-lab.com/media/2020/11/material-design-theme/20201121085531.png)
〇テキストフィールド
![material-design-theme - 20201121085508](https://manage.kumatech-lab.com/media/2020/11/material-design-theme/20201121085508.png)
〇ラジオボタン
![material-design-theme - 20201121085534](https://manage.kumatech-lab.com/media/2020/11/material-design-theme/20201121085534.png)
まとめ
色の選び方などはMaterial Designのページで詳しく解説されています。
また、色を選ぶのに便利なピッカーツールもありますのでそれも活用してみてください。
テーマに独自の変数を追加したり、関数を使用する場合はテーマの使いかたを参考にしてください。