Add dark mode

src/app/App.jsx

@@ -9,7 +9,7 @@ import Header from '../components/Header';
 import { StringInputField } from '../components/Input/InputFields';
 import MasonryGrid from '../features/player/MasonryGrid';
 import InputBar from '../features/test-assets/InputBar';
-import { TestVectorModal } from '../utils/ui/Modal';
+import { Modal } from '../utils/ui/Modal';
 
 const AppContainer = styled(Container)`
   padding-top: 16px;
@@ -30,22 +30,23 @@ const InputRow = styled(Row)`
 `;
 
 function App(props) {
-  const { testAssets, openModal, player, tileSettings } = props;
+  const { testAssets, openModal, player, darkMode, tileSettings } = props;
 
   const [filter, setFilter] = React.useState('');
 
   return (
     <React.Fragment>
-      <TestVectorModal
+      <Modal
+        darkMode={darkMode}
         openModal={openModal}
         testVectors={testAssets.testVectors}
         activeTableColumnKeys={testAssets.activeColumnKeys}
       />
       <AppContainer fluid="xl">
-        <Header />
         <InputRow>
+          <Header darkMode={darkMode} />
           <TestAssetsColumn>
-            <InputBar testAssets={testAssets} />
+            <InputBar testAssets={testAssets} darkMode={darkMode} />
           </TestAssetsColumn>
           <FindSettingsColumn>
             <StringInputField
@@ -81,6 +82,7 @@ function mapStateToProps(state) {
     openModal: state.ui.openModal,
     tileSettings: state.ui.tileSettings,
     player: state.player,
+    darkMode: state.ui.darkMode,
   };
 }