#435 web dark mode (#455)

* add ThemeProvider to App.web.tsx

* make FlatNavigator use themed color

* fix extra padding on top in web

* add observer to App.web.tsx to make it react to theme changes

* fix TS for useColorSchemeStyle

* add dark mode toggle button to web LeftNav

* fix index.web.tsx border colors for web

* Move the darkmode desktop web toggle to the right nav column

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 16 insertions, 12 deletions

diff --git a/src/App.web.tsx b/src/App.web.tsx
index 3f79f06b2..e259a48e9 100644
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@@ -6,8 +6,10 @@ import * as analytics from 'lib/analytics'
 import {RootStoreModel, setupState, RootStoreProvider} from './state'
 import {Shell} from './view/shell/index'
 import {ToastContainer} from './view/com/util/Toast.web'
+import {ThemeProvider} from 'lib/ThemeContext'
+import {observer} from 'mobx-react-lite'
 
-function App() {
+const App = observer(() => {
   const [rootStore, setRootStore] = useState<RootStoreModel | undefined>(
     undefined,
   )
@@ -27,17 +29,19 @@ function App() {
   }
 
   return (
-    <RootSiblingParent>
-      <analytics.Provider>
-        <RootStoreProvider value={rootStore}>
-          <SafeAreaProvider>
-            <Shell />
-          </SafeAreaProvider>
-          <ToastContainer />
-        </RootStoreProvider>
-      </analytics.Provider>
-    </RootSiblingParent>
+    <ThemeProvider theme={rootStore.shell.darkMode ? 'dark' : 'light'}>
+      <RootSiblingParent>
+        <analytics.Provider>
+          <RootStoreProvider value={rootStore}>
+            <SafeAreaProvider>
+              <Shell />
+            </SafeAreaProvider>
+            <ToastContainer />
+          </RootStoreProvider>
+        </analytics.Provider>
+      </RootSiblingParent>
+    </ThemeProvider>
   )
-}
+})
 
 export default App