diff --git a/packages/smooth_app/lib/pages/product/edit_product_page.dart b/packages/smooth_app/lib/pages/product/edit_product_page.dart
index cbf058063254..eb3ace52cb25 100644
--- a/packages/smooth_app/lib/pages/product/edit_product_page.dart
+++ b/packages/smooth_app/lib/pages/product/edit_product_page.dart
@@ -22,6 +22,8 @@ import 'package:smooth_app/pages/product/product_field_editor.dart';
 import 'package:smooth_app/pages/product/product_image_gallery_view.dart';
 import 'package:smooth_app/pages/product/simple_input_page.dart';
 import 'package:smooth_app/pages/product/simple_input_page_helpers.dart';
+import 'package:smooth_app/themes/smooth_theme_colors.dart';
+import 'package:smooth_app/themes/theme_provider.dart';
 import 'package:smooth_app/widgets/smooth_app_bar.dart';
 import 'package:smooth_app/widgets/smooth_floating_message.dart';
 import 'package:smooth_app/widgets/smooth_scaffold.dart';
@@ -53,6 +55,8 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
     context.watch<LocalDatabase>();
     refreshUpToDate();
     final ThemeData theme = Theme.of(context);
+    final bool lightTheme = context.lightTheme();
+
     final String productName = getProductName(
       upToDateProduct,
       appLocalizations,
@@ -61,9 +65,13 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
         getProductBrands(upToDateProduct, appLocalizations);
 
     return SmoothScaffold(
+      backgroundColor: lightTheme
+          ? theme.extension<SmoothColorsThemeExtension>()!.primaryLight
+          : null,
       appBar: SmoothAppBar(
         centerTitle: false,
         leading: const SmoothBackButton(),
+        backgroundColor: lightTheme ? Colors.white : null,
         title: Semantics(
           value: productName,
           child: ExcludeSemantics(
@@ -174,8 +182,10 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
               ),
               if (upToDateProduct.productType != ProductType.product)
                 _ListTitleItem(
-                  leading:
-                      const SvgIcon('assets/cacheTintable/ingredients.svg'),
+                  leading: const SvgIcon(
+                    'assets/cacheTintable/ingredients.svg',
+                    dontAddColor: true,
+                  ),
                   title:
                       appLocalizations.edit_product_form_item_ingredients_title,
                   onTap: () async => ProductFieldOcrIngredientEditor().edit(
@@ -191,8 +201,10 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
               if (upToDateProduct.productType != ProductType.beauty &&
                   upToDateProduct.productType != ProductType.product)
                 _ListTitleItem(
-                    leading:
-                        const SvgIcon('assets/cacheTintable/scale-balance.svg'),
+                    leading: const SvgIcon(
+                      'assets/cacheTintable/scale-balance.svg',
+                      dontAddColor: true,
+                    ),
                     title: appLocalizations
                         .edit_product_form_item_nutrition_facts_title,
                     subtitle: appLocalizations
@@ -219,7 +231,10 @@ class _EditProductPageState extends State<EditProductPage> with UpToDateMixin {
                     }),
               _getSimpleListTileItem(SimpleInputPageLabelHelper()),
               _ListTitleItem(
-                leading: const SvgIcon('assets/cacheTintable/packaging.svg'),
+                leading: const SvgIcon(
+                  'assets/cacheTintable/packaging.svg',
+                  dontAddColor: true,
+                ),
                 title: appLocalizations.edit_packagings_title,
                 onTap: () async => ProductFieldPackagingEditor().edit(
                   context: context,
diff --git a/packages/smooth_app/lib/widgets/smooth_app_bar.dart b/packages/smooth_app/lib/widgets/smooth_app_bar.dart
index a08bc81e44bc..14d73672f177 100644
--- a/packages/smooth_app/lib/widgets/smooth_app_bar.dart
+++ b/packages/smooth_app/lib/widgets/smooth_app_bar.dart
@@ -18,9 +18,10 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
     this.flexibleSpace,
     this.bottom,
     this.elevation,
-    this.scrolledUnderElevation,
+    this.scrolledUnderElevation = 0.0,
+    this.notificationPredicate,
     this.shadowColor,
-    this.surfaceTintColor,
+    // this.surfaceTintColor,
     this.backgroundColor,
     this.foregroundColor,
     this.iconTheme,
@@ -41,6 +42,8 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
     this.actionModeCloseTooltip,
     this.onLeaveActionMode,
     this.ignoreSemanticsForSubtitle = false,
+    this.forceMaterialTransparency = false,
+    this.clipBehavior,
     super.key,
   })  : assert(!actionMode || actionModeTitle != null),
         preferredSize =
@@ -58,8 +61,11 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
   final PreferredSizeWidget? bottom;
   final double? elevation;
   final double? scrolledUnderElevation;
+  final ScrollNotificationPredicate? notificationPredicate;
   final Color? shadowColor;
-  final Color? surfaceTintColor;
+
+  // Disabled as it will do unexpected things with [backgroundColor]
+  // final Color? surfaceTintColor;
   final Color? backgroundColor;
   final Color? foregroundColor;
   final IconThemeData? iconTheme;
@@ -79,6 +85,8 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
   final TextStyle? titleTextStyle;
   final SystemUiOverlayStyle? systemOverlayStyle;
   final bool? ignoreSemanticsForSubtitle;
+  final bool forceMaterialTransparency;
+  final Clip? clipBehavior;
 
   final VoidCallback? onLeaveActionMode;
   final String? actionModeCloseTooltip;
@@ -101,11 +109,11 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
       },
       child: actionMode
           ? _createActionModeAppBar(context)
-          : _createAppBar(parentRoute),
+          : _createAppBar(context, parentRoute),
     );
   }
 
-  Widget _createAppBar(ModalRoute<dynamic>? parentRoute) {
+  Widget _createAppBar(BuildContext context, ModalRoute<dynamic>? parentRoute) {
     final bool useCloseButton =
         parentRoute is PageRoute<dynamic> && parentRoute.fullscreenDialog;
     Widget? leadingWidget = leading;
@@ -127,8 +135,11 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
       bottom: bottom,
       elevation: elevation,
       scrolledUnderElevation: scrolledUnderElevation,
+      notificationPredicate:
+          notificationPredicate ?? defaultScrollNotificationPredicate,
       shadowColor: shadowColor,
-      surfaceTintColor: surfaceTintColor,
+      surfaceTintColor:
+          backgroundColor ?? Theme.of(context).appBarTheme.backgroundColor,
       backgroundColor: backgroundColor,
       foregroundColor: foregroundColor,
       iconTheme: iconTheme,
@@ -143,8 +154,9 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
       toolbarHeight: toolbarHeight,
       leadingWidth: leadingWidth,
       toolbarTextStyle: toolbarTextStyle,
-      titleTextStyle: titleTextStyle,
       systemOverlayStyle: systemOverlayStyle,
+      forceMaterialTransparency: forceMaterialTransparency,
+      clipBehavior: clipBehavior,
     );
   }
 
@@ -171,7 +183,8 @@ class SmoothAppBar extends StatelessWidget implements PreferredSizeWidget {
           elevation: elevation,
           scrolledUnderElevation: scrolledUnderElevation,
           shadowColor: shadowColor,
-          surfaceTintColor: surfaceTintColor,
+          surfaceTintColor:
+              backgroundColor ?? Theme.of(context).appBarTheme.backgroundColor,
           backgroundColor: backgroundColor,
           foregroundColor: foregroundColor,
           iconTheme: iconTheme,