fix: theme change sync issue (#1616)

PolkaGate · Oct 29, 2024 · 69bccb0 · 69bccb0
1 parent bfec748
commit 69bccb0
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/packages/extension-polkagate/src/components/View.tsx b/packages/extension-polkagate/src/components/View.tsx
@@ -1,10 +1,11 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-import { CssBaseline, PaletteMode, Theme } from '@mui/material';
+import type { PaletteMode, Theme } from '@mui/material';
+
+import { CssBaseline } from '@mui/material';
 import { createTheme, ThemeProvider } from '@mui/material/styles';
-import React from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { createGlobalStyle } from 'styled-components';
 
 import { darkTheme as dark } from '../themes/dark';
@@ -16,25 +17,37 @@ interface Props {
   className?: string;
 }
 
-function View({ children, className }: Props): React.ReactElement<Props> {
-  const [mode, setMode] = React.useState<PaletteMode>(chooseTheme());
-
-  const colorMode = React.useMemo(
-    () => ({
-      toggleColorMode: () => {
-        const toMode = mode === 'light' ? 'dark' : 'light';
+function View ({ children, className }: Props): React.ReactElement<Props> {
+  const [mode, setMode] = useState<PaletteMode>(chooseTheme());
 
-        localStorage.setItem('theme', toMode);
-        setMode(toMode);
+  useEffect(() => {
+    // Handler for storage events
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === 'theme') {
+        // Type assertion since we know theme can only be 'light' or 'dark'
+        setMode(event.newValue as PaletteMode);
       }
-    }),
-    [mode]
-  );
+    };
 
-  const theme = React.useMemo(
-    () => createTheme(mode === 'light' ? light : dark),
-    [mode]
-  );
+    // Add event listener
+    window.addEventListener('storage', handleStorageChange);
+
+    // Cleanup
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
+  const colorMode = useMemo(() => ({
+    toggleColorMode: () => {
+      const toMode = mode === 'light' ? 'dark' : 'light';
+
+      localStorage.setItem('theme', toMode);
+      setMode(toMode);
+    }
+  }), [mode]);
+
+  const theme = useMemo(() => createTheme(mode === 'light' ? light : dark), [mode]);
 
   return (
     <ColorContext.Provider value={colorMode}>
@@ -49,7 +62,7 @@ function View({ children, className }: Props): React.ReactElement<Props> {
   );
 }
 
-const BodyTheme = createGlobalStyle<Theme>`
+const BodyTheme = createGlobalStyle<{theme: Theme}>`
   body {
     background-color: ${(props) => props.theme.palette.background.paper};
   }

diff --git a/packages/extension-polkagate/src/components/chooseTheme.ts b/packages/extension-polkagate/src/components/chooseTheme.ts
@@ -1,8 +1,7 @@
 // Copyright 2019-2024 @polkadot/extension-polkagate authors & contributors
 // SPDX-License-Identifier: Apache-2.0
-// @ts-nocheck
 
-export function chooseTheme(): 'dark' | 'light' {
+export function chooseTheme (): 'dark' | 'light' {
   const preferredTheme = localStorage.getItem('theme');
 
   if (preferredTheme) {