From f638b9be35cce2d2f3db3522081d6c47bbc2aa54 Mon Sep 17 00:00:00 2001
From: mikecoomber <mike.coomber@zebra.com>
Date: Fri, 27 Sep 2024 14:04:28 +0100
Subject: [PATCH] custom theme docs

---
 README.md | 64 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 62 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index 62b670b4..662eba68 100644
--- a/README.md
+++ b/README.md
@@ -11,7 +11,7 @@ dart sdk: ">=3.2.0 <4.0.0"
 flutter: ">=3.16.0"
 ```
 
-// TODO(LUKE): Update readme 
+// TODO(LUKE): Update readme
 
 ## Installation
 
@@ -80,7 +80,6 @@ builder: (context, themeData, themeMode) {
 To tie everything together, use the `ZetaProvider` constructor. The `builder` argument is mandatory, while the others are optional but allow you to set initial values:
 
 ```dart
-
  @override
   Widget build(BuildContext context) {
     return ZetaProvider(
@@ -106,6 +105,67 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar
   }
 ```
 
+### Customization
+
+#### Creating custom themes
+
+Custom themes can be made by creating `ZetaCustomTheme` objects. `ZetaCustomTheme` can be constructed by passing in a primary or secondary color and, optionally, their dark variants:
+
+```dart
+ZetaCustomTheme(
+  id: 'custom-theme-red',
+  primary: Colors.red,
+  primaryDark : // Dark variant here,
+  secondary: Colors.blue,
+  secondaryDark: // Dark variant here,
+)
+```
+
+Color arguments can be of type `ZetaColorSwatch`, `MaterialColor`, or `Color`. If only a `Color` is provided, Zeta will generate a `ZetaColorSwatch`. <b>To have control over every shade of a given color, we reccomend providing either a `ZetaColorSwatch` or a `MaterialColor`.</b>
+
+If a dark variant of a color is not provided, Zeta generate one by inverting the corresponding color swatch.
+
+#### Adding custom themes
+
+Once you have defined the custom themes for your app, give them to the ZetaProvider by passing them through the construtor. You can also initialize the custom theme by setting the `initialTheme` argument to the id of the desired theme.
+
+```dart
+  ZetaProvider(
+    initialTheme: 'custom-theme-red'
+    customThemes: [
+      ZetaCustomTheme(
+        id: 'custom-theme-red',
+        primary: Colors.red,
+        secondary: Colors.purple
+      ),
+      ZetaCustomTheme(
+        id: 'custom-theme-purple',
+        primary: Colors.purple,
+        secondary: Colors.green
+      ),
+    ]
+  )
+```
+
+You can also get and set the custom themes via the `ZetaProvider`:
+
+`ZetaProvider.of(context).customThemes`
+`ZetaProvider.of(context).setCustomThemes(newCustomThemes)`
+
+#### Changing the custom theme
+
+To change the custom theme, call the `updateCustomTheme` function on `ZetaProvider` with an id corresponding to a `ZetaCustomTheme` object:
+
+`ZetaProvider.of(context).updateCustomTheme('custom-theme-purple')`
+
+If the id provided does not correspond to a given theme, Zeta will fall back to its default theme.
+
+You can fetch the id of the currently applied custom theme via the `Zeta` object:
+
+`Zeta.of(context).customThemeId`
+
+This will return null if no custom theme is in use.
+
 With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application.
 
 ## Licensing