From e66be9dc4efb753b26ecaaf8583392e83c933b9c Mon Sep 17 00:00:00 2001
From: Etienne Lemay <etienne@heliom.ca>
Date: Mon, 23 Dec 2019 08:51:53 -0500
Subject: [PATCH] Add theme selection to gh-pages

---
 docs/bundle.js      | 44 ++++++++++++++++++++++++++++++++++++++++----
 docs/emoji-mart.css | 13 ++++++++++++-
 docs/index.js       | 32 ++++++++++++++++++++++++++++++++
 3 files changed, 84 insertions(+), 5 deletions(-)

diff --git a/docs/bundle.js b/docs/bundle.js
index 261e738..4d29ec4 100644
--- a/docs/bundle.js
+++ b/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 }))
       )
     );
   }
diff --git a/docs/emoji-mart.css b/docs/emoji-mart.css
index 521952b..7f0738c 100644
--- a/docs/emoji-mart.css
+++ b/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;
+}
diff --git a/docs/index.js b/docs/index.js
index 62719b1..610b168 100644
--- a/docs/index.js
+++ b/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>