setting to control modal barrier

app/lib/features/settings/presentation/screens/appearance_display_settings.dart

@@ -69,6 +69,7 @@ class _VisualSection extends StatelessWidget {
         SettingSection(name: 'Visual'),
         _UiZoomSection(),
         _DisableAnimationsTile(),
+        _ShowModalBarrierTile(),
         _ThemeSection(),
       ],
     );
@@ -177,6 +178,34 @@ class _DisableAnimationsTile extends HookConsumerWidget {
   }
 }
 
+class _ShowModalBarrierTile extends HookConsumerWidget {
+  const _ShowModalBarrierTile();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final showModalBarrier = ref.watch(
+      generalSettingsWithDefaultsProvider.select((s) => s.showModalBarrier),
+    );
+
+    return SwitchListTile.adaptive(
+      title: const Text('Show Modal Barrier'),
+      subtitle: const Text(
+        'Dim the background behind dialogs and bottom sheets',
+      ),
+      secondary: const Icon(Icons.layers),
+      value: showModalBarrier,
+      onChanged: (value) async {
+        await ref
+            .read(saveGeneralSettingsControllerProvider.notifier)
+            .save(
+              (currentSettings) =>
+                  currentSettings.copyWith.showModalBarrier(value),
+            );
+      },
+    );
+  }
+}
+
 class _TabBarSection extends StatelessWidget {
   const _TabBarSection();