Fix #1017: unable to style the color of a value containing a color. See also #1028

HISTORY.md

@@ -3,6 +3,12 @@
 https://github.com/josdejong/jsoneditor
 
 
+## not yet published, version 9.0.2
+
+- Fix #1017: unable to style the color of a value containing a color.
+  Thanks @p3x-robot. 
+
+
 ## 2020-06-24, version 9.0.1
 
 - Fixed broken link to the Ace editor website (https://ace.c9.io/).

docs/styling.md

@@ -13,6 +13,7 @@ customized with several classes that reflect its type and state.
     - `jsoneditor-undefined`
     - `jsoneditor-number`
     - `jsoneditor-string`
+    - `jsoneditor-string jsoneditor-color-value`
     - `jsoneditor-boolean`
     - `jsoneditor-regexp`
     - `jsoneditor-array`

src/js/Node.js

@@ -1777,12 +1777,10 @@ export class Node {
           this.dom.tdColor.appendChild(this.dom.color)
 
           this.dom.tdValue.parentNode.insertBefore(this.dom.tdColor, this.dom.tdValue)
-
-          // this is a bit hacky, overriding the text color like this. find a nicer solution
-          this.dom.value.style.color = '#1A1A1A'
         }
 
-        // update the color background
+        // update styling of value and color background
+        addClassName(this.dom.value, 'jsoneditor-color-value')
         this.dom.color.style.backgroundColor = value
       } else {
         // cleanup color picker when displayed
@@ -1835,7 +1833,7 @@ export class Node {
       delete this.dom.tdColor
       delete this.dom.color
 
-      this.dom.value.style.color = ''
+      removeClassName(this.dom.value, 'jsoneditor-color-value')
     }
   }
 

src/scss/jsoneditor/_editor.scss

@@ -46,6 +46,9 @@ div {
     &.jsoneditor-null {
       color: $jse-null;
     }
+    &.jsoneditor-color-value {
+      color: $jse-color-value;
+    }
     &.jsoneditor-invalid {
       color: $jse-invalid;
     }

src/scss/jsoneditor/_variables.scss

@@ -8,7 +8,8 @@ $jse-string: #006000 !default;
 $jse-number: #ee422e !default;
 $jse-boolean: #ff8c00 !default;
 $jse-null: #004ed0 !default;
-$jse-invalid: #000000 !default;
+$jse-color-value: $jse-content-color !default;
+$jse-invalid: $jse-content-color !default;
 $jse-readonly: #808080 !default;
 $jse-empty: #d3d3d3 !default;
 $jse-preview: #f5f5f5 !default;