fix issue and theme

src/App.css

@@ -3,7 +3,6 @@ body {
 }
 
 #ethdoc .active {
-  color: #212529;
   background-color: #e9ecef;
   border-color: #e9ecef;
 }

src/App.tsx

@@ -38,6 +38,7 @@ const App = () => {
   clientInstanceRef.current = clientInstance;
   const contractsRef = useRef(contracts);
   contractsRef.current = contracts;
+  const [themeType, setThemeType] = useState<string>("dark")
 
   useEffect(() => {
     console.log("Remix EthDoc loading...");
@@ -76,6 +77,17 @@ const App = () => {
           setContracts(newMap);
         }
       );
+
+      const currentTheme = await client.call("theme", "currentTheme")
+      console.log("Current theme", currentTheme)
+
+      setThemeType(currentTheme.brightness || currentTheme.quality)
+
+      client.on("theme", "themeChanged", (theme: any) => {
+        console.log("themeChanged")
+        setThemeType(theme.quality)
+      })
+
     };
 
     loadClient();
@@ -89,6 +101,7 @@ const App = () => {
         setContracts,
         sites,
         setSites,
+        themeType
       }}
     >
       <Routes />

src/AppContext.tsx

@@ -16,4 +16,5 @@ export const AppContext = React.createContext({
   setSites: (sites: PublishedSite[]) => {
     console.log("Calling Set Sites");
   },
+  themeType: "dark"
 });

src/utils/template.ts

@@ -53,17 +53,16 @@ export const template = (
 
     <div id="ethdoc-viewer">
     
-        ${
+        ${functions.length === 0
-          functions.length === 0
+    ? "No contract to display"
-            ? "No contract to display"
+    : renderHeader(name, contractDoc)
-            : renderHeader(name, contractDoc)
+  }
-        }
 
         ${functions
-          .map(
+    .map(
-            (item) => `
+      (item) => `
           <hr>
-            <h6>${item.name} - ${item.type} </h6>
+            <h6>${item.name}</h6>
 
             ${getMethodDetails(item.devdoc)}
 
@@ -73,8 +72,8 @@ export const template = (
            
             ${renderParameterDocumentation(item.outputs)}
             `
-          )
+    )
-          .join("\n")}
+    .join("\n")}
     
     </div>
 `;
@@ -92,23 +91,22 @@ export const renderHeader = (
   name: string,
   contractDoc: ContractDocumentation
 ) => `
-    <h3>${name} ${
+    <h3>${name} ${contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
-  contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
+  }</h3>
-}</h3>
 
     ${contractDoc.notice ? `<p class="lead">${contractDoc.notice}</p>` : ""}
 
     ${contractDoc.author ? `<p>Author: ${contractDoc.author}</p>` : ""}
 
+    <br />
     <p><strong>Functions</strong></p>
 `;
 
 export const renderParameterDocumentation = (
   parameters: ParameterDocumentation[]
 ) =>
-  `${
+  `${parameters.length > 0
-    parameters.length > 0
+    ? `<table class="table table-sm table-bordered table-striped">
-      ? `<table class="table table-sm table-bordered table-striped">
                 <thead>
                     <tr>
                         <th>Name</th>
@@ -128,25 +126,25 @@ export const renderParameterDocumentation = (
       .join("")}
               </tbody>
       </table>`
-      : "<p>No parameters</p>"
+    : "<p>No parameters</p>"
   }`;
 
 export const getMethodDetails = (devMethod?: Partial<MethodDoc>) => {
   const finalResult = !devMethod
     ? "<p><strong>**Add Documentation for the method here**</strong></p>"
     : Object.keys(devMethod)
-        .filter((key) => key !== "params")
+      .filter((key) => key !== "params")
-        .map((key) => {
+      .map((key) => {
-          const funcToGetTemplate = (devMethodDocTemplate as any)[key];
+        const funcToGetTemplate = (devMethodDocTemplate as any)[key];
-
+
-          if (!funcToGetTemplate) {
+        if (!funcToGetTemplate) {
-            return "";
+          return "";
-          }
+        }
-          const funcParameter = (devMethod as any)[key];
+        const funcParameter = (devMethod as any)[key];
-          const result = funcToGetTemplate(funcParameter);
+        const result = funcToGetTemplate(funcParameter);
-          return result;
+        return result;
-        })
+      })
-        .join("\n");
+      .join("\n");
 
   console.log("finalResult", finalResult);
   return finalResult;

src/views/HomeView.tsx

@@ -63,8 +63,8 @@ export const HomeView: React.FC = () => {
 
   return (
     <AppContext.Consumer>
-      {({ clientInstance, contracts, setContracts }) => (
+      {({ clientInstance, contracts, setContracts, themeType }) => (
-        <div id="ethdoc">
+        <div id="ethdoc" style={{ color: themeType === "dark" ? "white" : "black" }}>
           {[...contracts.keys()].length === 0 && (
             <p>Compile a contract with Solidity Compiler</p>
           )}