From 8527cf86b228042c92465f4668c7ac8eb3823d2e Mon Sep 17 00:00:00 2001
From: David Lechner <david@pybricks.com>
Date: Mon, 27 Dec 2021 17:30:15 -0600
Subject: [PATCH] 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 | 15 ++++++++++++++-
 src/index.tsx   | 25 -------------------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index cb652143..f9e3a9ee 100644
--- a/src/app/App.tsx
+++ b/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 />
diff --git a/src/index.tsx b/src/index.tsx
index 778710fc..18da4b63 100644
--- a/src/index.tsx
+++ b/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');