invert text color in colored tags

Author: elfman

browser/components/NoteItem.js

@@ -4,6 +4,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 import { isArray } from 'lodash'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import { getTodoStatus } from 'browser/lib/getTodoStatus'
 import styles from './NoteItem.styl'
@@ -16,11 +17,18 @@ import i18n from 'browser/lib/i18n'
  * @param {string} color
  * @return {React.Component}
  */
-const TagElement = ({ tagName, color }) => (
-  <span styleName='item-bottom-tagList-item' key={tagName} style={{backgroundColor: color}}>
-    #{tagName}
-  </span>
-)
+const TagElement = ({ tagName, color }) => {
+  const style = {}
+  if (color) {
+    style.backgroundColor = color
+    style.color = invertColor(color, { black: '#222', white: '#f1f1f1', threshold: 0.3 })
+  }
+  return (
+    <span styleName='item-bottom-tagList-item' key={tagName} style={style}>
+      #{tagName}
+    </span>
+  )
+}
 
 /**
  * @description Tag element list component.

browser/main/Detail/TagSelect.js

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import invertColor from 'invert-color'
 import CSSModules from 'browser/lib/CSSModules'
 import styles from './TagSelect.styl'
 import _ from 'lodash'
@@ -183,12 +184,19 @@ class TagSelect extends React.Component {
 
     const tagList = _.isArray(value)
       ? (showTagsAlphabetically ? _.sortBy(value) : value).map((tag) => {
+        const wrapperStyle = {}
+        const textStyle = {}
+        const color = coloredTags[tag]
+        if (color) {
+          wrapperStyle.backgroundColor = color
+          textStyle.color = invertColor(color, { black: '#222', white: '#f1f1f1' })
+        }
         return (
           <span styleName='tag'
             key={tag}
-            style={{backgroundColor: coloredTags[tag]}}
+            style={wrapperStyle}
           >
-            <span styleName='tag-label' onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
+            <span styleName='tag-label' style={textStyle} onClick={(e) => this.handleTagLabelClick(tag)}>#{tag}</span>
             <button styleName='tag-removeButton'
               onClick={(e) => this.handleTagRemoveButtonClick(tag)}
             >

package.json

@@ -69,6 +69,7 @@
     "i18n-2": "^0.7.2",
     "iconv-lite": "^0.4.19",
     "immutable": "^3.8.1",
+    "invert-color": "^2.0.0",
     "js-sequence-diagrams": "^1000000.0.6",
     "js-yaml": "^3.12.0",
     "katex": "^0.9.0",