Themes: add themes

src/components/player/InputBox.jsx

@@ -84,7 +84,7 @@ export default function ({ currentWindow, inputType, sendMessage }) {
       value={inputText}
       placeholder={placeholder[inputType]}
       autofocus
-      autocomplete="off"
+      autocomplete='off'
       onDblClick={enterFullscreen}
       onInput={({ target: { value } }) => setInputText(value)}
       type='search' />

src/components/player/TextBuffer.jsx

@@ -57,7 +57,7 @@ export default function ({ inbox, currentWindow }) {
       const inputs =
         textBufferEl.current.querySelectorAll('.message.input')
       const lastInput =
-        inputs[inputs.length- 1]
+        inputs[inputs.length - 1]
 
       textBufferEl.current.scrollTop =
         lastInput

src/components/player/player.css

@@ -4,17 +4,22 @@
   flex-direction: column;
   box-sizing: border-box;
 
-  padding: 8px;
-  color: hsl(0, 0%, 0%, 0.8);
+  background-color: var(--bg-color);
+  color: var(--main-color);
+  padding: var(--outer-padding);
 }
 
 .inputBox {
   flex: 0 1 auto;
 
   font: inherit;
+  color: inherit;
   outline: 0;
-  border: 2px solid hsl(0, 0%, 0%, 0.8);;
-  padding: 8px;
+
+  background-color: var(--bg-color);
+  border: var(--border-width) solid var(--main-color);
+  padding: var(--inner-padding);
+  margin-top: var(--input-box-margin);
 }
 
 .textBuffer {
@@ -22,9 +27,11 @@
   overflow-y: scroll;
   box-sizing: border-box;
 
-  border: 2px solid hsl(0, 0%, 0%, 0.8);;
-  padding: 8px;
-  margin-bottom: 8px;
+  border: var(--border-width) solid var(--main-color);
+  padding: var(--inner-padding);
+
+  scrollbar-color: hsl(0, 0%, 50%, 0.5) var(--bg-color);
+  scrollbar-width: thin;
 }
 
 .textBuffer > br:first-child,

src/style/base.css

@@ -4,7 +4,14 @@ html, body {
   font-family: 'Open Sans', sans-serif;
 }
 
-body {
+#root {
+  height: 100%;
+}
+
+.app {
+  height: 100%;
+  box-sizing: border-box;
+
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -13,23 +20,23 @@ body {
   font-size: 18px;
   line-height: 27px;
 
+  background-color: var(--bg-color);
+  color: var(--main-color);
+  padding: var(--outer-padding);
 }
 
-#root {
+.app > main {
   flex: 1 1 auto;
 
   height: 100%;
   width: 100%;
+  box-sizing: border-box;
 }
 @media (min-width: 800px) {
-  #root {
+  .app > main {
     height: 90%;
     max-height: 90%;
 
     max-width: 800px;
   }
 }
-
-.app {
-  height: 100%;
-}

src/style/themes.css

@@ -1 +1,98 @@
+.default {
+  --bg-color: #ffffff;
+  --main-color: hsl(0, 0%, 0%, 0.8);
+  --outer-padding: 0px;
+  --inner-padding: 8px;
+  --border-width: 0px;
+  --input-box-margin: 8px;
+}
 
+.default-borders {
+  --bg-color: #ffffff;
+  --main-color: hsl(0, 0%, 0%, 0.8);
+  --outer-padding: 8px;
+  --inner-padding: 8px;
+  --border-width: 2px;
+  --input-box-margin: 8px;
+}
+
+.default-dim {
+  --bg-color: hsl(0, 0%, 20%);
+  --main-color: hsl(0, 0%, 100%, 0.8);
+  --outer-padding: 0px;
+  --inner-padding: 8px;
+  --border-width: 0px;
+  --input-box-margin: 8px;
+}
+
+.default-dim-borders {
+  --bg-color: hsl(0, 0%, 20%);
+  --main-color: hsl(0, 0%, 100%, 0.8);
+  --outer-padding: 8px;
+  --inner-padding: 8px;
+  --border-width: 2px;
+  --input-box-margin: 8px;
+}
+
+.default-dark {
+  --bg-color: #000000;
+  --main-color: #ffffff;
+  --outer-padding: 0px;
+  --inner-padding: 8px;
+  --border-width: 0px;
+  --input-box-margin: 8px;
+}
+
+.default-dark-borders {
+  --bg-color: #000000;
+  --main-color: #ffffff;
+  --outer-padding: 8px;
+  --inner-padding: 8px;
+  --border-width: 2px;
+  --input-box-margin: 8px;
+}
+
+/* solarized */
+
+.solarized-light,
+.solarized-light-borders,
+.solarized-dark,
+.solarized-dark-borders {
+  --outer-padding: 0px;
+  --inner-padding: 8px;
+  --border-width: 0px;
+  --input-box-margin: 8px;
+}
+
+.solarized-light-borders,
+.solarized-dark-borders {
+  --outer-padding: 8px;
+  --inner-padding: 8px;
+  --border-width: 2px;
+}
+
+.solarized-light,
+.solarized-light-borders {
+  --main-color: #586e75;
+  --bg-color: #eee8d5;
+}
+
+.solarized-dark,
+.solarized-dark-borders {
+  --main-color: #93a1a1;
+  --bg-color: #073642;
+}
+
+.solarized-light strong,
+.solarized-light-borders strong,
+.solarized-dark strong,
+.solarized-dark-borders strong{
+  color: #b58900;
+}
+
+.solarized-light .message.input,
+.solarized-light-borders .message.input,
+.solarized-dark .message.input,
+.solarized-dark-borders .message.input{
+  color: #2aa198;
+}

src/views/PlayerView.jsx

@@ -14,5 +14,9 @@ export default function ({ setTheme, theme, encodedUrl }) {
     setTargetUrl(decode(encodedUrl))
   }, [encodedUrl])
 
-  return (<UrlPlayer url={targetUrl} />)
+  return (
+    <main>
+      <UrlPlayer url={targetUrl} />
+    </main>
+  )
 }