Add theme selection to gh-pages

docs/bundle.js

@@ -3401,8 +3401,11 @@ class Example extends __WEBPACK_IMPORTED_MODULE_1_react___default.a.Component {
       __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
         'div',
         { className: 'row sets' },
+        'Set:\xA0',
         ['native', 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook'].map(set => {
-          var props = { disabled: !this.state.native && set == this.state.set };
+          var props = {
+            disabled: !this.state.native && set == this.state.set
+          };
 
           if (set == 'native' && this.state.native) {
             props.disabled = true;
@@ -3425,12 +3428,45 @@ class Example extends __WEBPACK_IMPORTED_MODULE_1_react___default.a.Component {
           );
         })
       ),
+      __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
+        'div',
+        { className: 'row-small sets' },
+        'Theme:\xA0',
+        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
+          'button',
+          {
+            disabled: this.state.darkMode == undefined,
+            onClick: () => {
+              this.setState({ darkMode: undefined });
+            }
+          },
+          'auto'
+        ),
+        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
+          'button',
+          {
+            disabled: this.state.darkMode == false,
+            onClick: () => {
+              this.setState({ darkMode: false });
+            }
+          },
+          'light'
+        ),
+        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
+          'button',
+          {
+            disabled: this.state.darkMode,
+            onClick: () => {
+              this.setState({ darkMode: true });
+            }
+          },
+          'dark'
+        )
+      ),
       __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(
         'div',
         { className: 'row' },
-        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_3__src__["a" /* Picker */], Object(__WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__["a" /* default */])({}, this.state, {
-          onSelect: console.log
-        }))
+        __WEBPACK_IMPORTED_MODULE_1_react___default.a.createElement(__WEBPACK_IMPORTED_MODULE_3__src__["a" /* Picker */], Object(__WEBPACK_IMPORTED_MODULE_0__src_polyfills_extends__["a" /* default */])({}, this.state, { onSelect: console.log }))
       )
     );
   }

docs/emoji-mart.css

@@ -419,12 +419,18 @@
 
 .emoji-mart-dark {
   color: #fff;
+  border-color: #555453;
   background-color: #222;
 }
 
+.emoji-mart-dark .emoji-mart-bar {
+  border-color: #555453;
+}
+
 .emoji-mart-dark .emoji-mart-search input {
-  background-color: #2f2f2f;
   color: #fff;
+  border-color: #555453;
+  background-color: #2f2f2f;
 }
 
 .emoji-mart-dark .emoji-mart-search-icon svg {
@@ -439,3 +445,8 @@
   background-color: #222;
   color: #fff;
 }
+
+.emoji-mart-dark .emoji-mart-skin-swatches {
+  border-color: #555453;
+  background-color: #222;
+}

docs/index.js

@@ -56,6 +56,7 @@ class Example extends React.Component {
         </div>
 
         <div className="row sets">
+          Set: 
           {[
             'native',
             'apple',
@@ -92,6 +93,37 @@ class Example extends React.Component {
           })}
         </div>
 
+        <div className="row-small sets">
+          Theme: 
+
+          <button
+            disabled={this.state.darkMode == undefined}
+            onClick={() => {
+              this.setState({ darkMode: undefined })
+            }}
+          >
+            auto
+          </button>
+
+          <button
+            disabled={this.state.darkMode == false}
+            onClick={() => {
+              this.setState({ darkMode: false })
+            }}
+          >
+            light
+          </button>
+
+          <button
+            disabled={this.state.darkMode}
+            onClick={() => {
+              this.setState({ darkMode: true })
+            }}
+          >
+            dark
+          </button>
+        </div>
+
         <div className="row">
           <Picker {...this.state} onSelect={console.log} />
         </div>