createState() => _MainState(); } class _MainState extends State

{ var _selectTheme = ThemeMode.system; Widget get _buttons { return Row( key: ValueKey('bottons'), mainAxisSize: MainAxisSize.min, children: [ OutlinedButton( onPressed: () => setState(() => this._selectTheme = ThemeMode.light), child: Text('ThemeMode.light')), OutlinedButton( onPressed: () => setState(() => this._selectTheme = ThemeMode.dark), child: Text('ThemeMode.dark')), OutlinedButton( onPressed: () => setState(() => this._selectTheme = ThemeMode.system), child: Text('ThemeMode.system')) ]); } @override Widget build(BuildContext context) { log('${DateTime.now()} ${this._selectTheme}'); return MaterialApp( themeMode: this._selectTheme, darkTheme: ThemeData.dark(), theme: ThemeData.light(), home: Scaffold( appBar: AppBar(title: Text('This is AppBar'), elevation: 4.0), body: Center( child: Column( children: [ Text('hello world', textScaler: TextScaler.linear(5)), this._buttons ], ))), ); } } ``` ! หากต้องการกำหนดสีของ light/dark theme เอง สามารถเลือกใช้ชุดสีจากคำสั่ง [`ColorScheme.fromSwatch()`](https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSwatch.html) เพื่อสร้าง color scheme จากชุดสีของ [MaterialColor](https://api.flutter.dev/flutter/material/MaterialColor-class.html) หรือใช้ [`ColorScheme.fromSeed()`](https://api.flutter.dev/flutter/material/ColorScheme/ColorScheme.fromSeed.html) จากตัวอย่างที่แล้ว ลองเปลี่ยนให้สีของแอปเป็นสีเขียว [`Colors.green`](https://api.flutter.dev/flutter/material/Colors/green-constant.html) ตรง darkTheme กำหนดค่า `brightness: Brightness.dark` ส่วน theme ค่า `brightness: Brightness.light` ดังนี้ ```dart @override Widget build(BuildContext context) { log('${DateTime.now()} ${this._selectTheme}'); return MaterialApp( themeMode: this._selectTheme, darkTheme: ThemeData.from( colorScheme: ColorScheme.fromSeed( seedColor: Colors.green, brightness: Brightness.dark)), theme: ThemeData.from( colorScheme: ColorScheme.fromSeed( seedColor: Colors.green, brightness: Brightness.light)), home: Scaffold( appBar: AppBar(title: Text('This is AppBar'), elevation: 4.0), body: Center( child: Column( children: [ Text('hello world', textScaler: TextScaler.linear(5)), this._buttons ], ))), ); } ``` ! ### การแก้ไขข้อมูล Theme บางส่วน หากตัว widget ที่อยู่ใน widget tree ต้องการที่จะอ่านค่าหรือแก้ไขค่าสีหรือข้อมูลบางส่วนของตัว Theme ที่กำลังใช้งานอยู่ สามารถใช้คำสั่ง [`Theme.of( BuildContext context )`](https://api.flutter.dev/flutter/material/Theme/of.html) เพื่ออ่านข้อมูล [ThemeData](https://api.flutter.dev/flutter/material/ThemeData-class.html) จาก [BuildContext](https://api.flutter.dev/flutter/widgets/BuildContext-class.html) ออกมา หากต้องการจะสร้าง ThemeData ใหม่ที่มีการแก้ไขเพิ่มเติมข้อมูลบางส่วน สามารถใช้คำสั่ง [`ThemeData.copyWith()`](https://api.flutter.dev/flutter/material/ThemeData/copyWith.html) เพื่อสร้าง ThemeData ใหม่และนำไปใช้งาน ตัวอย่าง สร้าง widget ชื่อ `TextRed` ที่จะเอาค่าสีจาก [TextStyle](https://api.flutter.dev/flutter/painting/TextStyle-class.html) ที่สร้่างไว้ใน [textTheme.bodyMedium](https://api.flutter.dev/flutter/material/TextTheme/bodyMedium.html) มาแก้ไขให้คงค่าสีแดงเอาไว้ ```dart class TextRed extends StatelessWidget { const TextRed({super.key}); @override Widget build(BuildContext context) { var currentStyle = Theme.of(context).textTheme.bodyMedium; var newColor = currentStyle!.color!.withRed(255); return Text('This is custom text', style: currentStyle.copyWith(color: newColor)); } } ``` ! ข้อแตกต่างระหว่างการกำหนดสีเข้าไปตรง ๆ กับการใช้สีจาก ThemeData มาแก้ไขคือ สีมันจะกลืนไปกับวัตถุอื่น ๆ ในแอปได้ง่ายกว่า หากลองแก้ไขสีตรง ๆ ผลที่ออกมาจะเป็นดังนี้ ```dart class TextRed extends StatelessWidget { const TextRed({super.key}); @override Widget build(BuildContext context) { return Text('This is custom text', style: TextStyle(color: Colors.red)); } } ``` !