Add onToggleDarkMode.

device_preview/example/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,7 +5,7 @@
 import FlutterMacOS
 import Foundation
 
-import shared_preferences_macos
+import shared_preferences_foundation
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
   SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin"))

device_preview/lib/device_preview.dart

@@ -1,20 +1,14 @@
 export 'package:device_frame/device_frame.dart';
 
 export 'src/device_preview.dart';
-
+export 'src/locales/default_locales.dart';
+export 'src/locales/locales.dart';
 export 'src/state/state.dart';
 export 'src/state/store.dart';
-
 export 'src/storage/file/file.dart';
 export 'src/storage/preferences/preferences.dart';
 export 'src/storage/storage.dart';
-export 'src/storage/file/file.dart';
-
-export 'src/locales/locales.dart';
-export 'src/locales/default_locales.dart';
-
 export 'src/utilities/screenshot.dart';
-
 export 'src/views/tool_panel/sections/accessibility.dart';
 export 'src/views/tool_panel/sections/device.dart';
 export 'src/views/tool_panel/sections/section.dart';

device_preview/lib/src/device_preview.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:ui' as ui;
 
 import 'package:device_frame/device_frame.dart';
 import 'package:device_preview/src/state/state.dart';
@@ -14,10 +15,8 @@ import 'package:device_preview/src/views/tool_panel/sections/system.dart';
 import 'package:device_preview/src/views/tool_panel/tool_panel.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
 import 'package:provider/provider.dart';
-import 'dart:ui' as ui;
 
 import 'locales/default_locales.dart';
 import 'utilities/screenshot.dart';
@@ -338,8 +337,8 @@ class DevicePreview extends StatefulWidget {
 
     return mediaQuery.copyWith(
       platformBrightness: isDarkMode ? Brightness.dark : Brightness.light,
-      textScaleFactor: textScaleFactor,
       boldText: boldText,
+      textScaler: TextScaler.linear(textScaleFactor),
       disableAnimations: disableAnimations,
       accessibleNavigation: accessibleNavigation,
       invertColors: invertColors,
@@ -350,8 +349,7 @@ class DevicePreview extends StatefulWidget {
 class _DevicePreviewState extends State<DevicePreview> {
   bool _isToolPanelPopOverOpen = false;
 
-  late DevicePreviewStorage storage =
-      widget.storage ?? DevicePreviewStorage.preferences();
+  late DevicePreviewStorage storage = widget.storage ?? DevicePreviewStorage.preferences();
 
   final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
 
@@ -361,8 +359,7 @@ class _DevicePreviewState extends State<DevicePreview> {
 
   /// Takes a screenshot with the current configuration.
   Future<DeviceScreenshot> screenshot(DevicePreviewStore store) async {
-    final boundary =
-        _repaintKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
+    final boundary = _repaintKey.currentContext!.findRenderObject() as RenderRepaintBoundary;
     const format = ui.ImageByteFormat.png;
 
     final image = await boundary.toImage(
@@ -535,22 +532,14 @@ class _DevicePreviewState extends State<DevicePreview> {
 
                     final borderRadius = isToolbarVisible
                         ? BorderRadius.only(
-                            topRight: isSmall
-                                ? Radius.zero
-                                : const Radius.circular(16),
+                            topRight: isSmall ? Radius.zero : const Radius.circular(16),
                             bottomRight: const Radius.circular(16),
-                            bottomLeft: isSmall
-                                ? const Radius.circular(16)
-                                : Radius.zero,
+                            bottomLeft: isSmall ? const Radius.circular(16) : Radius.zero,
                           )
                         : BorderRadius.zero;
-                    final double rightPanelOffset = !isSmall
-                        ? (isEnabled
-                            ? ToolPanel.panelWidth - 10
-                            : (64 + mediaQuery.padding.right))
-                        : 0;
-                    final double bottomPanelOffset =
-                        isSmall ? mediaQuery.padding.bottom + 52 : 0;
+                    final double rightPanelOffset =
+                        !isSmall ? (isEnabled ? ToolPanel.panelWidth - 10 : (64 + mediaQuery.padding.right)) : 0;
+                    final double bottomPanelOffset = isSmall ? mediaQuery.padding.bottom + 52 : 0;
                     return Stack(
                       children: <Widget>[
                         if (isToolbarVisible && isSmall)

device_preview/lib/src/state/custom_device.dart

@@ -1,10 +1,6 @@
-import 'dart:ui';
-
 import 'package:device_preview/device_preview.dart';
 import 'package:flutter/material.dart';
 
-import 'state.dart';
-
 /// A device info that can be customized at runtime to update
 /// its current preview.
 ///
@@ -32,8 +28,7 @@ class CustomDeviceInfo implements DeviceInfo {
   final CustomDeviceInfoData data;
 
   @override
-  $DeviceInfoCopyWith<DeviceInfo> get copyWith =>
-      throw UnsupportedError('Read only');
+  $DeviceInfoCopyWith<DeviceInfo> get copyWith => throw UnsupportedError('Read only');
 
   @override
   final DeviceIdentifier identifier;
@@ -86,13 +81,9 @@ class CustomDeviceIdentifier implements DeviceIdentifier {
   @override
   bool operator ==(dynamic other) {
     return identical(this, other) ||
-        (other is DeviceIdentifier &&
-            other.name == name &&
-            other.type == type &&
-            other.platform == platform);
+        (other is DeviceIdentifier && other.name == name && other.type == type && other.platform == platform);
   }
 
   @override
-  int get hashCode =>
-      runtimeType.hashCode ^ name.hashCode ^ type.hashCode ^ platform.hashCode;
+  int get hashCode => runtimeType.hashCode ^ name.hashCode ^ type.hashCode ^ platform.hashCode;
 }

device_preview/lib/src/state/store.dart

@@ -1,15 +1,10 @@
 import 'dart:async';
-import 'dart:ui';
 
-import 'package:device_frame/device_frame.dart';
-import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 
+import '../../device_preview.dart' as device_preview;
 import '../../device_preview.dart';
-import '../storage/storage.dart';
 import 'custom_device.dart';
-import 'state.dart';
-import '../../device_preview.dart' as device_preview;
 
 /// The store is a container for the current [state] of the device preview.
 ///
@@ -69,11 +64,10 @@ class DevicePreviewStore extends ChangeNotifier {
         final availaiableLocales = locales != null
             ? locales
                 .map(
-                  (available) =>
-                      defaultAvailableLocales.cast<NamedLocale?>().firstWhere(
-                            (all) => all!.code == available.toString(),
-                            orElse: () => null,
-                          ),
+                  (available) => defaultAvailableLocales.cast<NamedLocale?>().firstWhere(
+                        (all) => all!.code == available.toString(),
+                        orElse: () => null,
+                      ),
                 )
                 .where((x) => x != null)
                 .toList()
@@ -159,8 +153,7 @@ extension DevicePreviewStateHelperExtensions on DevicePreviewStore {
   /// Access to device preview settings from state's data.
   ///
   /// Throws an exception if not initialized.
-  DevicePreviewSettingsData get settings =>
-      data.settings ?? const DevicePreviewSettingsData();
+  DevicePreviewSettingsData get settings => data.settings ?? const DevicePreviewSettingsData();
 
   set settings(DevicePreviewSettingsData value) {
     data = data.copyWith(settings: value);
@@ -175,9 +168,7 @@ extension DevicePreviewStateHelperExtensions on DevicePreviewStore {
     }
     return state.maybeMap(
       initialized: (state) => state.devices.firstWhere(
-        (x) =>
-            x.identifier.toString() ==
-            (data.deviceIdentifier ?? defaultDevice.identifier.toString()),
+        (x) => x.identifier.toString() == (data.deviceIdentifier ?? defaultDevice.identifier.toString()),
         orElse: () => state.devices.first,
       ),
       orElse: () => throw Exception('Not initialized'),
@@ -246,6 +237,5 @@ extension DevicePreviewStateHelperExtensions on DevicePreviewStore {
   }
 
   /// Updates the custom device configuration.
-  void updateCustomDevice(CustomDeviceInfoData data) =>
-      this.data = this.data.copyWith(customDevice: data);
+  void updateCustomDevice(CustomDeviceInfoData data) => this.data = this.data.copyWith(customDevice: data);
 }

device_preview/lib/src/views/theme.dart

@@ -28,7 +28,6 @@ extension ThemeToolbarExtension on DevicePreviewToolBarThemeData {
           primaryColor: accentColor,
           primaryColorDark: accentColor,
           indicatorColor: accentColor,
-          toggleableActiveColor: accentColor,
           highlightColor: accentColor.withOpacity(0.1),
           sliderTheme: base.sliderTheme.copyWith(
             thumbColor: accentColor,
@@ -38,6 +37,48 @@ extension ThemeToolbarExtension on DevicePreviewToolBarThemeData {
             inactiveTickMarkColor: accentColor,
             overlayColor: accentColor.withOpacity(0.12),
           ),
+          checkboxTheme: CheckboxThemeData(
+            fillColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
+          radioTheme: RadioThemeData(
+            fillColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
+          switchTheme: SwitchThemeData(
+            thumbColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+            trackColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
         );
       case DevicePreviewToolBarThemeData.light:
         final base = ThemeData.light();
@@ -51,7 +92,6 @@ extension ThemeToolbarExtension on DevicePreviewToolBarThemeData {
           primaryColor: accentColor,
           primaryColorDark: accentColor,
           indicatorColor: accentColor,
-          toggleableActiveColor: accentColor,
           highlightColor: accentColor,
           appBarTheme: base.appBarTheme.copyWith(
             color: barColor,
@@ -64,6 +104,48 @@ extension ThemeToolbarExtension on DevicePreviewToolBarThemeData {
             inactiveTickMarkColor: accentColor,
             overlayColor: accentColor.withOpacity(0.12),
           ),
+          checkboxTheme: CheckboxThemeData(
+            fillColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
+          radioTheme: RadioThemeData(
+            fillColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
+          switchTheme: SwitchThemeData(
+            thumbColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+            trackColor: WidgetStateProperty.resolveWith<Color?>((Set<WidgetState> states) {
+              if (states.contains(WidgetState.disabled)) {
+                return null;
+              }
+              if (states.contains(WidgetState.selected)) {
+                return accentColor;
+              }
+              return null;
+            }),
+          ),
         );
     }
   }

device_preview/lib/src/views/tool_panel/sections/section.dart

@@ -36,7 +36,7 @@ class ToolPanelSection extends StatelessWidget {
               ),
               child: Text(
                 title.toUpperCase(),
-                style: theme.textTheme.subtitle2?.copyWith(
+                style: theme.textTheme.bodyMedium?.copyWith(
                   color: theme.hintColor,
                 ),
               ),

device_preview/lib/src/views/tool_panel/sections/settings.dart

@@ -1,12 +1,8 @@
 import 'package:device_preview/device_preview.dart';
-import 'package:device_preview/src/state/store.dart';
 import 'package:device_preview/src/views/theme.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:provider/provider.dart';
 
-import 'section.dart';
-
 /// All the settings for customizing the preview.
 class SettingsSection extends StatelessWidget {
   /// Create a new menu section with settings for customizing the preview.
@@ -42,9 +38,7 @@ class SettingsSection extends StatelessWidget {
             key: const Key('background-theme'),
             title: const Text('Background color'),
             subtitle: Text(
-              backgroundTheme == DevicePreviewBackgroundThemeData.dark
-                  ? 'Dark'
-                  : 'Light',
+              backgroundTheme == DevicePreviewBackgroundThemeData.dark ? 'Dark' : 'Light',
             ),
             trailing: Container(
               width: 24,
@@ -53,18 +47,17 @@ class SettingsSection extends StatelessWidget {
                 shape: BoxShape.circle,
                 color: background.scaffoldBackgroundColor,
                 border: Border.all(
-                  color: toolbar.backgroundColor,
+                  color: toolbar.appBarTheme.backgroundColor!,
                   width: 1,
                 ),
               ),
             ),
             onTap: () {
               final state = context.read<DevicePreviewStore>();
               state.settings = state.settings.copyWith(
-                backgroundTheme:
-                    backgroundTheme == DevicePreviewBackgroundThemeData.dark
-                        ? DevicePreviewBackgroundThemeData.light
-                        : DevicePreviewBackgroundThemeData.dark,
+                backgroundTheme: backgroundTheme == DevicePreviewBackgroundThemeData.dark
+                    ? DevicePreviewBackgroundThemeData.light
+                    : DevicePreviewBackgroundThemeData.dark,
               );
             },
           ),
@@ -73,9 +66,7 @@ class SettingsSection extends StatelessWidget {
             key: const Key('toolbar-theme'),
             title: const Text('Tools theme'),
             subtitle: Text(
-              toolbarTheme == DevicePreviewToolBarThemeData.dark
-                  ? 'Dark'
-                  : 'Light',
+              toolbarTheme == DevicePreviewToolBarThemeData.dark ? 'Dark' : 'Light',
             ),
             trailing: Container(
               width: 24,
@@ -84,7 +75,7 @@ class SettingsSection extends StatelessWidget {
                 shape: BoxShape.circle,
                 color: toolbar.scaffoldBackgroundColor,
                 border: Border.all(
-                  color: toolbar.backgroundColor,
+                  color: toolbar.colorScheme.surface,
                   width: 1,
                 ),
               ),