Material Design 3というものができたそうですね。開発中にデザインの実装方法などググることはあっても体系的に学んだことはなかったので、復習も兼ねて、Material Design２から学びます。
歴史
2014年 Material Design
2018年 Material Theming
2021年 Material You
2021年にMaterial YouがMaterial Design3と呼ぶようになり、それに伴ってMaterial ThemingがMaterail Design2ということになったそうです。（参照）
Material Color
こちらの公式でいろいろ定義されているのでまとめます。
図案の公式のサイトを見ながらだとわかりやすいです。
| 名称 | 概要 |
|---|---|
| Primary Color | アプリの主要カラー。ツールバーやフローティングボタンなどに使われる。 |
| Secondary Color | アプリの副次的なカラー。Primary Colorだけだと寂しいときに、アクセントとして入れるようです。フローティングボタンなどに。 |
| Variant | 変異体の意味。Primary Variantや、Secondary Variantのように使用。色に変化を持たせるために、明度だけを変えてバリエーションをもたせます。Primary Variantなら、Primary Colorより薄い色を使うとかです。 |
| Surface Color | コンポーネントの表面色を表す。カードやシート、メニューなど。 |
| Background Color | 背景色 |
| Error Color | エラー時の色 |
| "On" Color | typograpyに使う色。例えば、onPrimaryとか、onSurfaceなどの用に使う。PrimaryColorを背景とした文字の色の定義。例えば、紫のPrimary Colorの場合、ツールバーが紫になります。このときタイトルなどの文字の色をどうするかというときに、OnPrimaryで定義します。白とか黒になります。 |
| Alternative Color | Primary Colorがいくつもある場合、２つ目以降を指すようです。公式のowlというアプリが参考になるでしょう。 |
| Additional Color | コンポーネントごとに別の色を使うなど。公式のRallyというサンプルが参考になります。 |
| Material Pallet Generator | 適切な色を導いてくれるツールです。PrimaryColorを設定したとき、onSurfaceは白か黒にすべきか、自動的に出してくれたりします。 |
Composeでの実装について
公式のowlの実装例を見るとこんな感じ。
private val PinkThemeLight = lightColors(
primary = pink500,
secondary = pink500,
primaryVariant = pink600,
onPrimary = Color.Black,
onSecondary = Color.Black
)
private val PinkThemeDark = darkColors(
primary = pink200,
secondary = pink200,
surface = pinkDarkPrimary
)
@Composable
fun PinkTheme(
darkTheme: Boolean = isSystemInDarkTheme(),
content: @Composable () -> Unit
) {
val colors = if (darkTheme) {
PinkThemeDark
} else {
PinkThemeLight
}
OwlTheme(darkTheme, colors, content)
}
isSystemInDarkTheme()でダークモードかライトモードかを判別し、別に定義したlightColorsやDarkColorsを切り替えます。ComposeにはlightColorsやDarkColorsというオブジェクトが用意されているので便利です(androidx.compose.material)。定義は以下のようになってます。
lightColors(
primary: Color,
primaryVariant: Color,
secondary: Color,
secondaryVariant: Color,
background: Color,
surface: Color,
error: Color,
onPrimary: Color,
onSecondary: Color,
onBackground: Color,
onSurface: Color,
onError: Color
)
基本これだけでよいですが、owlの例だともっと発展的なテーマが書かれているので、公式のコードを見てください。
Material Design 3
新しいPixelをお使いの人なら分かるかもしれないですがAndroid12だと、壁紙の色を自動検出してテーマの色が変わります。通知領域などの色が変わります。こんな感じ。
自分はPixel6を使ってますが、気分を入れ替えるときにいいですね。とはいっても、最初は楽しいですが、壁紙なんてなかなか変えないのが正直なところTonal palettes
googleアプリにはこのカラーリングが実装されていくようですが、公式以外でも使えます。とはいえ普及のペースは遅いようです。ライブラリも準備されていくようなので、こういうことができるということは頭に入れておいたほうが良いと思われます。
色定義の変化
Material Design3は上記2の定義に変更が加わってます。
参考文献様
| 項目 | 説明 |
|---|---|
| Tertiary Color追加 | Primary, Secondaryに次いでTertiary Colorが追加になり、よりカラフルになります。Secondaryは目立たない色、Tertiaryはアクセントとして用いられます。 |
| Variant→Container | VariantがなくなりContainerとなりました。Containerは主要の色に比べて薄めです。 |
| Neutral key color | background, surfaceをひっくるめてこういうようになったようです。Neutral Variantも設定されました。 |
| ５つのkey color | Primary, Secondary, Tertiary, Neutral, NeutralVariantを5つのkey colorとしています。 |
| Tonal palettes | カラーは0〜100の間の明度で13分割された数値を持ち、Primary90のように表します。5つのkey colorを設定すると、onPrimaryとかContainerとかは、自動的に明度を判断して決めてくれるようです。 |
| Design Token | #E8DEF8などに名前を与えて管理しやすくするようです。保守性が高まるとのことですが、あまり理解できていません。 |
