remove theme context in favour of hook

packages/status-react/src/contexts/theme-context.tsx

@@ -1,59 +0,0 @@
-import React, {
-  createContext,
-  useContext,
-  useLayoutEffect,
-  useMemo,
-} from 'react'
-
-import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
-
-import type { Theme } from '../styles/config'
-import type { Config } from '../types/config'
-
-const ThemeContext = createContext<Theme | undefined>(undefined)
-
-interface Props {
-  theme: Config['theme']
-  children: React.ReactNode
-}
-
-export const ThemeProvider = (props: Props) => {
-  const { children, theme = 'light' } = props
-
-  const appTheme = useMemo(() => {
-    if (!theme || theme === 'light') {
-      return defaultTheme
-    }
-
-    if (theme === 'dark') {
-      return darkTheme
-    }
-
-    return createTheme({
-      colors: theme.colors,
-      fonts: theme.fonts,
-    })
-  }, [theme])
-
-  useLayoutEffect(() => {
-    document.body.classList.add(appTheme)
-
-    return () => {
-      document.body.classList.remove(appTheme)
-    }
-  }, [appTheme])
-
-  return (
-    <ThemeContext.Provider value={appTheme}>{children}</ThemeContext.Provider>
-  )
-}
-
-export const useTheme = () => {
-  const context = useContext(ThemeContext)
-
-  if (!context) {
-    throw new Error('useTheme must be used within a ThemeProvider')
-  }
-
-  return context
-}

packages/status-react/src/hooks/use-theme.tsx

@@ -0,0 +1,30 @@
+import { useLayoutEffect, useMemo } from 'react'
+
+import { createTheme, darkTheme, theme as defaultTheme } from '../styles/config'
+
+import type { Config } from '../types/config'
+
+export const useTheme = (theme?: Config['theme']) => {
+  const appTheme = useMemo(() => {
+    if (!theme || theme === 'light') {
+      return defaultTheme
+    }
+
+    if (theme === 'dark') {
+      return darkTheme
+    }
+
+    return createTheme({
+      colors: theme.colors,
+      fonts: theme.fonts,
+    })
+  }, [theme])
+
+  useLayoutEffect(() => {
+    document.body.classList.add(appTheme)
+
+    return () => {
+      document.body.classList.remove(appTheme)
+    }
+  }, [appTheme])
+}

packages/status-react/src/routes/index.tsx

@@ -11,12 +11,13 @@ import {
 import { MainSidebar } from '~/src/components/main-sidebar'
 import { AppProvider } from '~/src/contexts/app-context'
 import { DialogProvider } from '~/src/contexts/dialog-context'
-import { ThemeProvider } from '~/src/contexts/theme-context'
 import { ProtocolProvider, useProtocol } from '~/src/protocol'
 import { Chat } from '~/src/routes/chat'
 import { styled } from '~/src/styles/config'
 import { GlobalStyle } from '~/src/styles/GlobalStyle'
 
+import { useTheme } from '../hooks/use-theme'
+
 import type { Config } from '~/src/types/config'
 
 interface Props extends Config {
@@ -44,28 +45,28 @@ const Gate = (props: { children: JSX.Element }) => {
 export const Community = (props: Props) => {
   const { theme, router: Router = BrowserRouter } = props
 
+  useTheme(theme)
+
   return (
     <Router>
       <ProtocolProvider options={{ publicKey: props.publicKey }}>
         <AppProvider config={props}>
-          <ThemeProvider theme={theme}>
+          <DialogProvider>
-            <DialogProvider>
+            <GlobalStyle />
-              <GlobalStyle />
+            <Wrapper>
-              <Wrapper>
+              <MainSidebar />
-                <MainSidebar />
+              <Routes>
-                <Routes>
+                <Route
-                  <Route
+                  path="/:id"
-                    path="/:id"
+                  element={
-                    element={
+                    <Gate>
-                      <Gate>
+                      <Chat />
-                        <Chat />
+                    </Gate>
-                      </Gate>
+                  }
-                    }
+                />
-                  />
+              </Routes>
-                </Routes>
+            </Wrapper>
-              </Wrapper>
+          </DialogProvider>
-            </DialogProvider>
-          </ThemeProvider>
         </AppProvider>
       </ProtocolProvider>
     </Router>