feat: AMOLED Dark Mode (#3703)

* ignored some generated files * init amoled mode * color scheme * test updated for amoled * added accent color picker * localized accent color picker * added color provider * Dark Mode changed to Theme mode * Map key iteration only * Update packages/smooth_app/lib/l10n/app_en.arb Co-authored-by: Aman Raj <57723319+AshAman999@users.noreply.github.com> * removed external dep * updated golden test * added comments * using shade fun * color scheme localization * color scheme localization * added textContrast * color contrast app settings * merged upstream * typo fix * added color to DropDownMenuItems * SnackBar text, contrast level * text contrast change to pass WCAG2.1 * snackBar Color Change --------- Co-authored-by: Aman Raj <57723319+AshAman999@users.noreply.github.com>
openfoodfacts · Mar 9, 2023 · 0363aff · 0363aff
1 parent 777f54c
commit 0363aff
Show file tree

Hide file tree

Showing 45 changed files with 526 additions and 153 deletions.
diff --git a/packages/smooth_app/lib/cards/product_cards/smooth_product_card_found.dart b/packages/smooth_app/lib/cards/product_cards/smooth_product_card_found.dart
@@ -131,11 +131,7 @@ class SmoothProductCardFound extends StatelessWidget {
                                   alignment: AlignmentDirectional.centerStart,
                                   child: Text(
                                     helper.getSubtitle(appLocalizations),
-                                    style:
-                                        themeData.textTheme.bodyMedium!.apply(
-                                      color: helper
-                                          .getButtonForegroundColor(isDarkMode),
-                                    ),
+                                    style: themeData.textTheme.bodyMedium,
                                   ),
                                 ),
                               ),

diff --git a/packages/smooth_app/lib/data_models/user_preferences.dart b/packages/smooth_app/lib/data_models/user_preferences.dart
@@ -4,6 +4,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'package:smooth_app/data_models/product_preferences.dart';
 import 'package:smooth_app/pages/onboarding/onboarding_flow_navigator.dart';
 import 'package:smooth_app/pages/preferences/user_preferences_dev_mode.dart';
+import 'package:smooth_app/themes/color_schemes.dart';
 
 /// User choice regarding the picture source.
 enum UserPictureSource {
@@ -48,6 +49,8 @@ class UserPreferences extends ChangeNotifier {
   static const String _TAG_PREFIX_IMPORTANCE = 'IMPORTANCE_AS_STRING';
   static const String _TAG_INIT = 'init';
   static const String _TAG_CURRENT_THEME_MODE = 'currentThemeMode';
+  static const String _TAG_CURRENT_COLOR_SCHEME = 'currentColorScheme';
+  static const String _TAG_CURRENT_CONTRAST_MODE = 'contrastMode';
   static const String _TAG_USER_COUNTRY_CODE = 'userCountry';
   static const String _TAG_LAST_VISITED_ONBOARDING_PAGE =
       'lastVisitedOnboardingPage';
@@ -113,6 +116,17 @@ class UserPreferences extends ChangeNotifier {
     notifyListeners();
   }
 
+  Future<void> setColorScheme(final String color) async {
+    await _sharedPreferences.setString(_TAG_CURRENT_COLOR_SCHEME, color);
+    notifyListeners();
+  }
+
+  Future<void> setContrastScheme(final String contrastLevel) async {
+    await _sharedPreferences.setString(
+        _TAG_CURRENT_CONTRAST_MODE, contrastLevel);
+    notifyListeners();
+  }
+
   Future<void> setCrashReports(final bool state) async {
     await _sharedPreferences.setBool(_TAG_CRASH_REPORTS, state);
     notifyListeners();
@@ -124,6 +138,14 @@ class UserPreferences extends ChangeNotifier {
   String get currentTheme =>
       _sharedPreferences.getString(_TAG_CURRENT_THEME_MODE) ?? 'System Default';
 
+  String get currentColor =>
+      _sharedPreferences.getString(_TAG_CURRENT_COLOR_SCHEME) ??
+      COLOR_DEFAULT_NAME;
+
+  String get currentContrastLevel =>
+      _sharedPreferences.getString(_TAG_CURRENT_CONTRAST_MODE) ??
+      CONTRAST_MEDIUM;
+
   Future<void> setUserCountry(final String countryCode) async {
     await _sharedPreferences.setString(_TAG_USER_COUNTRY_CODE, countryCode);
     notifyListeners();

diff --git a/packages/smooth_app/lib/generic_lib/widgets/language_selector.dart b/packages/smooth_app/lib/generic_lib/widgets/language_selector.dart
@@ -41,6 +41,7 @@ class LanguageSelectorSettings extends StatelessWidget {
         '$nameInLanguage ($nameInEnglish)',
         softWrap: false,
         overflow: TextOverflow.fade,
+        style: Theme.of(context).textTheme.bodyMedium,
       ),
       trailing: const Icon(Icons.arrow_drop_down),
       onTap: () async {

diff --git a/packages/smooth_app/lib/l10n/app_en.arb b/packages/smooth_app/lib/l10n/app_en.arb
@@ -265,7 +265,7 @@
     "@settingsTitle": {
         "description": "The title of the Settings page"
     },
-    "darkmode": "Dark mode",
+    "darkmode": "Theme",
     "@darkmode": {
         "description": "The name of the darkmode on off switch"
     },
@@ -1926,7 +1926,71 @@
     "background_task_question_stop": "Do you want to stop that task ASAP?",
     "feed_back": "Feedback",
     "undo": "Undo",
-    "copy_email_to_clip_board": "Copy emailto clipboard",
+    "copy_email_to_clip_board": "Copy email to clipboard",
     "please_send_us_an_email_to": "Please send us manually an email to",
-    "email_copied_to_clip_board": "Email copied to clipboard!"
+    "email_copied_to_clip_board": "Email copied to clipboard!",
+    "select_accent_color": "Select Accent Color",
+    "@select_accent_color": {
+        "description": "Accent Color for the application in AMOLED mode."
+    },
+    "theme_amoled": "AMOLED",
+    "@theme_amoled": {
+        "description": "AMOLED theme mode."
+    },
+    "color_blue": "Blue",
+    "@color_blue": {
+        "description": "Color Blue"
+    },
+    "color_cyan": "Cyan",
+    "@color_cyan": {
+        "description": "Color Cyan"
+    },
+    "color_green": "Green",
+    "@color_green": {
+        "description": "Color Green"
+    },
+    "color_light_brown": "Default",
+    "@color_light_brown": {
+        "description": "Color Light Brown, Default Open Food Facts Color"
+    },
+    "color_magenta": "Magenta",
+    "@color_magenta": {
+        "description": "Color Magenta"
+    },
+    "color_orange": "Orange",
+    "@color_orange": {
+        "description": "Color Orange"
+    },
+    "color_pink": "Pink",
+    "@color_pink": {
+        "description": "Color Pink"
+    },
+    "color_red": "Red",
+    "@color_red": {
+        "description": "Color Red"
+    },
+    "color_rust": "Rust",
+    "@color_rust": {
+        "description": "Color Rust"
+    },
+    "color_teal": "Teal",
+    "@color_teal": {
+        "description": "Color Teal"
+    },
+    "text_contrast_mode": "Text Contrast",
+    "@text_contrast_mode": {
+        "description": "Text Contrast Color Mode"
+    },
+    "contrast_high": "High",
+    "@contrast_high": {
+        "description": "High Contrast Text Color"
+    },
+    "contrast_medium": "Medium",
+    "@contrast_medium": {
+        "description": "Medium Contrast Text Color"
+    },
+    "contrast_low": "Low",
+    "@contrast_low": {
+        "description": "Low Contrast Text Color"
+    }
 }
diff --git a/packages/smooth_app/lib/main.dart b/packages/smooth_app/lib/main.dart
@@ -29,6 +29,8 @@ import 'package:smooth_app/helpers/permission_helper.dart';
 import 'package:smooth_app/pages/onboarding/onboarding_flow_navigator.dart';
 import 'package:smooth_app/query/product_query.dart';
 import 'package:smooth_app/services/smooth_services.dart';
+import 'package:smooth_app/themes/color_provider.dart';
+import 'package:smooth_app/themes/contrast_provider.dart';
 import 'package:smooth_app/themes/smooth_theme.dart';
 import 'package:smooth_app/themes/theme_provider.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
@@ -100,6 +102,8 @@ late UserPreferences _userPreferences;
 late ProductPreferences _productPreferences;
 late LocalDatabase _localDatabase;
 late ThemeProvider _themeProvider;
+late ColorProvider _colorProvider;
+late TextContrastProvider _textContrastProvider;
 final ContinuousScanModel _continuousScanModel = ContinuousScanModel();
 final PermissionListener _permissionListener =
     PermissionListener(permission: Permission.camera);
@@ -133,6 +137,8 @@ Future<bool> _init1(AppStore appStore) async {
   AnalyticsHelper.setCrashReports(_userPreferences.crashReports);
   ProductQuery.setCountry(_userPreferences.userCountryCode);
   _themeProvider = ThemeProvider(_userPreferences);
+  _colorProvider = ColorProvider(_userPreferences);
+  _textContrastProvider = TextContrastProvider(_userPreferences);
   ProductQuery.setQueryType(_userPreferences);
 
   await CameraHelper.init();
@@ -204,6 +210,8 @@ class _SmoothAppState extends State<SmoothApp> {
             provide<ProductPreferences>(_productPreferences),
             provide<LocalDatabase>(_localDatabase),
             provide<ThemeProvider>(_themeProvider),
+            provide<ColorProvider>(_colorProvider),
+            provide<TextContrastProvider>(_textContrastProvider),
             provide<UserManagementProvider>(_userManagementProvider),
             provide<ContinuousScanModel>(_continuousScanModel),
             provide<SmoothAppDataImporter>(_appDataImporter),
@@ -223,6 +231,9 @@ class _SmoothAppState extends State<SmoothApp> {
 
   Widget _buildApp(BuildContext context, Widget? child) {
     final ThemeProvider themeProvider = context.watch<ThemeProvider>();
+    final ColorProvider colorProvider = context.watch<ColorProvider>();
+    final TextContrastProvider textContrastProvider =
+        context.watch<TextContrastProvider>();
     final OnboardingPage lastVisitedOnboardingPage =
         _userPreferences.lastVisitedOnboardingPage;
     final Widget appWidget = OnboardingFlowNavigator(_userPreferences)
@@ -246,13 +257,9 @@ class _SmoothAppState extends State<SmoothApp> {
         SentryNavigatorObserver(),
       ],
       theme: SmoothTheme.getThemeData(
-        Brightness.light,
-        themeProvider,
-      ),
+          Brightness.light, themeProvider, colorProvider, textContrastProvider),
       darkTheme: SmoothTheme.getThemeData(
-        Brightness.dark,
-        themeProvider,
-      ),
+          Brightness.dark, themeProvider, colorProvider, textContrastProvider),
       themeMode: themeProvider.currentThemeMode,
       home: SmoothAppGetLanguage(appWidget, _userPreferences),
     );