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,8 +53,7 @@ export const template = (
 
     <div id="ethdoc-viewer">
     
-        ${
-          functions.length === 0
+        ${functions.length === 0
     ? "No contract to display"
     : renderHeader(name, contractDoc)
   }
@@ -63,7 +62,7 @@ export const template = (
     .map(
       (item) => `
           <hr>
-            <h6>${item.name} - ${item.type} </h6>
+            <h6>${item.name}</h6>
 
             ${getMethodDetails(item.devdoc)}
 
@@ -92,22 +91,21 @@ export const renderHeader = (
   name: string,
   contractDoc: ContractDocumentation
 ) => `
-    <h3>${name} ${
-  contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
-}</h3>
+    <h3>${name} ${contractDoc.title ? `<small>: ${contractDoc.title}</small>` : ""
+  }</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">
                 <thead>
                     <tr>

src/views/HomeView.tsx

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