From 8a5a6bc4924e616d5fbd5ec279528e2c227d656a Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 15 Oct 2023 12:23:11 -0300
Subject: [PATCH] Added theme option to view page

---
 src/frontend/src/pages/ViewPage/index.tsx | 12 +++++++++++-
 src/frontend/src/routes.tsx               |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/frontend/src/pages/ViewPage/index.tsx b/src/frontend/src/pages/ViewPage/index.tsx
index 4ce5baed4..a85875637 100644
--- a/src/frontend/src/pages/ViewPage/index.tsx
+++ b/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(() => {
diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx
index e9e6f1858..63c61eb45 100644
--- a/src/frontend/src/routes.tsx
+++ b/src/frontend/src/routes.tsx
@@ -44,7 +44,7 @@ const Router = () => {
           }
         />
         <Route
-          path="view"
+          path="view/:theme?"
           element={
             <ProtectedRoute>
               <ViewPage />