From c0c4722b2f6a53db9174c8ac348758adf6ada90e Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 14 Sep 2023 19:43:53 -0500
Subject: [PATCH] multi-theme

---
 src/lib/design-system/index.tsx   | 33 +++++++++++++++++++++++++++----
 src/view/screens/DesignSystem.tsx |  3 +--
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/lib/design-system/index.tsx b/src/lib/design-system/index.tsx
index 5eb83f3ec0..61fc2bbd1a 100644
--- a/src/lib/design-system/index.tsx
+++ b/src/lib/design-system/index.tsx
@@ -10,7 +10,7 @@ import {
 } from 'react-native'
 import merge from 'lodash.merge'
 
-import {Theme, light} from './themes'
+import {Theme, light, dark} from './themes'
 
 type NativeProps = Partial<ViewProps & TextProps & ImageProps>
 export type StyleProps = Parameters<typeof light.style>[0] &
@@ -28,13 +28,38 @@ type TypeProps = ComponentProps<TextProps> & {
   as?: HeadingElements
 }
 
-const Context = React.createContext({theme: light})
+const themes = {
+  light,
+  dark,
+}
+type ThemeName = keyof typeof themes
+const Context = React.createContext<{
+  themeName: ThemeName
+  theme: Theme
+  themes: {
+    [key in ThemeName]: Theme
+  }
+}>({
+  themeName: 'light',
+  theme: light,
+  themes: {
+    light,
+    dark,
+  },
+})
 
 export const ThemeProvider = ({
   children,
   theme,
-}: React.PropsWithChildren<{theme: Theme}>) => (
-  <Context.Provider value={{theme}}>{children}</Context.Provider>
+}: React.PropsWithChildren<{theme: ThemeName}>) => (
+  <Context.Provider
+    value={{
+      themeName: theme,
+      theme: themes[theme],
+      themes,
+    }}>
+    {children}
+  </Context.Provider>
 )
 
 export function useBreakpoints() {
diff --git a/src/view/screens/DesignSystem.tsx b/src/view/screens/DesignSystem.tsx
index 7034b4785f..cc48b6cc6a 100644
--- a/src/view/screens/DesignSystem.tsx
+++ b/src/view/screens/DesignSystem.tsx
@@ -4,14 +4,13 @@ import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
 
 import {ThemeProvider, Box, Text, H1, H2, H3, P} from 'lib/design-system'
-import * as themes from 'lib/design-system/themes'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'DesignSystem'>
 
 export const DesignSystemScreen = withAuthRequired(
   observer(function DesignSystem({}: Props) {
     return (
-      <ThemeProvider theme={themes.dark}>
+      <ThemeProvider theme="dark">
         <Box pa="m" gtPhone={{padding: 'l'}} debug>
           <H2 as="h1" c="theme" gtPhone={{mb: 'm', marginTop: 'l'}}>
             Heading 1