From 0a090fd796ff8b06df928599b018c57850ae5400 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Tue, 19 Dec 2023 09:37:00 -0600
Subject: [PATCH] Add nested context example

---
 src/view/screens/DebugNew.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/view/screens/DebugNew.tsx b/src/view/screens/DebugNew.tsx
index 075fca3ed0..b45899d12b 100644
--- a/src/view/screens/DebugNew.tsx
+++ b/src/view/screens/DebugNew.tsx
@@ -4,6 +4,7 @@ import {CenteredView, ScrollView} from '#/view/com/util/Views'
 
 import {useSetColorMode} from '#/state/shell'
 import {
+  ThemeProvider as Alf,
   useBreakpoints,
   useStyle,
   useStyles,
@@ -82,7 +83,7 @@ export function DebugScreen() {
   return (
     <ScrollView>
       <CenteredView style={backgroundStyles}>
-        <Box pa="xl" gap="xxl">
+        <Box pa="xl" pb={200} gap="xxl">
           <ThemeSelector />
 
           <Box>
@@ -212,6 +213,25 @@ export function DebugScreen() {
           </Box>
 
           <Hooks />
+
+          <Alf theme="light">
+            <Box bg="l0" pa="m">
+              <H3 pb="s" fontWeight="bold">
+                Nested theme context.
+              </H3>
+              <Text pb="s">This theme is always light.</Text>
+              <Box row gap="m">
+                <Box column bg="l0" h={60} />
+                <Box column bg="l1" h={60} />
+                <Box column bg="l2" h={60} />
+                <Box column bg="l3" h={60} />
+                <Box column bg="l4" h={60} />
+                <Box column bg="l5" h={60} />
+                <Box column bg="l6" h={60} />
+                <Box column bg="l7" h={60} />
+              </Box>
+            </Box>
+          </Alf>
         </Box>
       </CenteredView>
     </ScrollView>