Merge pull request #690 from imshahab/m3-dynamic-theme

Implement Material 3 dynamic theming
2024-03-19 12:04:53 +01:00
parent 54ecabf572 d67c9be306
commit 9a1c83df09
9 changed files with 68 additions and 161 deletions
--- a/lib/core/theme/app_theme.dart
+++ b/lib/core/theme/app_theme.dart
@@ -1,138 +1,38 @@
-// mostly exact copy of flex color scheme 7.1's fabulous 12 theme
-import 'package:flex_color_scheme/flex_color_scheme.dart';
 import 'package:flutter/material.dart';
 import 'package:hiddify/core/theme/app_theme_mode.dart';
 import 'package:hiddify/core/theme/theme_extensions.dart';

 class AppTheme {
-  AppTheme(
-    this.mode,
-    this.fontFamily,
-  );
-
+  AppTheme(this.mode, this.fontFamily);
  final AppThemeMode mode;
  final String fontFamily;

-  ThemeData light() {
-    return FlexThemeData.light(
-      scheme: FlexScheme.indigoM3,
-      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
+  ThemeData lightTheme(ColorScheme? lightColorScheme) {
+    final ColorScheme scheme = lightColorScheme ??
+        ColorScheme.fromSeed(seedColor: const Color(0xFF293CA0));
+    return ThemeData(
      useMaterial3: true,
-      swapLegacyOnMaterial3: true,
-      useMaterial3ErrorColors: true,
-      blendLevel: 1,
-      subThemesData: const FlexSubThemesData(
-        useTextTheme: true,
-        useM2StyleDividerInM3: true,
-        elevatedButtonSchemeColor: SchemeColor.onPrimaryContainer,
-        elevatedButtonSecondarySchemeColor: SchemeColor.primaryContainer,
-        outlinedButtonOutlineSchemeColor: SchemeColor.primary,
-        toggleButtonsBorderSchemeColor: SchemeColor.primary,
-        segmentedButtonSchemeColor: SchemeColor.primary,
-        segmentedButtonBorderSchemeColor: SchemeColor.primary,
-        unselectedToggleIsColored: true,
-        sliderValueTinted: true,
-        inputDecoratorSchemeColor: SchemeColor.primary,
-        inputDecoratorBackgroundAlpha: 43,
-        inputDecoratorUnfocusedHasBorder: false,
-        inputDecoratorFocusedBorderWidth: 1.0,
-        inputDecoratorPrefixIconSchemeColor: SchemeColor.primary,
-        popupMenuRadius: 8.0,
-        popupMenuElevation: 3.0,
-        drawerIndicatorSchemeColor: SchemeColor.primary,
-        bottomNavigationBarMutedUnselectedLabel: false,
-        bottomNavigationBarMutedUnselectedIcon: false,
-        menuRadius: 8.0,
-        menuElevation: 3.0,
-        menuBarRadius: 0.0,
-        menuBarElevation: 2.0,
-        menuBarShadowColor: Color(0x00000000),
-        navigationBarSelectedLabelSchemeColor: SchemeColor.primary,
-        navigationBarMutedUnselectedLabel: false,
-        navigationBarSelectedIconSchemeColor: SchemeColor.onPrimary,
-        navigationBarMutedUnselectedIcon: false,
-        navigationBarIndicatorSchemeColor: SchemeColor.primary,
-        navigationBarIndicatorOpacity: 1.00,
-        navigationRailSelectedLabelSchemeColor: SchemeColor.primary,
-        navigationRailMutedUnselectedLabel: false,
-        navigationRailSelectedIconSchemeColor: SchemeColor.onPrimary,
-        navigationRailMutedUnselectedIcon: false,
-        navigationRailIndicatorSchemeColor: SchemeColor.primary,
-        navigationRailIndicatorOpacity: 1.00,
-        navigationRailBackgroundSchemeColor: SchemeColor.surface,
-      ),
-      keyColors: const FlexKeyColors(
-        useSecondary: true,
-        useTertiary: true,
-        keepPrimary: true,
-      ),
-      tones: FlexTones.jolly(Brightness.light),
-      visualDensity: FlexColorScheme.comfortablePlatformDensity,
+      colorScheme: scheme,
      fontFamily: fontFamily,
-      extensions: <ThemeExtension<dynamic>>{
+      extensions: const <ThemeExtension<dynamic>>{
        ConnectionButtonTheme.light,
      },
    );
  }

-  ThemeData dark() {
-    return FlexThemeData.dark(
-      scheme: FlexScheme.indigoM3,
+  ThemeData darkTheme(ColorScheme? darkColorScheme) {
+    final ColorScheme scheme = darkColorScheme ??
+        ColorScheme.fromSeed(
+          seedColor: const Color(0xFF293CA0),
+          brightness: Brightness.dark,
+        );
+    return ThemeData(
      useMaterial3: true,
-      swapLegacyOnMaterial3: true,
-      useMaterial3ErrorColors: true,
-      darkIsTrueBlack: mode.trueBlack,
-      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
-      // blendLevel: 1,
-      subThemesData: const FlexSubThemesData(
-        blendTextTheme: true,
-        useTextTheme: true,
-        useM2StyleDividerInM3: true,
-        elevatedButtonSchemeColor: SchemeColor.onPrimaryContainer,
-        elevatedButtonSecondarySchemeColor: SchemeColor.primaryContainer,
-        outlinedButtonOutlineSchemeColor: SchemeColor.primary,
-        toggleButtonsBorderSchemeColor: SchemeColor.primary,
-        segmentedButtonSchemeColor: SchemeColor.primary,
-        segmentedButtonBorderSchemeColor: SchemeColor.primary,
-        unselectedToggleIsColored: true,
-        sliderValueTinted: true,
-        inputDecoratorSchemeColor: SchemeColor.primary,
-        inputDecoratorBackgroundAlpha: 43,
-        inputDecoratorUnfocusedHasBorder: false,
-        inputDecoratorFocusedBorderWidth: 1.0,
-        inputDecoratorPrefixIconSchemeColor: SchemeColor.primary,
-        popupMenuRadius: 8.0,
-        popupMenuElevation: 3.0,
-        drawerIndicatorSchemeColor: SchemeColor.primary,
-        bottomNavigationBarMutedUnselectedLabel: false,
-        bottomNavigationBarMutedUnselectedIcon: false,
-        menuRadius: 8.0,
-        menuElevation: 3.0,
-        menuBarRadius: 0.0,
-        menuBarElevation: 2.0,
-        menuBarShadowColor: Color(0x00000000),
-        navigationBarSelectedLabelSchemeColor: SchemeColor.primary,
-        navigationBarMutedUnselectedLabel: false,
-        navigationBarSelectedIconSchemeColor: SchemeColor.onPrimary,
-        navigationBarMutedUnselectedIcon: false,
-        navigationBarIndicatorSchemeColor: SchemeColor.primary,
-        navigationBarIndicatorOpacity: 1.00,
-        navigationRailSelectedLabelSchemeColor: SchemeColor.primary,
-        navigationRailMutedUnselectedLabel: false,
-        navigationRailSelectedIconSchemeColor: SchemeColor.onPrimary,
-        navigationRailMutedUnselectedIcon: false,
-        navigationRailIndicatorSchemeColor: SchemeColor.primary,
-        navigationRailIndicatorOpacity: 1.00,
-        navigationRailBackgroundSchemeColor: SchemeColor.surface,
-      ),
-      keyColors: const FlexKeyColors(
-        useSecondary: true,
-        useTertiary: true,
-      ),
-      // tones: FlexTones.jolly(Brightness.dark),
-      visualDensity: FlexColorScheme.comfortablePlatformDensity,
+      colorScheme: scheme,
+      scaffoldBackgroundColor:
+          mode.trueBlack ? Colors.black : scheme.background,
      fontFamily: fontFamily,
-      extensions: <ThemeExtension<dynamic>>{
+      extensions: const <ThemeExtension<dynamic>>{
        ConnectionButtonTheme.light,
      },
    );
--- a/lib/features/app/widget/app.dart
+++ b/lib/features/app/widget/app.dart
@@ -1,4 +1,5 @@
 import 'package:accessibility_tools/accessibility_tools.dart';
+import 'package:dynamic_color/dynamic_color.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -38,16 +39,18 @@ class App extends HookConsumerWidget with PresLogger {
    return WindowWrapper(
      TrayWrapper(
        ShortcutWrapper(
-          ConnectionWrapper(
-            MaterialApp.router(
+          ConnectionWrapper(DynamicColorBuilder(
+            builder:
+                (ColorScheme? lightColorScheme, ColorScheme? darkColorScheme) {
+              return MaterialApp.router(
                routerConfig: router,
                locale: locale.flutterLocale,
                supportedLocales: AppLocaleUtils.supportedLocales,
                localizationsDelegates: GlobalMaterialLocalizations.delegates,
                debugShowCheckedModeBanner: false,
                themeMode: themeMode.flutterThemeMode,
-              theme: theme.light(),
-              darkTheme: theme.dark(),
+                theme: theme.lightTheme(lightColorScheme),
+                darkTheme: theme.darkTheme(darkColorScheme),
                title: Constants.appName,
                builder: (context, child) {
                  child = UpgradeAlert(
@@ -63,8 +66,9 @@ class App extends HookConsumerWidget with PresLogger {
                  }
                  return child;
                },
-            ),
-          ),
+              );
+            },
+          )),
        ),
      ),
    );
--- a/linux/flutter/generated_plugin_registrant.cc
+++ b/linux/flutter/generated_plugin_registrant.cc
@@ -6,6 +6,7 @@

 #include "generated_plugin_registrant.h"

+#include <dynamic_color/dynamic_color_plugin.h>
 #include <screen_retriever/screen_retriever_plugin.h>
 #include <sentry_flutter/sentry_flutter_plugin.h>
 #include <sqlite3_flutter_libs/sqlite3_flutter_libs_plugin.h>
@@ -14,6 +15,9 @@
 #include <window_manager/window_manager_plugin.h>

 void fl_register_plugins(FlPluginRegistry* registry) {
+  g_autoptr(FlPluginRegistrar) dynamic_color_registrar =
+      fl_plugin_registry_get_registrar_for_plugin(registry, "DynamicColorPlugin");
+  dynamic_color_plugin_register_with_registrar(dynamic_color_registrar);
  g_autoptr(FlPluginRegistrar) screen_retriever_registrar =
      fl_plugin_registry_get_registrar_for_plugin(registry, "ScreenRetrieverPlugin");
  screen_retriever_plugin_register_with_registrar(screen_retriever_registrar);
--- a/linux/flutter/generated_plugins.cmake
+++ b/linux/flutter/generated_plugins.cmake
@@ -3,6 +3,7 @@
 #

 list(APPEND FLUTTER_PLUGIN_LIST
+  dynamic_color
  screen_retriever
  sentry_flutter
  sqlite3_flutter_libs
--- a/macos/Flutter/GeneratedPluginRegistrant.swift
+++ b/macos/Flutter/GeneratedPluginRegistrant.swift
@@ -6,6 +6,7 @@ import FlutterMacOS
 import Foundation

 import device_info_plus
+import dynamic_color
 import flutter_timezone
 import in_app_review
 import mobile_scanner
@@ -23,6 +24,7 @@ import window_manager

 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
  DeviceInfoPlusMacosPlugin.register(with: registry.registrar(forPlugin: "DeviceInfoPlusMacosPlugin"))
+  DynamicColorPlugin.register(with: registry.registrar(forPlugin: "DynamicColorPlugin"))
  FlutterTimezonePlugin.register(with: registry.registrar(forPlugin: "FlutterTimezonePlugin"))
  InAppReviewPlugin.register(with: registry.registrar(forPlugin: "InAppReviewPlugin"))
  MobileScannerPlugin.register(with: registry.registrar(forPlugin: "MobileScannerPlugin"))
--- a/pubspec.lock
+++ b/pubspec.lock
@@ -402,6 +402,14 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "2.16.0"
+  dynamic_color:
+    dependency: "direct main"
+    description:
+      name: dynamic_color
+      sha256: eae98052fa6e2826bdac3dd2e921c6ce2903be15c6b7f8b6d8a5d49b5086298d
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.7.0"
  equatable:
    dependency: transitive
    description:
@@ -450,22 +458,6 @@ packages:
      url: "https://pub.dev"
    source: hosted
    version: "1.1.0"
-  flex_color_scheme:
-    dependency: "direct main"
-    description:
-      name: flex_color_scheme
-      sha256: "32914024a4f404d90ff449f58d279191675b28e7c08824046baf06826e99d984"
-      url: "https://pub.dev"
-    source: hosted
-    version: "7.3.1"
-  flex_seed_scheme:
-    dependency: transitive
-    description:
-      name: flex_seed_scheme
-      sha256: "29c12aba221eb8a368a119685371381f8035011d18de5ba277ad11d7dfb8657f"
-      url: "https://pub.dev"
-    source: hosted
-    version: "1.4.0"
  fluentui_system_icons:
    dependency: "direct main"
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -52,7 +52,6 @@ dependencies:
  neat_periodic_task: ^2.0.1
  watcher: ^1.1.0
  go_router: ^13.2.0
-  flex_color_scheme: ^7.3.1
  flutter_animate: ^4.5.0
  flutter_svg: ^2.0.10+1
  gap: ^3.0.1
@@ -84,6 +83,7 @@ dependencies:
    git: https://github.com/hiddify-com/flutter_circle_flags.git
  protobuf: ^3.1.0
  grpc: ^3.2.4
+  dynamic_color: ^1.7.0

 dev_dependencies:
  flutter_test:
--- a/windows/flutter/generated_plugin_registrant.cc
+++ b/windows/flutter/generated_plugin_registrant.cc
@@ -6,6 +6,7 @@

 #include "generated_plugin_registrant.h"

+#include <dynamic_color/dynamic_color_plugin_c_api.h>
 #include <protocol_handler_windows/protocol_handler_windows_plugin_c_api.h>
 #include <screen_retriever/screen_retriever_plugin.h>
 #include <sentry_flutter/sentry_flutter_plugin.h>
@@ -17,6 +18,8 @@
 #include <window_manager/window_manager_plugin.h>

 void RegisterPlugins(flutter::PluginRegistry* registry) {
+  DynamicColorPluginCApiRegisterWithRegistrar(
+      registry->GetRegistrarForPlugin("DynamicColorPluginCApi"));
  ProtocolHandlerWindowsPluginCApiRegisterWithRegistrar(
      registry->GetRegistrarForPlugin("ProtocolHandlerWindowsPluginCApi"));
  ScreenRetrieverPluginRegisterWithRegistrar(
--- a/windows/flutter/generated_plugins.cmake
+++ b/windows/flutter/generated_plugins.cmake
@@ -3,6 +3,7 @@
 #

 list(APPEND FLUTTER_PLUGIN_LIST
+  dynamic_color
  protocol_handler_windows
  screen_retriever
  sentry_flutter