Created themed styles with Sass

src/_water-core.scss

@@ -0,0 +1,132 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.4;
+
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 0 10px;
+
+  color: $font-color;
+  background: $background-color;
+
+  text-rendering: optimizeLegibility;
+}
+
+button,
+input[type='submit'],
+input[type='button'],
+input[type='checkbox'] {
+  cursor: pointer;
+}
+
+img {
+  max-width: 100%;
+}
+
+a, button, input, textarea {
+  transition: background-color .1s linear,
+  border-color .1s linear,
+  color .1s linear,
+  box-shadow .1s linear,
+  transform .1s linear;
+}
+
+a {
+  text-decoration: none;
+  color: $link-color;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid $border-color;
+}
+
+h1 {
+  font-size: 2.2em;
+  margin-top: 0;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin-bottom: 12px;
+}
+
+h1, h2, h3, h4, h5, h6, b, strong, th {
+  font-weight: 600;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: $heading-color;
+}
+
+input:not([type='checkbox']), select {
+  display: block;
+}
+
+input, select, button, textarea {
+  font-family: inherit;
+  font-size: inherit;
+
+  margin-right: 6px;
+  margin-bottom: 6px;
+  padding: 10px;
+
+  border: none;
+  border-radius: 6px;
+  outline: none;
+}
+
+input, select, textarea {
+  color: $form-font-color;
+  background-color: $form-background-color;
+
+}
+
+button {
+  color: $button-font-color;
+  background-color: $button-background-color
+}
+
+input:not([type='checkbox']), select, button, textarea {
+  -webkit-appearance: none;
+}
+
+textarea {
+  margin-right: 0;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+}
+
+button, input[type='submit'], input[type='button'] {
+  padding-right: 30px;
+  padding-left: 30px;
+}
+
+button:hover,
+input[type='submit']:hover,
+input[type='button']:hover {
+  background: $button-hover-color;
+}
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px $focus-color;
+}
+
+input[type='checkbox']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px);
+}
+
+input:disabled {
+  cursor: not-allowed;
+  opacity: .5;
+}

src/water-dark.scss

@@ -0,0 +1,19 @@
+$background-color: #202b38;
+$font-color: #dbdbdb;
+$link-color: #41adff;
+
+$heading-color: #ffffff;
+
+$border-color: #dbdbdb;
+
+$focus-color: #0096bfab;
+
+$button-background-color: #161f27;
+$button-font-color: #ffffff;
+$button-hover-color: #324759;
+
+$form-font-color: #ffffff;
+$form-background-color: #161f27;
+$form-placeholder-color: #a9a9a9;
+
+@import 'water-core'

src/water-light.scss

@@ -0,0 +1,19 @@
+$background-color: #fff;
+$font-color: #363636;
+$link-color: #0076d1;
+
+$heading-color: #000;
+
+$border-color: #dbdbdb;
+
+$focus-color: #0096bfab;
+
+$button-background-color: #ddd;
+$button-font-color: #000;
+$button-hover-color: #dddddd;
+
+$form-font-color: #000;
+$form-background-color: #efefef;
+$form-placeholder-color: #949494;
+
+@import 'water-core'