use theme colors for progress bars

src/renderer/components/nav-bar/bs-version-item.component.tsx

@@ -11,6 +11,7 @@ import { BSVersionManagerService } from "renderer/services/bs-version-manager.se
 import { BsmIcon } from "../svgs/bsm-icon.component";
 import { ReactFitty } from "react-fitty";
 import { DefaultConfigKey } from 'renderer/config/default-configuration.config';
+import { useThemeColor } from 'renderer/hooks/use-theme-color.hook';
 
 export function BsVersionItem(props: {version: BSVersion}) {
 
@@ -25,6 +26,8 @@ export function BsVersionItem(props: {version: BSVersion}) {
   const [downloading, setDownloading] = useState(false);
   const [downloadPercent, setDownloadPercent] = useState(0);
   const [color, setColor] = useState("");
+  const firstColor = useThemeColor("first-color");
+  const secondColor = useThemeColor("second-color");
 
   const isActive = (): boolean => {
     return props.version?.BSVersion === state?.BSVersion && props?.version.steam === state?.steam && props?.version.name === state?.name;
@@ -74,7 +77,7 @@ export function BsVersionItem(props: {version: BSVersion}) {
 
   return (
     <div className={`outline-none relative p-[1px] overflow-hidden rounded-xl flex justify-center items-center mb-1 ${downloading && "nav-item-download"} active:translate-y-[1px]`}>
-      <div className="progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
+      <div className="download-progress absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}></div>
       <div className={`wrapper z-[1] px-1 py-[3px] w-full rounded-xl ${downloading && 'bg-black'} ${!downloading && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
          <Link onDoubleClick={handleDoubleClick} to={`/bs-version/${props.version.BSVersion}`} state={props.version} title={props.version.name && `${props.version.BSVersion} - ${props.version.name}`} className="w-full flex items-center justify-start content-center max-w-full">
             {props.version.steam && <BsmIcon icon="steam" className="w-[19px] h-[19px] mr-[5px] shrink-0"/>}

src/renderer/components/nav-bar/nav-bar.component.css

@@ -26,12 +26,6 @@
   scrollbar-gutter: stable;
 }
 
-.nav-item-download > .progress{
-  background-size: 500% !important;
-  background: linear-gradient(90deg, rgb(62, 51, 255), rgb(255, 0, 0), rgb(62, 51, 255), rgb(255, 0, 0));
-  animation: rainbow 2s linear 0s infinite;
-}
-
 .nav-item-download > .wrapper > a > *{
   animation: opacity 3s ease-in-out 0s infinite;
 }

src/renderer/components/progress-bar/bsm-progress-bar.component.tsx

@@ -3,6 +3,7 @@ import { AnimatePresence, motion } from "framer-motion";
 import BeatRunningImg from "../../../../assets/images/apngs/beat-running.png"
 import BeatWaitingImg from "../../../../assets/images/apngs/beat-waiting.png"
 import { useObservable } from "renderer/hooks/use-observable.hook";
+import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
 
 export function BsmProgressBar() {
 
@@ -10,6 +11,8 @@ export function BsmProgressBar() {
 
     const progress= useObservable(progressBarService.progression$);
     const visible = useObservable(progressBarService.visible$);
+    const firstColor = useThemeColor("first-color");
+    const secondColor = useThemeColor("second-color");
 
   return (
     <AnimatePresence> { visible && 
@@ -18,7 +21,7 @@ export function BsmProgressBar() {
             { !!progress && (
             <>
                 <div className="relative flex items-center h-full w-full rounded-full bg-black">
-                    <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progress}%`}}>
+                    <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progress}%`, background: `linear-gradient(90deg, ${firstColor}, ${secondColor}, ${firstColor}, ${secondColor})`}}>
                         <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8 transition-all" src={BeatRunningImg} />
                     </div>
                     <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{`${Math.floor(progress)}%`}</span>

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

@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+import { ConfigurationService } from "renderer/services/configuration.service";
+
+export function useThemeColor(themeColor: "first-color"|"second-color"){
+   const configService = ConfigurationService.getInstance();
+
+   const [color, setColor] = useState("");
+
+   useEffect(() => {
+      const obs = configService.watch<string>(themeColor)
+      obs.subscribe(color => {
+         setColor(color);
+      })
+      return () => {
+         configService.stopWatch(color, obs);
+         obs.unsubscribe();
+      }
+   }, []);
+
+   return color;
+   
+}

src/renderer/index.css

@@ -25,7 +25,6 @@
 
 .download-progress{
   background-size: 500% !important;
-  background: linear-gradient(90deg, rgb(62, 51, 255), rgb(255, 0, 0), rgb(62, 51, 255), rgb(255, 0, 0));
   animation: rainbow 2s linear 0s infinite;
 }