From d1150e1ec1bf653950cb19a4e231229990f9d33f Mon Sep 17 00:00:00 2001
From: alexstyl <1665273+alexstyl@users.noreply.github.com>
Date: Sun, 18 Aug 2024 14:27:05 +0300
Subject: [PATCH] Document LocalModalWindow

---
 docs/dialog.md             | 24 ++++++++++++++++++++++++
 docs/modal-bottom-sheet.md | 26 ++++++++++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/docs/dialog.md b/docs/dialog.md
index 3a7504e..9f81333 100644
--- a/docs/dialog.md
+++ b/docs/dialog.md
@@ -233,6 +233,30 @@ Dialog(state = rememberDialogState(visible = true)) {
 }
 ```
 
+### Styling the system bars
+
+**Android only**
+
+Dialogs will not change the color of your system UI when displayed. We provide a `LocalModalWindow` composition local, which provides you with the Android `Window` that hosts the dialog, so that you can customize the System UI according to your needs:
+
+```kotlin
+Dialog(rememberDialogState()) {
+    DialogPanel {
+        val window = LocalModalWindow.current
+        LaunchedEffect(Unit) {
+            // change system bars to transparent
+            window.navigationBarColor = Color.TRANSPARENT
+            window.statusBarColor = Color.TRANSPARENT
+            
+            // don't forget to update the icons too
+            WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightStatusBars = true
+            WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
+        }
+        BasicText("Transparent bars. So cool 😎 ", modifier = Modifier.navigationBarsPadding())
+    }
+}
+```
+
 ## Keyboard Interactions
 
 <style>
diff --git a/docs/modal-bottom-sheet.md b/docs/modal-bottom-sheet.md
index 6ac8637..b84fdb0 100644
--- a/docs/modal-bottom-sheet.md
+++ b/docs/modal-bottom-sheet.md
@@ -436,6 +436,32 @@ ModalBottomSheet(state = sheetState) {
 }
 ```
 
+### Styling the system bars
+
+**Android only**
+
+Modal bottom sheets will darken the navigation bar when displayed by default. This will work for most designs, but there might need more customizations. 
+
+We provide a `LocalModalWindow` composition local, which provides you with the Android `Window` that hosts the modal sheet, so that you can customize the System UI according to your needs:
+
+```kotlin
+ModalBottomSheet(rememberModalBottomSheetState(initialDetent = SheetDetent.FullyExpanded)) {
+    Sheet(Modifier.fillMaxWidth()) {
+        val window = LocalModalWindow.current
+        LaunchedEffect(Unit) {
+            // change system bars to transparent
+            window.navigationBarColor = Color.TRANSPARENT
+            window.statusBarColor = Color.TRANSPARENT
+
+            // don't forget to update the icons too
+            WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightStatusBars = true
+            WindowInsetsControllerCompat(window, window.decorView).isAppearanceLightNavigationBars = true
+        }
+        BasicText("Transparent bars. So cool 😎 ", modifier = Modifier.navigationBarsPadding())
+    }
+}
+```
+
 ## Keyboard Interactions
 
 The `BottomSheet` component does not have any keyboard interactions, as it is 100% controlled by touch input.