refactor: 修改暗黑模式的实现, 使其能在内部进行变更后立即响应

shared/components/Provider.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
 import { CacheProvider } from '../cache/Provider';
+import { DarkModeContextProvider } from '../contexts/DarkModeContext';
 
 export const TcProvider: React.FC = React.memo((props) => {
-  return <CacheProvider>{props.children}</CacheProvider>;
+  return (
+    <CacheProvider>
+      <DarkModeContextProvider>{props.children}</DarkModeContextProvider>
+    </CacheProvider>
+  );
 });
 TcProvider.displayName = 'TcProvider';

shared/contexts/DarkModeContext.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { useStorage } from 'tailchat-shared';
+
+const DarkModeContext = React.createContext<{
+  darkMode: boolean;
+  setDarkMode: (isDarkMode: boolean) => void;
+}>({
+  darkMode: true,
+  setDarkMode: () => {},
+});
+DarkModeContext.displayName = 'DarkModeContext';
+
+export const DarkModeContextProvider: React.FC = React.memo((props) => {
+  const [darkMode = true, { save: setDarkMode }] = useStorage('darkMode', true);
+
+  return (
+    <DarkModeContext.Provider value={{ darkMode, setDarkMode }}>
+      {props.children}
+    </DarkModeContext.Provider>
+  );
+});
+DarkModeContextProvider.displayName = 'DarkModeContextProvider';
+
+export function useDarkMode() {
+  return useContext(DarkModeContext);
+}

shared/index.tsx

@@ -33,6 +33,9 @@ export {
 export { buildPortal, DefaultEventEmitter } from './components/Portal';
 export { TcProvider } from './components/Provider';
 
+// contexts
+export { useDarkMode } from './contexts/DarkModeContext';
+
 // i18n
 export { t, setLanguage, useTranslation } from './i18n';
 export { Trans } from './i18n/Trans';

web/src/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback } from 'react';
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom';
-import { TcProvider, useStorage } from 'tailchat-shared';
+import { TcProvider, useDarkMode, useStorage } from 'tailchat-shared';
 import clsx from 'clsx';
 import { Loadable } from './components/Loadable';
 import { ConfigProvider as AntdProvider } from 'antd';
@@ -43,8 +43,8 @@ const AppProvider: React.FC = React.memo((props) => {
 });
 AppProvider.displayName = 'AppProvider';
 
-export const App: React.FC = React.memo(() => {
-  const [darkMode] = useStorage('darkMode', true);
+export const AppContainer: React.FC = React.memo((props) => {
+  const { darkMode } = useDarkMode();
 
   return (
     <div
@@ -53,15 +53,24 @@ export const App: React.FC = React.memo(() => {
         dark: darkMode,
       })}
     >
-      <AppProvider>
+      {props.children}
+    </div>
+  );
+});
+AppContainer.displayName = 'AppContainer';
+
+export const App: React.FC = React.memo(() => {
+  return (
+    <AppProvider>
+      <AppContainer>
         <Switch>
           <Route path="/entry" component={EntryRoute} />
           <Route path="/main" component={MainRoute} />
           <Route path="/invite/:inviteCode" component={InviteRoute} />
           <Redirect to="/entry" />
         </Switch>
-      </AppProvider>
-    </div>
+      </AppContainer>
+    </AppProvider>
   );
 });
 App.displayName = 'App';