diff --git a/web/src/App.js b/web/src/App.js
index 59bd13b..18a3f5d 100644
--- a/web/src/App.js
+++ b/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 {
}}>
themer takes a set of colors and generates themes for your apps (editors, terminals, wallpapers, and more).
1. Define colors
+
) }
diff --git a/web/src/ColorSetInputs.css b/web/src/ColorSetInputs.css
new file mode 100644
index 0000000..531a5b5
--- /dev/null
+++ b/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;
+}
diff --git a/web/src/ColorSetInputs.js b/web/src/ColorSetInputs.js
new file mode 100644
index 0000000..6c0bed0
--- /dev/null
+++ b/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 (
+
+
+ { ({ getValueOrFallback, mergeState }) => {
+ const isDark = getValueOrFallback(['activeColorSet']) === 'dark';
+ return (
+
+ { 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 (
+
+
+
+
+ );
+ } }
+
+ );
+ } }
+
+
+ );
+ }
+}
diff --git a/web/src/UrlState.js b/web/src/UrlState.js
index 8e86e24..9e061af 100644
--- a/web/src/UrlState.js
+++ b/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,