@planningcenter/doxy 1.0.0 → 1.2.0

package/README.md

@@ -107,6 +107,24 @@ import {} from "@planningcenter/doxy/react-native-tokens-dark"
 import {} from "@planningcenter/doxy/react-native-tokens-light"
 ```
 
+### Forcing light or dark mode on a subtree
+
+By default, tokens respond to the root-level color mode (`data-color-mode` or `data-color-scheme`). To force a specific mode on any element and its descendants, use the `data-doxy-color-mode` attribute:
+
+```HTML
+<!-- Force dark mode regardless of root color mode -->
+<div data-doxy-color-mode="dark">
+  <!-- All Doxy tokens here resolve to their dark values -->
+
+  <!-- Force light mode back inside a dark section -->
+  <div data-doxy-color-mode="light">
+    <!-- Doxy tokens here resolve to their light values -->
+  </div>
+</div>
+```
+
+This is useful for UI that needs to render in a fixed color mode independent of the user's system theme or the application's global setting.
+
 ### For All applications
 
 ```TS