system_theme 3.3.0

A Flutter Plugin to retrieve and listen to the system's accent color. Supports Android, iOS, Web, Windows, macOS, and Linux.

example/lib/main.dart

import 'package:flutter/foundation.dart' show defaultTargetPlatform;
import 'package:flutter/material.dart';
import 'package:system_theme/system_theme.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemTheme.accentColor.load();
  SystemTheme.onChange.listen((color) {
    debugPrint('Accent color changed to ${color.accent}');
  });

  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return SystemThemeBuilder(
      builder: (context, color) {
        final colors = [
          color.lightest,
          color.lighter,
          color.light,
          color.accent,
          color.dark,
          color.darker,
          color.darkest,
        ];
        return Scaffold(
          body: SafeArea(
            child: Column(
              children: [
                Text(
                  'Accent color: ${defaultTargetPlatform.supportsAccentColor ? 'supported' : 'not supported'}',
                ),
                Expanded(
                  child: Flex(
                    direction: switch (MediaQuery.orientationOf(context)) {
                      Orientation.portrait => Axis.vertical,
                      Orientation.landscape => Axis.horizontal,
                    },
                    children: [
                      ...colors.map((color) {
                        return Expanded(
                          child: Container(
                            color: color,
                            alignment: Alignment.center,
                            child: Text(
                              [
                                    'Lightest',
                                    'Lighter',
                                    'Light',
                                    'Default',
                                    'Dark',
                                    'Darker',
                                    'Darkest',
                                  ][colors.indexOf(color)] +
                                  '\n${color.toHex()}',
                              style: Theme.of(context).textTheme.titleLarge
                                  ?.copyWith(
                                    color: color.computeLuminance() >= 0.5
                                        ? Colors.black
                                        : Colors.white,
                                  ),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        );
                      }),
                    ],
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

extension ColorExtension on Color {
  String toHex() {
    return '#${toARGB32().toRadixString(16).padLeft(8, '0').substring(2, 8)}';
  }
}