fix(legacy): add dark mode support for pickers and dialogs

2026-04-26 08:25:33 +02:00
parent 4422f93903
commit 376e6bc13a
10 changed files with 79 additions and 17 deletions
--- a/modules/legacy/modules/device_management/lib/src/features/activity_meter/presentation/activity_meter_screen.dart
+++ b/modules/legacy/modules/device_management/lib/src/features/activity_meter/presentation/activity_meter_screen.dart
@@ -73,6 +73,7 @@ class _ActivityMeterBody extends ConsumerWidget {
      context: context,
      firstDate: now.subtract(const Duration(days: 365)),
      lastDate: now,
+      builder: legacyPickerThemeBuilder,
    );
    if (picked != null) {
      notifier.selectCustomRange(picked.start, picked.end);
--- a/modules/legacy/modules/device_management/lib/src/features/app_usage_schedules/presentation/widgets/edit_schedule_period_sheet.dart
+++ b/modules/legacy/modules/device_management/lib/src/features/app_usage_schedules/presentation/widgets/edit_schedule_period_sheet.dart
@@ -2,6 +2,7 @@ import 'package:design_system/design_system.dart';
 import 'package:device_management/src/core/domain/entities/app_usage_schedule_entity.dart';
 import 'package:flutter/material.dart';
 import 'package:legacy_theme/legacy_theme.dart';
+import 'package:legacy_ui/legacy_ui.dart';
 import 'package:sf_localizations/sf_localizations.dart';
 import 'package:utils/utils.dart';

@@ -55,6 +56,7 @@ class _EditSchedulePeriodSheetState extends State<_EditSchedulePeriodSheet> {
    final picked = await showTimePicker(
      context: context,
      initialTime: isStart ? _start : _end,
+      builder: legacyPickerThemeBuilder,
    );
    if (picked == null) return;
    setState(() {
--- a/modules/legacy/modules/device_management/lib/src/features/apps_use/presentation/apps_use_screen.dart
+++ b/modules/legacy/modules/device_management/lib/src/features/apps_use/presentation/apps_use_screen.dart
@@ -92,6 +92,7 @@ class AppsUseScreen extends ConsumerWidget {
      context: context,
      firstDate: now.subtract(const Duration(days: 365)),
      lastDate: now,
+      builder: legacyPickerThemeBuilder,
    );
    if (picked != null) {
      notifier.selectCustomRange(picked.start, picked.end);
--- a/modules/legacy/modules/device_management/lib/src/features/do_not_disturb/presentation/widgets/edit_period_sheet.dart
+++ b/modules/legacy/modules/device_management/lib/src/features/do_not_disturb/presentation/widgets/edit_period_sheet.dart
@@ -2,6 +2,7 @@ import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:legacy_theme/legacy_theme.dart';
+import 'package:legacy_ui/legacy_ui.dart';
 import 'package:sf_localizations/sf_localizations.dart';
 import 'package:utils/utils.dart';

@@ -110,6 +111,7 @@ class _EditPeriodSheetState extends ConsumerState<EditPeriodSheet> {
                      final picked = await showTimePicker(
                        context: context,
                        initialTime: start,
+                        builder: legacyPickerThemeBuilder,
                      );
                      if (picked != null) _start.value = picked;
                    },
@@ -128,6 +130,7 @@ class _EditPeriodSheetState extends ConsumerState<EditPeriodSheet> {
                      final picked = await showTimePicker(
                        context: context,
                        initialTime: end,
+                        builder: legacyPickerThemeBuilder,
                      );
                      if (picked != null) _end.value = picked;
                    },
--- a/modules/legacy/modules/device_management/lib/src/features/health/presentation/health_screen.dart
+++ b/modules/legacy/modules/device_management/lib/src/features/health/presentation/health_screen.dart
@@ -48,6 +48,7 @@ class _HealthScreenState extends ConsumerState<HealthScreen>
      context: context,
      firstDate: now.subtract(const Duration(days: 365)),
      lastDate: now,
+      builder: legacyPickerThemeBuilder,
    );
    if (picked != null) {
      notifier.selectCustomRange(picked.start, picked.end);
--- a/modules/legacy/modules/legacy_auth/lib/src/features/device_setup/presentation/steps/profile_step.dart
+++ b/modules/legacy/modules/legacy_auth/lib/src/features/device_setup/presentation/steps/profile_step.dart
@@ -1,5 +1,6 @@
 import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
+import 'package:legacy_ui/legacy_ui.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:legacy_auth/src/features/device_setup/presentation/providers/device_setup_controller.dart';
 import 'package:legacy_auth/src/features/device_setup/presentation/providers/device_setup_form_controllers.dart';
@@ -21,6 +22,7 @@ Future<void> _pickBornAt(
    initialDate: safeInitial,
    firstDate: DateTime(1900, 1, 1),
    lastDate: now,
+    builder: legacyPickerThemeBuilder,
  );

  if (picked != null) onPicked(picked);
--- a/modules/legacy/modules/settings/lib/src/features/alarm/presentation/widgets/alarm_form_screen.dart
+++ b/modules/legacy/modules/settings/lib/src/features/alarm/presentation/widgets/alarm_form_screen.dart
@@ -1,4 +1,3 @@
-import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:legacy_theme/legacy_theme.dart';
@@ -98,7 +97,7 @@ class _AlarmFormSheet extends ConsumerWidget {
                          style: TextStyle(
                            color: formState.canSave
                                ? primaryColor
-                                : Colors.grey,
+                                : Theme.of(context).colorScheme.outline,
                            fontWeight: FontWeight.w600,
                            fontSize:
                                SizeUtils.getByScreen(small: 16, big: 17),
@@ -108,20 +107,44 @@ class _AlarmFormSheet extends ConsumerWidget {
                    ],
                  ),
                  SizedBox(height: SizeUtils.getByScreen(small: 16, big: 18)),
-                  Container(
-                    height: SizeUtils.getByScreen(small: 160, big: 180),
-                    decoration: BoxDecoration(
-                      borderRadius:
-                          const BorderRadius.all(Radius.circular(16)),
-                      color: Colors.grey.shade50,
-                    ),
-                    child: CupertinoTimerPicker(
-                      mode: CupertinoTimerPickerMode.hm,
-                      initialTimerDuration: Duration(
-                        minutes: formState.durationMinutes,
+                  GestureDetector(
+                    onTap: () async {
+                      final picked = await showTimePicker(
+                        context: context,
+                        initialTime: TimeOfDay(
+                          hour: formState.durationMinutes ~/ 60,
+                          minute: formState.durationMinutes % 60,
+                        ),
+                        builder: legacyPickerThemeBuilder,
+                      );
+                      if (picked != null) {
+                        notifier.setDurationMinutes(
+                          picked.hour * 60 + picked.minute,
+                        );
+                      }
+                    },
+                    child: Container(
+                      width: double.infinity,
+                      padding: EdgeInsets.symmetric(
+                        vertical: SizeUtils.getByScreen(small: 24, big: 28),
+                      ),
+                      decoration: BoxDecoration(
+                        borderRadius:
+                            const BorderRadius.all(Radius.circular(16)),
+                        color: Theme.of(context)
+                            .colorScheme
+                            .surfaceContainerHighest,
+                      ),
+                      child: Center(
+                        child: Text(
+                          '${(formState.durationMinutes ~/ 60).toString().padLeft(2, '0')}:${(formState.durationMinutes % 60).toString().padLeft(2, '0')}',
+                          style: TextStyle(
+                            fontSize: 48,
+                            fontWeight: FontWeight.w300,
+                            color: primaryColor,
+                          ),
+                        ),
                      ),
-                      onTimerDurationChanged: (duration) =>
-                          notifier.setDurationMinutes(duration.inMinutes),
                    ),
                  ),
                  SizedBox(height: SizeUtils.getByScreen(small: 20, big: 22)),
@@ -197,7 +220,9 @@ class _RadioOption extends StatelessWidget {
          children: [
            Icon(
              isSelected ? Icons.radio_button_checked : Icons.radio_button_off,
-              color: isSelected ? primaryColor : Colors.grey,
+              color: isSelected
+                  ? primaryColor
+                  : Theme.of(context).colorScheme.outline,
              size: SizeUtils.getByScreen(small: 22, big: 24),
            ),
            const SizedBox(width: 12),
--- a/modules/legacy/packages/legacy_ui/lib/legacy_ui.dart
+++ b/modules/legacy/packages/legacy_ui/lib/legacy_ui.dart
@@ -6,3 +6,4 @@ export 'src/widgets/refreshable_error_state.dart';
 export 'src/widgets/week_day_chips.dart';
 export 'src/providers/map_style_provider.dart';
 export 'src/transitions/legacy_transitions.dart';
+export 'src/utils/legacy_picker_theme.dart';
--- a/modules/legacy/packages/legacy_ui/lib/src/transitions/legacy_transitions.dart
+++ b/modules/legacy/packages/legacy_ui/lib/src/transitions/legacy_transitions.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:legacy_theme/legacy_theme.dart';

 const _duration = Duration(milliseconds: 300);
 const _dialogDuration = Duration(milliseconds: 500);
@@ -8,13 +9,24 @@ Future<T?> showLegacyDialog<T>({
  required WidgetBuilder builder,
  bool barrierDismissible = true,
 }) {
+  final primaryColor = context.sfColors.legacyPrimary;
+  final brightness = Theme.of(context).brightness;
+
  return showGeneralDialog<T>(
    context: context,
    barrierDismissible: barrierDismissible,
    barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
    barrierColor: Colors.black54,
    transitionDuration: _dialogDuration,
-    pageBuilder: (dialogContext, __, ___) => builder(dialogContext),
+    pageBuilder: (dialogContext, __, ___) {
+      final colorScheme = brightness == Brightness.dark
+          ? ColorScheme.dark(primary: primaryColor)
+          : ColorScheme.light(primary: primaryColor);
+      return Theme(
+        data: Theme.of(dialogContext).copyWith(colorScheme: colorScheme),
+        child: builder(dialogContext),
+      );
+    },
    transitionBuilder: (_, animation, __, child) {
      final fadeCurved = CurvedAnimation(
        parent: animation,
--- a/modules/legacy/packages/legacy_ui/lib/src/utils/legacy_picker_theme.dart
+++ b/modules/legacy/packages/legacy_ui/lib/src/utils/legacy_picker_theme.dart
@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+import 'package:legacy_theme/legacy_theme.dart';
+
+Widget legacyPickerThemeBuilder(BuildContext context, Widget? child) {
+  final primaryColor = context.sfColors.legacyPrimary;
+  final brightness = Theme.of(context).brightness;
+  final colorScheme = brightness == Brightness.dark
+      ? ColorScheme.dark(primary: primaryColor)
+      : ColorScheme.light(primary: primaryColor);
+  return Theme(
+    data: Theme.of(context).copyWith(colorScheme: colorScheme),
+    child: child!,
+  );
+}