app: refactor dark mode class hook

This moves the hook for applying the global dark mode style to the App component.

src/app/App.tsx

@@ -2,7 +2,7 @@
 // Copyright (c) 2020-2021 The Pybricks Authors
 
 import { Classes } from '@blueprintjs/core';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import SplitterLayout from 'react-splitter-layout';
 import Editor from '../editor/Editor';
@@ -122,9 +122,22 @@ const Docs: React.FunctionComponent = (_props) => {
 };
 
 const App: React.FunctionComponent = (_props) => {
+    const darkMode = useSelector((s: RootState): boolean => s.settings.darkMode);
     const showDocs = useSelector((s: RootState): boolean => s.settings.showDocs);
     const [isDragging, setIsDragging] = useState(false);
 
+    // darkMode class has to be applied to body element, otherwise it won't
+    // affect portals
+    useEffect(() => {
+        if (!darkMode) {
+            // no class for light mode, so nothing to do
+            return;
+        }
+
+        document.body.classList.add(Classes.DARK);
+        return () => document.body.classList.remove(Classes.DARK);
+    }, [darkMode]);
+
     return (
         <div className="pb-app h-100 w-100 p-absolute">
             <Toolbar />

src/index.tsx

@@ -1,7 +1,6 @@
 // SPDX-License-Identifier: MIT
 // Copyright (c) 2020-2021 The Pybricks Authors
 
-import { Classes } from '@blueprintjs/core';
 import { I18nContext } from '@shopify/react-i18n';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -41,30 +40,6 @@ const store = createStore(
     applyMiddleware(sagaMiddleware, loggerMiddleware),
 );
 
-// Hook in blueprints dark mode class to setting
-let oldDarkMode = false;
-store.subscribe(() => {
-    const newDarkMode = store.getState().settings.darkMode;
-    if (newDarkMode !== oldDarkMode) {
-        if (newDarkMode) {
-            document.body.classList.add(Classes.DARK);
-            for (const frame of document.getElementsByTagName('iframe')) {
-                frame.contentWindow?.document.documentElement.classList.add(
-                    Classes.DARK,
-                );
-            }
-        } else {
-            document.body.classList.remove(Classes.DARK);
-            for (const frame of document.getElementsByTagName('iframe')) {
-                frame.contentWindow?.document.documentElement.classList.remove(
-                    Classes.DARK,
-                );
-            }
-        }
-        oldDarkMode = newDarkMode;
-    }
-});
-
 // special styling for beta versions
 if (appVersion.match(/beta/)) {
     document.body.classList.add('pb-beta');