| Platform | Accent Color | Listen to Color Changes | Minimum Version |
|---|---|---|---|
| Android | ✔️ | Android 10+ | |
| iOS | ✔️ | iOS 14+ | |
| Windows | ✔️ | ✔️ | Windows 10+ |
| macOS | ✔️ | ✔️ | Mojave 10.14+ |
| Linux | ✔️ | GTK 3+ | |
| Web | ✔️ | All modern browsers |
Import it:
import'package:system_theme/system_theme.dart';Use the getter SystemTheme.accentColor.accent to get the system accent color.
final accentColor =SystemTheme.accentColor.accent;To reload the accent colors, use the method load():
awaitSystemTheme.accentColor.load();You can load the colors before running the app, so the colors can't be wrong at runtime:
voidmain() async {
WidgetsFlutterBinding.ensureInitialized();
awaitSystemTheme.accentColor.load();
runApp(MyApp());
}To avoid unexpected outcomes at runtime, it's recommended to configure your own fallback color. The fallback color is used if the system is not able to provide the color.
voidmain() async {
WidgetsFlutterBinding.ensureInitialized();
SystemTheme.fallbackColor =constColor(0xFF865432);
awaitSystemTheme.accentColor.load();
runApp(MyApp());
}To simply listen to changes on the system accent color, use the SystemTheme.onChange stream:
SystemTheme.onChange.listen((event) {
debugPrint('Accent color changed to ${event.accentColor}');
});Alteratively, you can the SystemThemeBuilder widget to listen to changes on the system accent color:
SystemThemeBuilder(
builder: (context, color) {
returnColoredBox(
color: color.accent, // Automatically updates when system theme changes
child:constCenter(
child:Text('System Accent Color'),
),
);
},
);Feel free to open an issue if you find an error or make pull requests.
- @alexmercerind for the Windows implementation
- @pgiacomo69 for the accent color listener
- @HosamHasanRamadan for the iOS implementation
- @kjeremy for the Android Kotlin Migration