Support retrieving color JS value (#1956)

Author: ethanshar

src/style/colors.ts

@@ -129,6 +129,17 @@ export class Colors {
     }
   }
 
+  /**
+   * Return the original color string value by its colorKey based on the current scheme(light/dark)
+   */
+  getColorValue(colorKey: string) {
+    return Scheme.getScheme(true)[colorKey] ?? this[colorKey];
+  }
+
+  getColorName(color: string) {
+    return ColorName.name(color)[1];
+  }
+
   getColorTint(color: string, tintKey: string | number) {
     if (_.isUndefined(tintKey) || isNaN(tintKey as number) || _.isUndefined(color)) {
       // console.error('"Colors.getColorTint" must accept a color and tintKey params');
@@ -159,10 +170,6 @@ export class Colors {
     return this.getTintedColorForDynamicHex(color, tintKey);
   }
 
-  getColorName(color: string) {
-    return ColorName.name(color)[1];
-  }
-
   getTintedColorForDynamicHex(color: string, tintKey: string | number) {
     // Handles dynamic colors (non uilib colors)
     let tintLevel = Math.floor(Number(tintKey) / 10);

src/style/scheme.ts

@@ -7,9 +7,10 @@ export type SchemeType = 'default' | 'light' | 'dark';
 export type SchemeChangeListener = (schemeType?: 'light' | 'dark') => void;
 
 class Scheme {
-  currentScheme: SchemeType = 'default';
-  schemes: Schemes = {light: {}, dark: {}};
-  changeListeners: SchemeChangeListener[] = [];
+  private currentScheme: SchemeType = 'default';
+  private schemes: Schemes = {light: {}, dark: {}};
+  private schemesJS: Schemes = {light: {}, dark: {}};
+  private changeListeners: SchemeChangeListener[] = [];
   private usePlatformColors = false;
 
   constructor() {
@@ -63,8 +64,9 @@ class Scheme {
       throw new Error(`There is a mismatch in scheme keys: ${missingKeys.join(', ')}`);
     }
 
-    const platformColorsSchemes: Schemes = cloneDeep(schemes);
+    merge(this.schemesJS, schemes);
 
+    const platformColorsSchemes: Schemes = cloneDeep(schemes);
     forEach(schemes, (scheme, schemeKey) => {
       forEach(scheme, (colorValue, colorKey) => {
         // @ts-expect-error
@@ -84,15 +86,18 @@ class Scheme {
         });
       });
     });
-
     merge(this.schemes, platformColorsSchemes);
   }
 
   /**
    * Retrieve scheme by current scheme type
    */
-  getScheme() {
-    return this.schemes[this.getSchemeType()];
+  getScheme(useJS = false) {
+    if (useJS) {
+      return this.schemesJS[this.getSchemeType()];
+    } else {
+      return this.schemes[this.getSchemeType()];
+    }
   }
 
   /**