*全てM3前提で記述します

Brightness

指定方法はbrightnessとColorScheme.brightnessの２つ
brightnessとColorScheme.brightnessが異なるとエラー
どちらかを指定していればOK
指定ない場合はLightになる

colorSchemeSeed

colorScheme、primarySwatch、primaryColorのどれとも共存できない

assert(colorSchemeSeed == null || colorScheme == null);
assert(colorSchemeSeed == null || primarySwatch == null);
assert(colorSchemeSeed == null || primaryColor == null);

colorSchemeSeedが指定されている場合
- ColorScheme.fromSeed(seedColor: colorSchemeSeed, brightness: effectiveBrightness)
指定されていない場合
- constで定義されているColorScheme（ _colorSchemeDarkM3 or _colorSchemeLightM3 ）が使われる
  - 色味は紫

m.kosuke

colorShceme/ primarySwatch / primaryColorの関係性

カスタマイズを色々する前提で、colorSchemeSeedはあまり使わないと想定して、colorSchemeSeedを指定しない場合を考える

colorScheme

指定がない場合は、固定のcolorScheme（紫ベース）

primaryColor

指定ない場合はcolorSchemeから。

colorSwatch

指定ない場合は青ベース
使われる場所
- primaryColorLight/primaryColorDark
  - Avatarでしか使われていない
- secondaryHeaderColor
  - PaginatedDataTableの選択状態にしか使われていない
- buttonTheme#buttonColor

m.kosuke

colorSchemeをメインに作り込めばよさそう
必要に応じて、primaryColorLight/primaryColorDark/secondaryHeaderColorを指定
ButtonThemeは調整が必要

m.kosuke

ColorScheme

各色の決められ方

primaryColor

引数で指定された色
Light→ColorScheme.primary、Dark→ColorScheme.surface

canvasColor

引数で指定された色
ColorScheme.background

scaffoldBackgroundColor

引数で指定された色
ColorScheme.background

cardColor

引数で指定された色
ColorScheme.surface

dividerColor

引数で指定された色
ColorScheme.outline

dialogBackgroundColor

引数で指定された色
ColorScheme.background

indicatorColor

引数で指定された色
Light→ColorScheme.onPrimary、Dark→ColorScheme.onSurface

applyElecationOverlayColor

引数で指定された設定
Darkならtrue

m.kosuke

colorSwatch

指定がないとColors.blue

primaryColorLight/Dark

指定がない場合

primaryColorLight
- Light→colorSwatch[100]
- Dark→Colors.gray[500]
primaryColorDark
- Light→colorSwatch[700]
- Dark→Colors.black

m.kosuke

primaryColorLight/Darkの使われている場所

CircleAvatar
背景色に使用。TextColorがdarkならprimaryColorLight、lightならprimaryColorDarkを使ってコントラストを保っている

他に使っている場所は見当たらない。Lightの時はprimarySwatchを指定していればそれっぽい色が当たるけど、Darkの時は基本黒or グレー。

m.kosuke

focusColor

指定なければ、Light：白の透過度0.12、Dark：黒の透過度0.12

hoverColor

指定がなければ、Light：白の透過度0.04、Dark：黒の透過度0.04

M3のドキュメントに沿っているのかな、と思ったけど、そうでもなかった 🤔

m.kosuke

canvasColor/scaffoldBackgroundColor

Light/Darkでグレーの色味が決まる
この二つは同じ色を使う

backgroundColor

isDark ? Colors.grey[700]! : primarySwatch[200]!,

cardColor

Light/Darkでグレーor白

dividerColor

透過度0x1Fで白or黒

m.kosuke

ColorScheme

アクセントカラー

primary


primary
primaryContainer	指定がないとprimaryと同じ色
onPrimaryContainer	指定がないとonPrimaryと同じ色

m.kosuke

M3ガイドライン

45色のベースがある
メインのアクセントカラーグループとしてprimary, secondary, tertiaryがある
- primary
  - FABなどUIカラー
- secondary
  - FABより目立たなくて良いUIパーツ（例：filter chip)
- tertiary
  - バランスを取るための第3の色で、どう使うかは定められず、デザイナーの裁量に任せられている
メインカラーは -Fixed と -Dim を持つ