fix(FEC-12819): live and background colors are not changed while conf…

…igured (#711)

live and background colors are not changed while configured

solves FEC-12819

src/utils/themes-manager.js

@@ -3,7 +3,7 @@
 import {getHueComponentOfHEXColorFormat} from './color-format-convertors';
 import {style} from '../index';
 
-const cssVarNames = {
+const cssVarNames: UserTheme = {
   colors: {
     primary: '--playkit-primary-hsl-hue',
     secondary: '--playkit-secondary-hsl-hue',
@@ -15,6 +15,8 @@ const cssVarNames = {
   }
 };
 
+const MAIN_COLORS = ['primary', 'secondary', 'success', 'danger', 'warning'];
+
 const dynamicColoredIconsSvgUrlVars = [
   '--playkit-icon-check-active-url',
   '--playkit-icon-data-url',
@@ -56,7 +58,11 @@ export class ThemesManager {
     }
 
     for (const color in config.colors) {
-      this.setColor(cssVarNames.colors[color], config.colors[color]);
+      if (MAIN_COLORS.includes(color)) {
+        this.setHueDeg(cssVarNames.colors[color], config.colors[color]);
+      } else {
+        this.setColor(cssVarNames.colors[color], config.colors[color]);
+      }
     }
   }
 
@@ -66,11 +72,21 @@ export class ThemesManager {
    * @param {string} color  -
    * @returns {void}
    */
-  setColor(cssVarName: string, color: string): void {
+  setHueDeg(cssVarName: string, color: string): void {
     const hue = getHueComponentOfHEXColorFormat(color);
     document.querySelector(`.${style.player}`)?.style.setProperty(cssVarName, `${hue}deg`);
   }
 
+  /**
+   * Override the specified css var value.
+   * @param {string} cssVarName -
+   * @param {string} color  -
+   * @returns {void}
+   */
+  setColor(cssVarName: string, color: string): void {
+    document.querySelector(`.${style.player}`)?.style.setProperty(cssVarName, color);
+  }
+
   /**
    * Update the SVG url (of dynamic SVGs) with the new primary color.
    * @param {string} color  -