【Material Design】Theme設定

今回は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のページで詳しく解説されています。

また、色を選ぶのに便利なピッカーツールもありますのでそれも活用してみてください。

テーマに独自の変数を追加したり、関数を使用する場合はテーマの使いかたを参考にしてください。