feat(project): highlight, background color as var

jwplayer · May 4, 2021 · 3cb89d9 · 3cb89d9
1 parent 743cefe
commit 3cb89d9
Showing 1 changed file with 14 additions and 1 deletion.
diff --git a/src/providers/configProvider.tsx b/src/providers/configProvider.tsx
@@ -7,7 +7,7 @@ import React, {
 } from 'react';
 
 import loadConfig, { validateConfig } from '../services/config.service';
-import type { Config } from '../../types/Config';
+import type { Config, Options } from '../../types/Config';
 
 const defaultConfig: Config = {
   id: '',
@@ -45,6 +45,7 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
       validateConfig(config)
         .then((configValidated) => {
           setConfig(configValidated);
+          setCssVariables(configValidated.options);
           onLoading(false);
         })
         .catch((error: Error) => {
@@ -55,6 +56,18 @@ const ConfigProvider: FunctionComponent<ProviderProps> = ({
     loadAndValidateConfig(configLocation);
   }, [configLocation, onLoading, onValidationError]);
 
+  const setCssVariables = ({
+    backgroundColor = '#000',
+    highlightColor = '#fff',
+  }: Options) => {
+    const root = document.querySelector(':root') as HTMLElement;
+
+    if (root) {
+      root.style.setProperty('--background-color', backgroundColor);
+      root.style.setProperty('--highlight-color', highlightColor);
+    }
+  };
+
   return (
     <ConfigContext.Provider value={config}>{children}</ConfigContext.Provider>
   );