impove useThemeColor hook

src/renderer/hooks/use-theme-color.hook.ts

@@ -1,22 +1,43 @@
 import { useEffect, useState } from "react";
+import { DefaultConfigKey } from "renderer/config/default-configuration.config";
 import { ConfigurationService } from "renderer/services/configuration.service";
 
-export function useThemeColor(themeColor: "first-color"|"second-color"){
+export function useThemeColor(): {firstColor: string, secondColor: string};
+export function useThemeColor(themeColor: "first-color"|"second-color"): string;
+export function useThemeColor(themeColor?: "first-color"|"second-color"): string|{firstColor: string, secondColor: string}{
    const configService = ConfigurationService.getInstance();
 
-   const [color, setColor] = useState("");
+   if(themeColor){
+      const [color, setColor] = useState("");
+
+      useEffect(() => {
+         const sub = configService.watch<string>(themeColor).subscribe(color => {
+            setColor(color);
+         })
+         return () => {
+            sub.unsubscribe();
+         }
+      }, []);
+
+      return color;
+   }
+   
+   const [firstColor, setFirstColor] = useState("");
+   const [secondColor, setSecondColor] = useState("");
 
    useEffect(() => {
-      const obs = configService.watch<string>(themeColor)
-      obs.subscribe(color => {
-         setColor(color);
-      })
+      const sub1 = configService.watch<string>("first-color" as DefaultConfigKey).subscribe(color => {
+         setFirstColor(color);
+      });
+      const sub2 = configService.watch<string>("second-color" as DefaultConfigKey).subscribe(color => {
+         setSecondColor(color);
+      });
       return () => {
-         configService.stopWatch(color, obs);
-         obs.unsubscribe();
+         sub1.unsubscribe();
+         sub2.unsubscribe();
       }
    }, []);
 
-   return color;
+   return {firstColor, secondColor}
    
 }