Use system theme accent color v1 SUPERSEDED

delthas: 1
 Use system theme accent color

 6 files changed, 29 insertions(+), 2 deletions(-)

[PATCH] Use system theme accent color Export this patch

On Material 3, several apps use the system theme accent color in
their GUI, such as the Google Calendar app.

This enables reading the system theme accent color, then using it
in our theme (falling back to our original color, indigo).
---
 lib/app.dart                                 |  5 +++--
 lib/main.dart                                |  4 ++++
 linux/flutter/generated_plugin_registrant.cc |  4 ++++
 linux/flutter/generated_plugins.cmake        |  1 +
 pubspec.lock                                 | 16 ++++++++++++++++
 pubspec.yaml                                 |  1 +
 6 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/lib/app.dart b/lib/app.dart
index f52ab94..4deae28 100644
--- a/lib/app.dart
+++ b/lib/app.dart
@@ -6,6 +6,7 @@ import 'package:connectivity_plus/connectivity_plus.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:share_handler/share_handler.dart';
+import 'package:system_theme/system_theme.dart';
 
 import 'ansi.dart';
 import 'client.dart';
@@ -547,8 +548,8 @@ class _AppState extends State<App> with WidgetsBindingObserver {
 	Widget build(BuildContext context) {
 		return MaterialApp(
 			title: 'Goguma',
-			theme: ThemeData(colorSchemeSeed: Colors.indigo),
-			darkTheme: ThemeData(brightness: Brightness.dark, colorSchemeSeed: Colors.indigo),
+			theme: ThemeData(colorSchemeSeed: SystemTheme.accentColor.accent),
+			darkTheme: ThemeData(brightness: Brightness.dark, colorSchemeSeed: SystemTheme.accentColor.accent),
 			themeMode: _themeMode,
 			initialRoute: _initialRoute,
 			onGenerateRoute: _handleGenerateRoute,
diff --git a/lib/main.dart b/lib/main.dart
index e5664d8..632039d 100644
--- a/lib/main.dart
+++ b/lib/main.dart
@@ -8,6 +8,7 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:share_handler/share_handler.dart';
+import 'package:system_theme/system_theme.dart';
 import 'package:workmanager/workmanager.dart';
 
 import 'android_le.dart';
@@ -129,6 +130,9 @@ void main() async {
 		}
 	});
 
+	SystemTheme.fallbackColor = Colors.indigo;
+	await SystemTheme.accentColor.load();
+
 	runApp(MultiProvider(
 		providers: [
 			Provider<DB>.value(value: db),
diff --git a/linux/flutter/generated_plugin_registrant.cc b/linux/flutter/generated_plugin_registrant.cc
index 4914847..aca6ca7 100644
--- a/linux/flutter/generated_plugin_registrant.cc
+++ b/linux/flutter/generated_plugin_registrant.cc
@@ -8,6 +8,7 @@
 
 #include <file_selector_linux/file_selector_plugin.h>
 #include <gtk/gtk_plugin.h>
+#include <system_theme/system_theme_plugin.h>
 #include <url_launcher_linux/url_launcher_plugin.h>
 #include <webcrypto/webcrypto_plugin.h>
 
@@ -18,6 +19,9 @@ void fl_register_plugins(FlPluginRegistry* registry) {
   g_autoptr(FlPluginRegistrar) gtk_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "GtkPlugin");
   gtk_plugin_register_with_registrar(gtk_registrar);
+  g_autoptr(FlPluginRegistrar) system_theme_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "SystemThemePlugin");
+  system_theme_plugin_register_with_registrar(system_theme_registrar);
   g_autoptr(FlPluginRegistrar) url_launcher_linux_registrar =
       fl_plugin_registry_get_registrar_for_plugin(registry, "UrlLauncherPlugin");
   url_launcher_plugin_register_with_registrar(url_launcher_linux_registrar);
diff --git a/linux/flutter/generated_plugins.cmake b/linux/flutter/generated_plugins.cmake
index 3823e20..247d28c 100644
--- a/linux/flutter/generated_plugins.cmake
+++ b/linux/flutter/generated_plugins.cmake
@@ -5,6 +5,7 @@
 list(APPEND FLUTTER_PLUGIN_LIST
   file_selector_linux
   gtk
+  system_theme
   url_launcher_linux
   webcrypto
 )
diff --git a/pubspec.lock b/pubspec.lock
index 88e7e33..e78db73 100644
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -949,6 +949,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.0+1"
+  system_theme:
+    dependency: "direct main"
+    description:
+      name: system_theme
+      sha256: "1f208db140a3d1e1eac2034b54920d95699c1534df576ced44b3312c5de3975f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.3.1"
+  system_theme_web:
+    dependency: transitive
+    description:
+      name: system_theme_web
+      sha256: "7566f5a928f6d28d7a60c97bea8a851d1c6bc9b86a4df2366230a97458489219"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.2"
   term_glyph:
     dependency: transitive
     description:
diff --git a/pubspec.yaml b/pubspec.yaml
index 5f59a73..1caf42f 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -46,6 +46,7 @@ dependencies:
   file_selector: ^1.0.1
   flutter_apns_only: ^1.6.0
   share_handler: ^0.0.21
+  system_theme: ^2.3.1
 
 dev_dependencies:
   flutter_lints: ^4.0.0

base-commit: 4ca03506b2ba23d9da29e2c9c1fb2bb1db304db8
-- 
2.38.0

Simon Ser <contact@emersion.fr>

6 months ago

Sounds good in principle. Some notes:

- The Material 3 docs [1] describe how to choose a color scheme
- The more "official" plugin seems to be dynamic_color [2]

[1]: https://m3.material.io/styles/color/choosing-a-scheme
[2]: https://pub.dev/packages/dynamic_color