Add theme selection to gh-pages

missive · Dec 23, 2019 · e66be9d · e66be9d
1 parent e39c1e5
commit e66be9d
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 5 deletions.
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git 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
@@ -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>