Material Design 3 のカラーシステムを確認できるサイトです。配色に悩んだときにご利用ください。
https://susatthi.github.io/flutter-material-color-system/
CleanShot.2024-06-10.at.17.02.24.mp4
| ライトモード | ダークモード |
|---|---|
デスクトップでお使いください。スマホでも使えますがマウスホバーが効かないので使いづらいと思います。
- カラーピッカーからシード色とダイナミックスキーム値を変更できます。
- シード色を最大10個まで保存できます。
- カラーをクリックするとHEX値をコピーします。
- ライトテーマとダークテーマの切替ができます。
- レスポンシブ対応です。
- 本家サイト
- Tonal palettes について
カラースキームは次のように seedColor と schemeVariant から作成しています。詳しくはコードを見てください。
@riverpod
class CurrentSeedColorNotifier extends _$CurrentSeedColorNotifier {
@override
Color build() => const Color(0xFF6750A4);
}
@riverpod
ThemeData theme(ThemeRef ref, Brightness brightness) {
final seedColor = ref.watch(currentSeedColorNotifierProvider);
final schemeVariant = ref.watch(currentDynamicSchemeVariantNotifierProvider);
return ThemeData(
useMaterial3: true,
colorScheme: ColorScheme.fromSeed(
seedColor: seedColor,
brightness: brightness,
dynamicSchemeVariant: schemeVariant,
),
);
}
class App extends ConsumerWidget {
const App({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp(
theme: ref.watch(themeProvider(Brightness.light)),
darkTheme: ref.watch(themeProvider(Brightness.dark)),
・・・
);
}
}
Flutter 3.32.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b25305a883 (16 hours ago) • 2025-05-29 10:40:06 -0700
Engine • revision 1425e5e9ec (2 days ago) • 2025-05-28 14:26:27 -0700
Tools • Dart 3.8.1 • DevTools 2.45.1
MIT