Created a toggle function that allows users to switch between dark mode and light mode.

package.json

@@ -31,7 +31,7 @@
     "watch:firefox": "concurrently --kill-others \"npm run watch:parcel -- --out-dir dist/firefox\" \"npm run watch:web-ext -- -s dist/firefox -t firefox-desktop\"",
     "build:firefox": "npm run build:parcel -- --out-dir dist/firefox && npm run build:web-ext -- -s dist/firefox -a web-ext-artifacts/firefox",
     "deploy:firefox": "rm -rf dist/firefox && npm run build:firefox && shipit firefox dist/firefox",
-    "watch:chrome": "concurrently --kill-others \"npm run watch:parcel -- --out-dir dist/chrome\" \"npm run watch:web-ext -- -s dist/chrome -t chromium --chromium-profile '$CHROME_PROFILE_PATH'\"",
+    "watch:chrome": "concurrently --kill-others \"npm run watch:parcel -- --out-dir dist/chrome\" \"npm run watch:web-ext -- -s dist/chrome -t chromium --chromium-profile \"$CHROME_PROFILE_PATH\"\"",
     "build:chrome": "npm run build:parcel -- --out-dir dist/chrome && npm run build:web-ext -- -s dist/chrome -a web-ext-artifacts/chrome",
     "deploy:chrome": "rm -rf dist/chrome && npm run build:chrome && shipit chrome dist/chrome",
     "watch:opera": "concurrently --kill-others \"npm run watch:parcel -- --out-dir dist/opera\" \"npm run watch:web-ext -- -s dist/opera -t chromium\"",

src/app/AdjustSettingsModal.tsx

@@ -3,6 +3,8 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, CustomInput, FormGr
 import { jsx } from '@emotion/core';
 import { updateSettings } from './commands';
 import { PiralDebugSettings } from '../types';
+import { appSectionView } from './styles';
+import { store, useStore } from './store';
 
 export interface AdjustSettingsModalProps {
   isOpen: boolean;
@@ -20,8 +22,13 @@ export const AdjustSettingsModal: FC<AdjustSettingsModalProps> = ({ settings, is
 
   useEffect(() => setValues(initialValues), [initialValues]);
 
+  const [_, api] = store;
+  const { actions } = api.getState();
+
+  const currentTheme = useStore(m => m.state.theme);
+
   return (
-    <Modal isOpen={isOpen} toggle={toggle}>
+    <Modal isOpen={isOpen} toggle={toggle} css={appSectionView}>
       <ModalHeader toggle={toggle}>Debug Settings</ModalHeader>
       <ModalBody>
         <FormGroup>
@@ -69,14 +76,18 @@ export const AdjustSettingsModal: FC<AdjustSettingsModalProps> = ({ settings, is
                   return null;
               }
             })}
+            <CustomInput
+              type="switch"
+              label={`Switch to ${currentTheme === 'dark' ? 'light' : 'dark'} mode`}
+              id="change theme"
+              onChange={actions.toggleTheme}
+            />
           </div>
         </FormGroup>
         <p style={{ fontSize: '0.8em' }}>We recommend to refresh the page after changing these settings.</p>
       </ModalBody>
       <ModalFooter>
-        <Button color="primary" onClick={send}>
-          Save
-        </Button>
+        <Button onClick={send}>Save</Button>
       </ModalFooter>
     </Modal>
   );

src/app/App.tsx

@@ -2,8 +2,8 @@ import { FC, Fragment, useEffect } from 'react';
 import { jsx, Global } from '@emotion/core';
 import { StoreApi } from 'zustand';
 import { View } from './View';
-import { globalView } from './styles';
-import { Store, store } from './store';
+import { globalViewLight, globalViewDark } from './styles';
+import { Store, store, useStore } from './store';
 
 function useSyncedStore(localApi: StoreApi<Store>) {
   useEffect(() => {
@@ -26,7 +26,7 @@ export const App: FC<AppProps> = () => {
 
   return (
     <Fragment>
-      <Global styles={globalView} />
+      <Global styles={useStore(m => m.state.theme) == 'dark' ? globalViewDark : globalViewLight} />
       <View />
     </Fragment>
   );

src/app/BasicInfo.tsx

@@ -6,6 +6,7 @@ import { visualizeAll } from './commands';
 import { basicInfoView } from './styles';
 import VisualizeIcon from './VisualizeIcon';
 import SettingsIcon from './SettingsIcon';
+import { store } from './store';
 
 export interface BasicInfoProps {
   showSettings?: boolean;

src/app/ConnectedView.tsx

@@ -7,7 +7,7 @@ import { PiralDebugCapabilities } from '../types';
 import { useViews } from './useViews';
 
 export interface ConnectedViewProps {
-  capabilities: PiralDebugCapabilities;
+  capabilities: PiralDebugCapabilities; 
 }
 
 export const ConnectedView: FC<ConnectedViewProps> = ({ capabilities }) => {

src/app/EmitEventModal.tsx

@@ -3,6 +3,7 @@ import { Button, Modal, ModalHeader, ModalBody, ModalFooter, FormGroup, Label, I
 import { jsx } from '@emotion/core';
 import { emitEvent } from './commands';
 import { checkJson } from './utils';
+import { appSectionView } from './styles';
 
 export interface EmitEventModalProps {
   isOpen: boolean;
@@ -32,7 +33,7 @@ export const EmitEventModal: FC<EmitEventModalProps> = ({ isOpen, toggle }) => {
   };
 
   return (
-    <Modal isOpen={isOpen} toggle={toggle}>
+    <Modal isOpen={isOpen} toggle={toggle} css={appSectionView}>
       <ModalHeader toggle={toggle}>Event Details</ModalHeader>
       <ModalBody>
         <FormGroup>
@@ -60,7 +61,7 @@ export const EmitEventModal: FC<EmitEventModalProps> = ({ isOpen, toggle }) => {
         </FormGroup>
       </ModalBody>
       <ModalFooter>
-        <Button color="primary" onClick={send} disabled={disabled}>
+        <Button onClick={send} disabled={disabled}>
           Emit
         </Button>
       </ModalFooter>

src/app/ExtensionCatalogue.tsx

@@ -40,6 +40,9 @@ const ExtensionItem: FC<ExtensionItemProps> = ({ name }) => {
     toggle(ev);
   };
 
+  // detect if the user prefers dark mode
+  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
   return (
     <ListGroupItem>
       <ListGroupItemHeading tag="a" href="#" onClick={toggle}>
@@ -59,7 +62,7 @@ const ExtensionItem: FC<ExtensionItemProps> = ({ name }) => {
               onChange={setValue}
             />
           </FormGroup>
-          <Button color="primary" onClick={send} disabled={disabled}>
+          <Button onClick={send} disabled={disabled}>
             Render
           </Button>
         </ListGroupItemText>

src/app/LinkPilets.tsx

@@ -2,6 +2,7 @@ import { FC, useState, SyntheticEvent } from 'react';
 import { Button, Form, Input, InputGroup, InputGroupAddon } from 'reactstrap';
 import { jsx } from '@emotion/core';
 import { injectPiletsFromUrl } from './utils';
+import { appSectionView } from './styles';
 
 export interface LinkPiletsProps {}
 
@@ -17,14 +18,15 @@ export const LinkPilets: FC<LinkPiletsProps> = () => {
     e.preventDefault();
   };
 
+  // detect if the user prefers dark mode
+  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
   return (
-    <Form onSubmit={submit}>
+    <Form onSubmit={submit} css={appSectionView}>
       <InputGroup>
         <Input type="text" value={url} onChange={e => setUrl(e.currentTarget.value)} />
         <InputGroupAddon addonType="append">
-          <Button color="primary" disabled={url === ''}>
-            Add
-          </Button>
+          <Button disabled={url === ''}>Add</Button>
         </InputGroupAddon>
       </InputGroup>
     </Form>

src/app/StateContainer.tsx

@@ -85,6 +85,7 @@ export const StateContainer: FC<StateContainerProps> = () => {
           <BreadcrumbItem key={`${i}_${item}`}>
             <a
               href="#"
+              className='stateContainer__a'
               onClick={e => {
                 setPath(path.slice(0, i + 1));
                 e.preventDefault();

src/app/UploadPilets.tsx

@@ -2,6 +2,7 @@ import { FC, ChangeEvent, useState } from 'react';
 import { CustomInput, InputGroup, InputGroupAddon, Button } from 'reactstrap';
 import { jsx } from '@emotion/core';
 import { injectPiletsFromUrl } from './utils';
+import { appSectionView } from './styles';
 
 export interface UploadPiletsProps {}
 
@@ -36,11 +37,14 @@ export const UploadPilets: FC<UploadPiletsProps> = () => {
     setFile({ value: undefined, key: file.key + 1 });
   };
 
+  // detect if the user prefers dark mode
+  const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
   return (
-    <InputGroup>
+    <InputGroup css={appSectionView}>
       <CustomInput key={file.key} type="file" id="upload-pilet" label="Select a local pilet" onChange={uploadPilet} />
       <InputGroupAddon addonType="append">
-        <Button color="primary" disabled={!file.value} onClick={upload}>
+        <Button disabled={!file.value} onClick={upload}>
           Upload
         </Button>
       </InputGroupAddon>

src/app/View.tsx

@@ -1,14 +1,20 @@
 import { FC } from 'react';
 import { jsx } from '@emotion/core';
 import { ConnectedView } from './ConnectedView';
-import { useStore } from './store';
 import { notConnectedView } from './styles';
+import { Button } from 'reactstrap';
+import { store, useStore } from './store';
 
 export interface ViewProps {}
 
 export const View: FC<ViewProps> = () => {
   const { connected, capabilities } = useStore(m => m.state);
 
+  const [_, api] = store;
+  const { actions } = api.getState();
+
+  const currentTheme = useStore(m => m.state.theme);
+
   if (connected) {
     return <ConnectedView capabilities={capabilities} />;
   } else {
@@ -17,6 +23,7 @@ export const View: FC<ViewProps> = () => {
         <h2>Not connected</h2>
         <p>You are currently not running a Piral instance in debug mode.</p>
         <p>Note that you need to run Piral v0.10 or later on localhost for Piral Inspector to work.</p>
+        <Button style={{ marginTop: 10 }} onClick={actions.toggleTheme}>Switch to {currentTheme == "dark"? "light": "dark"}</Button>
       </div>
     );
   }

src/app/store.ts

@@ -1,8 +1,10 @@
 import create, { SetState } from 'zustand';
 import { PiralDebugCapabilities, PiralDebugSettings, PiralEvent, PiralWorkerInitialState } from '../types';
+import { getTheme } from '../scripts/legacy/helpers';
 
 export interface StoreState {
   connected: boolean;
+  theme: string;
   name?: string;
   version?: string;
   kind?: string;
@@ -28,6 +30,7 @@ export interface StoreActions {
     state: PiralWorkerInitialState,
   ): void;
   disconnect(): void;
+  toggleTheme(): void;
   updatePilets(pilets: Array<any>): void;
   updateRoutes(routes: Array<string>): void;
   updateSettings(settings: PiralDebugSettings): void;
@@ -54,6 +57,7 @@ function dispatch(set: SetState<Store>, update: (state: StoreState) => Partial<S
 export const store = create<Store>(set => ({
   state: {
     connected: false,
+    theme: getTheme(),
   },
   actions: {
     connect(name, version, kind, capabilities, state) {
@@ -84,6 +88,15 @@ export const store = create<Store>(set => ({
         connected: false,
       }));
     },
+    toggleTheme() {
+      dispatch(set, state => {
+        const theme = state.theme === 'dark' ? 'light' : 'dark';
+        localStorage.setItem('theme', theme);
+        return {
+          theme,
+        };
+      });
+    },
     updatePilets(pilets) {
       dispatch(set, () => ({
         pilets,