fix: dark mode CSS tweaks, add storybook/matchMedia/docs

README.md

@@ -29,6 +29,7 @@ import { Picker } from 'emoji-mart'
 | **autoFocus** | | `false` | Auto focus the search input when mounted |
 | **color** | | `#ae65c5` | The top bar anchors select and hover color |
 | **emoji** | | `department_store` | The emoji shown when no emojis are hovered, set to an empty string to show nothing |
+| **darkMode** | | varies | Dark mode (boolean). `true` by default if the browser reports [`prefers-color-scheme: dark`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). |
 | **include** | | `[]` | Only load included categories. Accepts [I18n categories keys](#i18n). Order will be respected, except for the `recent` category which will always be the first. |
 | **exclude** | | `[]` | Don't load excluded categories. Accepts [I18n categories keys](#i18n). |
 | **custom** | | `[]` | [Custom emojis](#custom-emojis) |

css/emoji-mart.css

@@ -4,11 +4,6 @@
   line-height: 1.15;
 }
 
-.emoji-mart-dark-bg{
-  color: #fff !important;
-  background-color: #222 !important;
-}
-
 .emoji-mart {
   font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
   font-size: 16px;
@@ -148,10 +143,6 @@
   border-radius: 100%;
 }
 
-.emoji-mart-category .emoji-mart-emoji-dark:hover:before{
-  background-color: #444;
-}
-
 .emoji-mart-category-label {
   z-index: 2;
   position: relative;
@@ -160,17 +151,13 @@
   top: 0;
 }
 
-.emoji-mart-category-label-span {
+.emoji-mart-category-label span {
   display: block;
   width: 100%;
   font-weight: 500;
   padding: 5px 6px;
-  background-color: rgb(255, 255, 255, 0.95);
-  color: #000;
-}
-
-.emoji-mart-category-label-span-dark {
-  background-color: rgba(0, 0, 0, 0.95) !important;
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, .95);
 }
 
 .emoji-mart-category-list {
@@ -426,4 +413,29 @@
   border: 0;
 }
 
+/*
+ * Dark mode styles
+ */
 
+.emoji-mart-dark {
+  color: #fff;
+  background-color: #222;
+}
+
+.emoji-mart-dark .emoji-mart-search input {
+  background-color: #2f2f2f;
+  color: #fff;
+}
+
+.emoji-mart-dark .emoji-mart-search-icon svg {
+  fill: #fff;
+}
+
+.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover:before {
+  background-color: #444;
+}
+
+.emoji-mart-dark .emoji-mart-category-label span {
+  background-color: #222;
+  color: #fff;
+}

src/components/category.js

@@ -158,7 +158,6 @@ export default class Category extends React.Component {
         i18n,
         notFound,
         notFoundEmoji,
-        darkMode,
       } = this.props,
       emojis = this.getEmojis(),
       labelStyles = {},
@@ -175,6 +174,10 @@ export default class Category extends React.Component {
       labelStyles = {
         height: 28,
       }
+
+      labelSpanStyles = {
+        position: 'absolute',
+      }
     }
 
     return (
@@ -190,11 +193,7 @@ export default class Category extends React.Component {
           className="emoji-mart-category-label"
         >
           <span
-            className={
-              darkMode
-                ? 'emoji-mart-category-label-span emoji-mart-category-label-span-dark'
-                : 'emoji-mart-category-label-span'
-            }
+            style={labelSpanStyles}
             ref={this.setLabelRef}
             aria-hidden={true /* already labeled by the section aria-label */}
           >
@@ -210,10 +209,7 @@ export default class Category extends React.Component {
                   (emoji.short_names && emoji.short_names.join('_')) || emoji
                 }
               >
-                {NimbleEmoji(
-                  { emoji: emoji, data: this.data, ...emojiProps },
-                  darkMode,
-                )}
+                {NimbleEmoji({ emoji: emoji, data: this.data, ...emojiProps })}
               </li>
             ))}
         </ul>

src/components/emoji/nimble-emoji.js

@@ -74,7 +74,7 @@ const _convertStyleToCSS = (style) => {
   return div.getAttribute('style')
 }
 
-const NimbleEmoji = (props, darkMode) => {
+const NimbleEmoji = (props) => {
   if (props.data.compressed) {
     uncompress(props.data)
   }
@@ -97,9 +97,7 @@ const NimbleEmoji = (props, darkMode) => {
   let { unified, custom, short_names, imageUrl } = data,
     style = {},
     children = props.children,
-    className = darkMode
-      ? 'emoji-mart-emoji emoji-mart-emoji-dark'
-      : 'emoji-mart-emoji',
+    className = 'emoji-mart-emoji',
     nativeEmoji = unified && unifiedToNative(unified),
     // combine the emoji itself and all shortcodes into an accessible label
     label = [nativeEmoji]

src/components/picker/nimble-picker.js

@@ -512,13 +512,12 @@ export default class NimblePicker extends React.PureComponent {
     return (
       <section
         style={{ width: width, ...style }}
-        className={`emoji-mart ${darkMode && 'emoji-mart-dark-bg'}`}
+        className={`emoji-mart ${darkMode ? 'emoji-mart-dark' : ''}`}
         aria-label={title}
         onKeyDown={this.handleKeyDown}
       >
         <div className="emoji-mart-bar">
           <Anchors
-            darkMode={darkMode}
             ref={this.setAnchorsRef}
             data={this.data}
             i18n={this.i18n}
@@ -530,7 +529,6 @@ export default class NimblePicker extends React.PureComponent {
         </div>
 
         <Search
-          darkMode={darkMode}
           ref={this.setSearchRef}
           onSearch={this.handleSearch}
           data={this.data}
@@ -550,7 +548,6 @@ export default class NimblePicker extends React.PureComponent {
           {this.getCategories().map((category, i) => {
             return (
               <Category
-                darkMode={darkMode}
                 ref={this.setCategoryRef.bind(this, `category-${i}`)}
                 key={category.name}
                 id={category.id}

src/components/search.js

@@ -79,7 +79,7 @@ export default class Search extends React.PureComponent {
   }
 
   render() {
-    const { i18n, autoFocus, darkMode } = this.props
+    const { i18n, autoFocus } = this.props
     const { icon, isSearching, id } = this.state
     const inputId = `emoji-mart-search-${id}`
 
@@ -92,14 +92,6 @@ export default class Search extends React.PureComponent {
           onChange={this.handleChange}
           placeholder={i18n.search}
           autoFocus={autoFocus}
-          style={
-            darkMode
-              ? {
-                  backgroundColor: '#2f2f2f',
-                  color: '#fff',
-                }
-              : {}
-          }
         />
         {/*
          * Use a <label> in addition to the placeholder for accessibility, but place it off-screen

src/utils/shared-default-props.js

@@ -31,7 +31,10 @@ const PickerDefaultProps = {
   emojisToShowFilter: null,
   showPreview: true,
   showSkinTones: true,
-  darkMode: false,
+  darkMode: !!(
+    typeof matchMedia === 'function' &&
+    matchMedia('(prefers-color-scheme: dark)').matches
+  ),
   emojiTooltip: EmojiDefaultProps.tooltip,
   autoFocus: false,
   custom: [],

stories/index.js

@@ -39,6 +39,7 @@ storiesOf('Picker', module)
       onSelect={action('selected')}
       onSkinChange={action('skin changed')}
       native={boolean('Unicode', true)}
+      darkMode={boolean('Dark mode', false)}
       set={select('Emoji pack', SETS, SETS[0])}
       emojiSize={number('Emoji size', 24)}
       perLine={number('Per line', 9)}