multi-theme

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() {

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