Created themed styles with Sass

dist/water-dark.css

@@ -0,0 +1,100 @@
+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: #dbdbdb;
+  background: #202b38;
+  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: #41adff; }
+
+a:hover {
+  text-decoration: underline; }
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb; }
+
+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: #ffffff; }
+
+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: #ffffff;
+  background-color: #161f27; }
+
+button {
+  color: #ffffff;
+  background-color: #161f27; }
+
+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: #324759; }
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab; }
+
+input[type='checkbox']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px); }

dist/water-light.css

@@ -0,0 +1,100 @@
+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: #363636;
+  background: #fff;
+  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: #0076d1; }
+
+a:hover {
+  text-decoration: underline; }
+
+hr {
+  border: none;
+  border-top: 1px solid #dbdbdb; }
+
+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: #000; }
+
+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: #000;
+  background-color: #efefef; }
+
+button {
+  color: #000;
+  background-color: #ddd; }
+
+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: #dddddd; }
+
+input:focus,
+select:focus,
+button:focus,
+textarea:focus {
+  box-shadow: 0 0 0 2px #0096bfab; }
+
+input[type='checkbox']:active,
+input[type='submit']:active,
+input[type='button']:active,
+button:active {
+  transform: translateY(2px); }

package.json

@@ -4,7 +4,7 @@
   "description": "A just-add-css collection of styles to make simple websites just a little nicer.",
   "main": "index.js",
   "scripts": {
-    "build": "node-sass"
+    "build": "node-sass ./src/water-dark.scss > ./dist/water-dark.css && node-sass ./src/water-light.scss > ./dist/water-light.css"
   },
   "repository": {
     "type": "git",

src/_water-core.scss

@@ -6,8 +6,8 @@ body {
   margin: 20px auto;
   padding: 0 10px;
 
-  color: #dbdbdb;
+  color: $font-color;
-  background: #202b38;
+  background: $background-color;
 
   text-rendering: optimizeLegibility;
 }
@@ -33,7 +33,7 @@ a, button, input, textarea {
 
 a {
   text-decoration: none;
-  color: #41adff;
+  color: $link-color;
 }
 
 a:hover {
@@ -42,7 +42,7 @@ a:hover {
 
 hr {
   border: none;
-  border-top: 1px solid #dbdbdb;
+  border-top: 1px solid $border-color;
 }
 
 h1 {
@@ -59,7 +59,7 @@ h1, h2, h3, h4, h5, h6, b, strong, th {
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: #ffffff;
+  color: $heading-color;
 }
 
 input:not([type='checkbox']), select {
@@ -74,11 +74,20 @@ input, select, button, textarea {
   margin-bottom: 6px;
   padding: 10px;
 
-  color: #ffffff;
   border: none;
   border-radius: 6px;
   outline: none;
-  background: #161f27;
+}
+
+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 {
@@ -100,14 +109,14 @@ button, input[type='submit'], input[type='button'] {
 button:hover,
 input[type='submit']:hover,
 input[type='button']:hover {
-  background: #324759;
+  background: $button-hover-color;
 }
 
 input:focus,
 select:focus,
 button:focus,
 textarea:focus {
-  box-shadow: 0 0 0 2px #0096bfab;
+  box-shadow: 0 0 0 2px $focus-color;
 }
 
 input[type='checkbox']:active,
@@ -121,40 +130,3 @@ input:disabled {
   cursor: not-allowed;
   opacity: .5;
 }
-
-body.light {
-  color: #363636;
-  background: #ffffff;
-}
-
-body.light a {
-  color: #0076d1;
-}
-
-body.light h1,
-body.light h2,
-body.light h3,
-body.light h4,
-body.light h5,
-body.light h6,
-body.light strong {
-  color: #000000;
-}
-
-body.light input,
-body.light select,
-body.light button,
-body.light textarea {
-  color: #000000;
-  background: #efefef;
-}
-
-body.light button:hover,
-body.light input[type='submit']:hover,
-body.light input[type='button']:hover {
-  background: #dddddd;
-}
-
-::placeholder {
-  color: #949494;
-}

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'