Add action to dynamically change theme

src/api/index.ts

@@ -28,10 +28,10 @@ export const sendMessage = (message: {
   if (window.cefQuery) {
     return window.cefQuery({
       request: JSON.stringify(message),
-      onSuccess: (response) => {
+      onSuccess: function (response) {
         console.info("cefQuery has been successfully sent: %s", response);
       },
-      onFailure: (error_code, error_message) => {
+      onFailure: function (error_code, error_message) {
         console.error(
           "Failed to send cefQuery: %d, %s",
           error_code,

src/components/App/index.tsx

@@ -1,10 +1,17 @@
+import { useEffect, useState } from "react";
 import { ThemeProvider } from "styled-components";
+import { dispatcher } from "../../dispatcher";
 import { Mode } from "../../globals";
+import { isObject } from "../../typeGuards/isObject";
 import { RecentActivity } from "../RecentActivity";
 import { GlobalStyle } from "./styles";
 
+const isMode = (mode: unknown): mode is Mode => {
+  return typeof mode === "string" && ["light", "dark"].includes(mode);
+};
+
 const getMode = (): Mode => {
-  if (!window.theme) {
+  if (!isMode(window.theme)) {
     const bodyEl = document.getElementsByTagName("body");
     const vscodeTheme =
       bodyEl[0].dataset.vscodeThemeKind === "vscode-light" ? "light" : "dark";
@@ -14,11 +21,33 @@ const getMode = (): Mode => {
   return window.theme;
 };
 
-export const App = () => (
-  <>
-    <ThemeProvider theme={{ mode: getMode() }}>
-      <GlobalStyle />
-      <RecentActivity />
-    </ThemeProvider>
-  </>
-);
+const actions = {
+  setColorMode: "GLOBAL/SET_THEME"
+};
+
+export const App = () => {
+  const [mode, setMode] = useState(getMode());
+
+  useEffect(() => {
+    const handleSetColorMode = (data: unknown) => {
+      if (isObject(data) && isMode(data.theme)) {
+        setMode(data.theme);
+      }
+    };
+
+    dispatcher.addActionListener(actions.setColorMode, handleSetColorMode);
+
+    return () => {
+      dispatcher.removeActionListener(actions.setColorMode, handleSetColorMode);
+    };
+  }, []);
+
+  return (
+    <>
+      <ThemeProvider theme={{ mode }}>
+        <GlobalStyle />
+        <RecentActivity />
+      </ThemeProvider>
+    </>
+  );
+};

src/components/RecentActivity/index.tsx

@@ -81,7 +81,10 @@ export const RecentActivity = () => {
     return () => {
       clearInterval(refreshInterval);
 
-      dispatcher.addActionListener(actions.setData, handleRecentActivityData);
+      dispatcher.removeActionListener(
+        actions.setData,
+        handleRecentActivityData
+      );
     };
   }, []);