Make anchors color customizable

css/emoji-picker.css

@@ -41,14 +41,11 @@
   overflow: hidden;
   transition: color .1s ease-out;
 }
-.emoji-picker-anchor:hover {
+.emoji-picker-anchor:hover,
+.emoji-picker-anchor-selected {
   color: #464646;
 }
 
-.emoji-picker-anchor-selected,
-.emoji-picker-anchor-selected:hover {
-  color: #ae65c5;
-}
 .emoji-picker-anchor-selected .emoji-picker-anchor-bar {
   bottom: 0;
 }
@@ -57,7 +54,7 @@
   position: absolute;
   bottom: -3px; left: 0;
   width: 100%; height: 3px;
-  background-color: #ae65c5;
+  background-color: #464646;
 }
 
 .emoji-picker-anchors i {

src/components/anchors.js

@@ -18,12 +18,13 @@ export default class Anchors extends React.Component {
   }
 
   render() {
-    var { categories, onAnchorClick } = this.props,
+    var { categories, onAnchorClick, color } = this.props,
         { selected } = this.state
 
     return <div className='emoji-picker-anchors'>
       {categories.map((category, i) => {
-        var { name, anchor } = category
+        var { name, anchor } = category,
+            isSelected = name == selected
 
         if (anchor) {
           return null
@@ -34,10 +35,11 @@ export default class Anchors extends React.Component {
             key={name}
             title={name}
             onClick={() => onAnchorClick(category, i)}
-            className={`emoji-picker-anchor ${name == selected ? 'emoji-picker-anchor-selected' : ''}`}
+            className={`emoji-picker-anchor ${isSelected ? 'emoji-picker-anchor-selected' : ''}`}
+            style={{ color: isSelected ? color : null }}
           >
             <InlineSVG src={SVGs[name]} />
-            <span className='emoji-picker-anchor-bar'></span>
+            <span className='emoji-picker-anchor-bar' style={{ backgroundColor: color }}></span>
           </span>
         )
       })}

src/components/picker.js

@@ -216,7 +216,7 @@ export default class Picker extends React.Component {
   }
 
   render() {
-    var { perLine, emojiSize, sheetURL, style, title, emoji } = this.props,
+    var { perLine, emojiSize, sheetURL, style, title, emoji, color } = this.props,
         { skin } = this.state,
         width = (perLine * (emojiSize + 12)) + 12 + 2
 
@@ -224,6 +224,7 @@ export default class Picker extends React.Component {
       <div className='emoji-picker-bar'>
         <Anchors
           ref='anchors'
+          color={color}
           categories={CATEGORIES}
           onAnchorClick={this.handleAnchorClick.bind(this)}
         />
@@ -283,6 +284,7 @@ Picker.propTypes = {
   style: React.PropTypes.object,
   title: React.PropTypes.string,
   emoji: React.PropTypes.string,
+  color: React.PropTypes.string,
   sheetURL: React.PropTypes.string.isRequired,
 }
 
@@ -294,4 +296,5 @@ Picker.defaultProps = {
   skin: 1,
   title: 'EmojiPicker',
   emoji: 'tophat',
+  color: '#ae65c5',
 }