Implement tabs.

web/src/App.js

@@ -3,6 +3,7 @@ import './App.css';
 import { UrlStateProvider } from './UrlState';
 
 import Color from './Color';
+import ColorSetInputs from './ColorSetInputs';
 
 export default class App extends PureComponent {
   render() {
@@ -31,6 +32,7 @@ export default class App extends PureComponent {
                 }}></hr>
                 <p style={{ color: getColor('shade5', 'shade7')}}>themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more).</p>
                 <h2 style={{ color: getColor('shade6', 'shade7')}}>1. Define colors</h2>
+                <ColorSetInputs />
               </div>
             </div>
           ) }

web/src/ColorSetInputs.css

@@ -0,0 +1,13 @@
+.tab-container button {
+  font-size: 1rem;
+  font-family: 'Fira Code', monospace;
+  padding: 0.25em 0.5em;
+  border-width: .0625rem;
+  border-style: solid;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.tab-container button + button {
+  margin-left: -0.0625rem;
+}

web/src/ColorSetInputs.js

@@ -0,0 +1,44 @@
+import React, { PureComponent } from 'react';
+import { UrlStateConsumer } from './UrlState';
+import './ColorSetInputs.css';
+import Color from './Color';
+
+export default class ColorSetInputs extends PureComponent {
+  render() {
+    return (
+      <section>
+        <UrlStateConsumer>
+          { ({ getValueOrFallback, mergeState }) => {
+            const isDark = getValueOrFallback(['activeColorSet']) === 'dark';
+            return (
+              <Color>
+                { getColor => {
+                  const getTabStyle = active => ({
+                    backgroundColor: active ? getColor('shade0') : getColor('shade2', 'shade0'),
+                    color: getColor('shade7'),
+                    borderTopColor: getColor('shade7'),
+                    borderRightColor: getColor('shade7'),
+                    borderBottomColor: active ? getColor('shade0') : getColor('shade7'),
+                    borderLeftColor: getColor('shade7'),
+                  });
+                  return (
+                    <div className="tab-container">
+                      <button
+                        style={ getTabStyle(isDark) }
+                        onClick={ () => mergeState({ activeColorSet: 'dark' }) }
+                      >Dark Variant</button>
+                      <button
+                        style={ getTabStyle(!isDark) }
+                        onClick={ () => mergeState({ activeColorSet: 'light' }) }
+                      >Light Variant</button>
+                    </div>
+                  );
+                } }
+              </Color>
+            );
+          } }
+        </UrlStateConsumer>
+      </section>
+    );
+  }
+}

web/src/UrlState.js

@@ -75,7 +75,7 @@ export class UrlStateProvider extends Component {
     );
   }
 
-  getValueOrFallback = (paths, parseColor) => {
+  getValueOrFallback = (paths, parseColor = false) => {
     return getValueOrFallback(
       this.state,
       fallbackState,