Interrim Checkin

react/src/PluginControlView.tsx

@@ -39,6 +39,7 @@ import FilePropertyDialog from './FilePropertyDialog';
 import JsonAtom from './JsonAtom';
 import PluginOutputControl from './PluginOutputControl';
 import Units from './Units';
+import isDarkMode from './DarkMode';
 
 
 export const StandardItemSize = { width: 80, height: 110 };
@@ -78,6 +79,8 @@ let endPluginInfo: UiPlugin =
     makeIoPluginInfo("Output", Pedalboard.END_PEDALBOARD_ITEM_URI);
 
 
+const darkBackgroundColor = "#181818";
+
 const styles = (theme: Theme) => createStyles({
     frame: {
         display: "block",
@@ -96,7 +99,7 @@ const styles = (theme: Theme) => createStyles({
         paddingRight: 4,
         paddingBottom: 24,
         left: 0,
-        background: "white",
+        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
         zIndex: 3
 
     },
@@ -106,7 +109,7 @@ const styles = (theme: Theme) => createStyles({
         marginRight: 22,
         paddingLeft: 4,
         paddingBottom: 24,
-        background: "white",
+        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
         zIndex: 3
 
     },
@@ -116,7 +119,7 @@ const styles = (theme: Theme) => createStyles({
         paddingRight: 22,
         paddingLeft: 12,
         paddingBottom: 24,
-        background: "white",
+        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
         zIndex: 3
 
     },
@@ -188,7 +191,7 @@ const styles = (theme: Theme) => createStyles({
     portGroupTitle: {
         position: "absolute",
         top: -15,
-        background: "white",
+        background: isDarkMode() ? darkBackgroundColor: theme.palette.background.default,
         textOverflow: "ellipsis",
         minWidth: 0,
         marginLeft: 20,