Stop reloading fonts when light mode/dark mode switch

src/index.tsx

@@ -11,7 +11,7 @@ import ApplicationContextProvider, { Updater as ApplicationContextUpdater } from
 import TransactionContextProvider, { Updater as TransactionContextUpdater } from './contexts/Transactions'
 import BalancesContextProvider, { Updater as BalancesContextUpdater } from './contexts/Balances'
 import App from './pages/App'
-import ThemeProvider, { GlobalStyle } from './theme'
+import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from './theme'
 import './i18n'
 
 const Web3ProviderNetwork = createWeb3ReactRoot(NetworkContextName)
@@ -57,18 +57,21 @@ function Updaters() {
 }
 
 ReactDOM.render(
-  <Web3ReactProvider getLibrary={getLibrary}>
-    <Web3ProviderNetwork getLibrary={getLibrary}>
-      <ContextProviders>
-        <Updaters />
-        <ThemeProvider>
-          <>
-            <GlobalStyle />
-            <App />
-          </>
-        </ThemeProvider>
-      </ContextProviders>
-    </Web3ProviderNetwork>
-  </Web3ReactProvider>,
+  <>
+    <FixedGlobalStyle />
+    <Web3ReactProvider getLibrary={getLibrary}>
+      <Web3ProviderNetwork getLibrary={getLibrary}>
+        <ContextProviders>
+          <Updaters />
+          <ThemeProvider>
+            <>
+              <ThemedGlobalStyle />
+              <App />
+            </>
+          </ThemeProvider>
+        </ContextProviders>
+      </Web3ProviderNetwork>
+    </Web3ReactProvider>
+  </>,
   document.getElementById('root')
 )

src/theme/index.tsx

@@ -178,7 +178,7 @@ export const TYPE = {
   }
 }
 
-export const GlobalStyle = createGlobalStyle`
+export const FixedGlobalStyle = createGlobalStyle`
 @import url('https://rsms.me/inter/inter.css');
 html { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
 @supports (font-variation-settings: normal) {
@@ -203,10 +203,15 @@ body > div {
 html {
   font-size: 16px;
   font-variant: none;
-  color: ${({ theme }) => theme.text1};
-  background-color: ${({ theme }) => theme.bg2};
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 `
+
+export const ThemedGlobalStyle = createGlobalStyle`
+html {
+  color: ${({ theme }) => theme.text1};
+  background-color: ${({ theme }) => theme.bg2};
+}
+`