Feature: Dark Mode View (#1057)

src/frontend/src/pages/ViewPage/index.tsx

@@ -1,18 +1,28 @@
 import { useContext, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
+import { darkContext } from "../../contexts/darkContext";
 import { TabsContext } from "../../contexts/tabsContext";
 import { getVersion } from "../../controllers/API";
 import Page from "../FlowPage/components/PageComponent";
 
 export default function ViewPage() {
   const { flows, tabId, setTabId } = useContext(TabsContext);
-  const { id } = useParams();
+  const { setDark } = useContext(darkContext);
+  const { id, theme } = useParams();
 
   // Set flow tab id
   useEffect(() => {
     setTabId(id!);
   }, [id]);
 
+  useEffect(() => {
+    if (theme) {
+      setDark(theme === "dark");
+    } else {
+      setDark(false);
+    }
+  }, [theme]);
+
   // Initialize state variable for the version
   const [version, setVersion] = useState("");
   useEffect(() => {

src/frontend/src/routes.tsx

@@ -44,7 +44,7 @@ const Router = () => {
           }
         />
         <Route
-          path="view"
+          path="view/:theme?"
           element={
             <ProtectedRoute>
               <ViewPage />