Refactor theme declaration and introduce theme service in Example

example/lib/main.dart

@@ -1,15 +1,47 @@
 import 'package:flutter/material.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:zeta_example/theme_service.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 import 'home.dart';
 
-void main() => runApp(const ZetaExample());
+void main() async {
+  WidgetsFlutterBinding.ensureInitialized();
+
+  final preferences = await SharedPreferences.getInstance();
+  final themeService = SharedPrefsThemeService(preferences);
+  final themPreferences = await themeService.loadTheme();
+
+  runApp(
+    ZetaExample(
+      themeService: themeService,
+      initialThemeData: themPreferences.$1 ?? ZetaThemeData(),
+      initialThemeMode: themPreferences.$2 ?? ThemeMode.system,
+      initialContrast: themPreferences.$3 ?? ZetaContrast.aa,
+    ),
+  );
+}
 
 class ZetaExample extends StatelessWidget {
-  const ZetaExample({super.key});
+  const ZetaExample({
+    super.key,
+    required this.themeService,
+    required this.initialContrast,
+    required this.initialThemeMode,
+    required this.initialThemeData,
+  });
+
+  final ZetaThemeService themeService;
+  final ZetaContrast initialContrast;
+  final ThemeMode initialThemeMode;
+  final ZetaThemeData initialThemeData;
 
   @override
   Widget build(BuildContext context) {
     return ZetaProvider(
+      themeService: themeService,
+      initialContrast: initialContrast,
+      initialThemeData: initialThemeData,
+      initialThemeMode: initialThemeMode,
       builder: (context, themeData, themeMode) {
         final dark = themeData.colorsDark.toScheme();
         final light = themeData.colorsLight.toScheme();

example/lib/pages/theme_color_switch.dart

@@ -1,29 +1,29 @@
 import 'package:flutter/material.dart';
 import 'package:zeta_flutter/zeta_flutter.dart';
 
+late final appThemes = {
+  "default": ZetaThemeData(),
+  "teal": ZetaThemeData(
+    identifier: 'teal',
+    primary: ZetaColorBase.teal,
+  ),
+  "yellow": ZetaThemeData(
+    identifier: 'yellow',
+    primary: ZetaColorBase.yellow,
+  ),
+  "red": ZetaThemeData(
+    identifier: 'red',
+    primary: ZetaColorBase.red,
+  ),
+  "purple": ZetaThemeData(
+    identifier: 'purple',
+    primary: ZetaColorBase.purple,
+  ),
+};
+
 class ZetaThemeColorSwitch extends StatelessWidget {
   ZetaThemeColorSwitch({super.key});
 
-  late final _themes = {
-    "default": ZetaThemeData(),
-    "teal": ZetaThemeData(
-      identifier: 'teal',
-      primary: ZetaColorBase.teal,
-    ),
-    "yellow": ZetaThemeData(
-      identifier: 'yellow',
-      primary: ZetaColorBase.yellow,
-    ),
-    "red": ZetaThemeData(
-      identifier: 'red',
-      primary: ZetaColorBase.red,
-    ),
-    "purple": ZetaThemeData(
-      identifier: 'purple',
-      primary: ZetaColorBase.purple,
-    ),
-  };
-
   @override
   Widget build(BuildContext context) {
     var zeta = Zeta.of(context);
@@ -44,8 +44,8 @@ class ZetaThemeColorSwitch extends StatelessWidget {
         alignment: Alignment.center,
         icon: SizedBox(width: 8),
         dropdownColor: zeta.colors.borderDisabled,
-        items: _themes.entries.map((e) {
-          var zetaColors = primary(_themes[e.key]!);
+        items: appThemes.entries.map((e) {
+          var zetaColors = primary(appThemes[e.key]!);
           var color = zetaColors.primary;
           return DropdownMenuItem<String>(
             value: e.value.identifier,
@@ -58,7 +58,7 @@ class ZetaThemeColorSwitch extends StatelessWidget {
           );
         }).toList(),
         onChanged: (value) {
-          final theme = _themes[value];
+          final theme = appThemes[value];
           if (theme != null) {
             ZetaProvider.of(context).updateThemeData(theme);
           }

example/lib/theme_service.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/src/material/app.dart';
+import 'package:shared_preferences/shared_preferences.dart';
+import 'package:zeta_example/pages/theme_color_switch.dart';
+import 'package:zeta_flutter/zeta_flutter.dart';
+
+class SharedPrefsThemeService extends ZetaThemeService {
+  SharedPrefsThemeService(this.preferences);
+
+  final SharedPreferences preferences;
+
+  @override
+  Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme() async {
+    final theme = preferences.getString('theme') ?? 'default';
+    final themeData = appThemes[theme];
+
+    final modeString = preferences.getString('themeMode');
+    final themeMode = modeString == 'light'
+        ? ThemeMode.light
+        : modeString == 'dark'
+            ? ThemeMode.dark
+            : ThemeMode.system;
+
+    final contrastString = preferences.getString('contrast');
+    final contrast = contrastString == 'aaa' ? ZetaContrast.aaa : ZetaContrast.aa;
+
+    return (themeData, themeMode, contrast);
+  }
+
+  @override
+  Future<void> saveTheme({
+    required ZetaThemeData themeData,
+    required ThemeMode themeMode,
+    required ZetaContrast contrast,
+  }) async {
+    await preferences.setString('theme', themeData.identifier);
+
+    final modeString = themeMode == ThemeMode.light
+        ? 'light'
+        : themeMode == ThemeMode.dark
+            ? 'dark'
+            : 'system';
+    await preferences.setString('themeMode', modeString);
+
+    final contrastString = contrast == ZetaContrast.aaa ? 'aaa' : 'aa';
+    await preferences.setString('contrast', contrastString);
+  }
+}

example/pubspec.yaml

@@ -4,13 +4,14 @@ version: 0.0.1
 publish_to: "none"
 
 environment:
-  sdk: ">=2.19.1 <3.0.0"
+  sdk: ">=3.0.1 <4.0.0"
 
 dependencies:
   flutter:
     sdk: flutter
   go_router: ^11.1.2
   google_fonts: ^6.1.0
+  shared_preferences: ^2.2.2
   zeta_flutter:
     path: ../
 

lib/src/theme/color_swatch.dart

@@ -27,6 +27,7 @@ class ZetaColorSwatch extends ColorSwatch<int> {
   ///
   /// It ensures that the 60th and 80th shades from swatch are abide by the AA and AAA accessibility standards on [background], respectively.
   /// [background] color defaults to [ZetaColorBase.greyWarm] shade10.
+  /// {@endtemplate}
   factory ZetaColorSwatch.fromColor(
     Color primary, {
     Brightness brightness = Brightness.light,

lib/src/theme/colors.dart

@@ -218,13 +218,13 @@ class ZetaColors {
 
   // Text / icons.
 
+  /// {@template zeta-color-dark}
   /// Default text /icon color.
   ///
   /// Defaults to `ZetaColors.cool.90`.
   ///
-  /// {@template zeta-color-dark}
   /// Color swatches are inverted if [ZetaColors.brightness] is Dark.
-  /// {@endTemplate}
+  /// {@endtemplate}
   Color get textDefault => cool.shade90;
 
   /// Subtle text /icon color.
@@ -252,13 +252,13 @@ class ZetaColors {
   /// {@macro zeta-color-dark}
   Color get textInverse => cool.shade20;
 
+  /// {@template zeta-color-dark}
   /// Default icon color.
   ///
   /// Defaults to `ZetaColors.cool.90`.
   ///
-  /// {@template zeta-color-dark}
   /// Color swatches are inverted if [ZetaColors.brightness] is Dark.
-  /// {@endTemplate}
+  /// {@endtemplate}
   Color get iconDefault => textDefault;
 
   /// Subtle icon color.

lib/src/theme/theme_service.dart

@@ -1,17 +1,25 @@
+import 'package:flutter/material.dart';
+
+import 'contrast.dart';
 import 'theme_data.dart';
 
 /// `ZetaThemeService` is an abstract class.
 /// It provides the structure for loading and saving themes in Zeta application.
 
 abstract class ZetaThemeService {
-  /// Loads the application's theme.
+  /// Asynchronously load the theme data.
   ///
-  /// `loadTheme` is a method to retrieve the current theme data.
+  /// This method returns a `Future` that when complete will produce a
+  /// tuple of `ZetaThemeData`, `ThemeMode`, and `ZetaContrast`.
   ///
-  /// Returns a `Future` that completes with the `ZetaThemeData` object
-  /// that represents the current theme.
-
-  Future<ZetaThemeData?> loadTheme();
+  /// `ZetaThemeData` describes the colors that are used by a theme.
+  ///
+  /// `ThemeMode` determines the brightness of the system.
+  ///
+  /// `ZetaContrast` defines different contrast styles to use across the application.
+  ///
+  /// Returns a Future `(ZetaThemeData?, ThemeMode?, ZetaContrast?)`.
+  Future<(ZetaThemeData?, ThemeMode?, ZetaContrast?)> loadTheme();
 
   /// Saves the provided theme data as the application's theme.
   ///
@@ -21,5 +29,9 @@ abstract class ZetaThemeService {
   ///
   /// Returns a `Future` that completes when the theme data has been successfully saved.
 
-  Future<void> saveTheme(ZetaThemeData themeData);
+  Future<void> saveTheme({
+    required ZetaThemeData themeData,
+    required ThemeMode themeMode,
+    required ZetaContrast contrast,
+  });
 }

lib/src/zeta.dart

@@ -248,17 +248,6 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets
 
     // Apply the initial contrast to the theme data.
     _themeData = widget.initialThemeData.apply(contrast: _contrast);
-
-    // Load theme data from themeService if available.
-    unawaited(
-      widget.themeService?.loadTheme().then((value) {
-        if (value != null) {
-          setState(() {
-            _themeData = value;
-          });
-        }
-      }),
-    );
   }
 
   /// Clean up function to be called when this object is removed from the tree.
@@ -332,14 +321,15 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets
   void updateThemeMode(ThemeMode themeMode) {
     setState(() {
       _themeMode = themeMode;
+      _saveThemeChange();
     });
   }
 
   /// Updates the current theme data.
   void updateThemeData(ZetaThemeData data) {
     setState(() {
       _themeData = data.apply(contrast: _contrast);
-      unawaited(widget.themeService?.saveTheme(data));
+      _saveThemeChange();
     });
   }
 
@@ -348,9 +338,20 @@ class ZetaProviderState extends State<ZetaProvider> with Diagnosticable, Widgets
     setState(() {
       _contrast = contrast;
       _themeData = _themeData.apply(contrast: contrast);
+      _saveThemeChange();
     });
   }
 
+  void _saveThemeChange() {
+    unawaited(
+      widget.themeService?.saveTheme(
+        themeData: _themeData,
+        themeMode: _themeMode,
+        contrast: _contrast,
+      ),
+    );
+  }
+
   @override
   void debugFillProperties(DiagnosticPropertiesBuilder properties) {
     super.debugFillProperties(properties);

lib/zeta_flutter.dart

@@ -10,6 +10,7 @@ export 'src/theme/color_swatch.dart';
 export 'src/theme/constants.dart';
 export 'src/theme/contrast.dart';
 export 'src/theme/theme_data.dart';
+export 'src/theme/theme_service.dart';
 export 'src/tokens.dart';
 export 'src/utils/extensions.dart';
 export 'src/zeta.dart';

pubspec.yaml

@@ -1,5 +1,5 @@
 name: zeta_flutter
-version: 0.1.0+1
+version: 0.1.1+1
 description: Zeta is the new, formal, standardized Zebra Design System based off the successes of ZDS (Zebra Design System). This package is in pre-release, and so many aspects are incomplete.
 homepage: https://github.com/zebradevs/zeta_flutter
 repository: https://github.com/zebradevs/zeta_flutter