MaterialApp(
  title: appName,
  //themeプロパティ: アプリ全体のテーマを設定します。
  theme: ThemeData(
    useMaterial3: true,
    //colorSchemeプロパティ: アプリ内のウィジェットで使用される色が一括で設定され、
    //各要素（ボタン、背景色、テキスト色など）が同じ配色で統一されます。
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.purple,
      brightness: Brightness.dark,
    ),
    //textThemeプロパティ: 各テキストの役割に応じてスタイルを設定できます。
    //（例: displayLarge、titleLarge、bodyMedium など）。
    textTheme: TextTheme(
      displayLarge: const TextStyle(
        fontSize: 72,
        fontWeight: FontWeight.bold,
      ),
      titleLarge: GoogleFonts.oswald(
        fontSize: 30,
        fontStyle: FontStyle.italic,
      ),
      bodyMedium: GoogleFonts.merriweather(),
      displaySmall: GoogleFonts.pacifico(),
    ),
  ),
  home: const MyHomePage(title: appName),
);

Container(
  padding: const EdgeInsets.symmetric(
    horizontal: 12,
    vertical: 12,
  ),
  //Container の背景色を設定しています。
  //テーマのカラースキーム（ColorScheme）の primary 色
  //が取得され、Container の背景色として設定されています。
  //これにより、アプリのテーマに基づいた色が自動的に適用
  //されるため、テーマを変更した場合でも、
  //色が一括で反映されます。
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    'Text with a background color',
    style: Theme.of(context).textTheme.bodyMedium!.copyWith(
      color: Theme.of(context).colorScheme.onPrimary,
    ),
  ),
)

ElevatedButton(
  onPressed: () {},
  //ボタンの背景色をテーマの secondary 色に設定
  style: ElevatedButton.styleFrom(
    primary: Theme.of(context).colorScheme.secondary,
  ),
  child: Text('テーマ適用ボタン'),
)

Icon(
  Icons.favorite,
  //アイコンの色をテーマの primary 色に設定
  color: Theme.of(context).colorScheme.primary,
)

TextField(
  decoration: InputDecoration(
    hintText: 'テーマに基づくヒントテキスト',
    //ヒントテキストのスタイルをテーマに基づいて設定
    hintStyle: Theme.of(context).textTheme.bodyMedium,
  ),
)

//この例では、Theme ウィジェット内に ThemeData を直接作成し、
//FloatingActionButton に適用しています。
Theme(
  //独自のテーマを `ThemeData` で作成して渡す
  data: ThemeData(
    //この ThemeData は、ピンク色を基調としたカラースキーム
    //（ColorScheme.fromSeed(seedColor: Colors.pink)）
    //を持ちます。
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.pink,
    ),
  ),
  //この FloatingActionButton のスタイルは
  //アプリ全体のテーマとは異なり、独立したテーマが適用されます。
  child: FloatingActionButton(
    onPressed: () {},
    child: const Icon(Icons.add),
  ),
);

Theme(
  //親テーマを拡張して上書きする
  data: Theme.of(context).copyWith(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.pink,
    ),
  ),
  child: const FloatingActionButton(
    onPressed: null,
    child: Icon(Icons.add),
  ),
);