Themes: add themes

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;
+}