From 586ba670b8a40c9bcd437ef604672e8a25e23811 Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Sat, 13 Jan 2018 19:17:41 -0800
Subject: [PATCH] finish theme engine

---
 routes/_static/themes.js  | 12 ++++++++++++
 scss/themes/_base.scss    |  2 +-
 scss/themes/_default.scss |  3 ++-
 scss/themes/hotpants.scss |  3 ++-
 scss/themes/majesty.scss  | 13 +++++++++++++
 scss/themes/oaken.scss    | 13 +++++++++++++
 scss/themes/scarlet.scss  |  3 ++-
 scss/themes/seafoam.scss  | 13 +++++++++++++
 8 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 scss/themes/majesty.scss
 create mode 100644 scss/themes/oaken.scss
 create mode 100644 scss/themes/seafoam.scss

diff --git a/routes/_static/themes.js b/routes/_static/themes.js
index 82186ce..aac8914 100644
--- a/routes/_static/themes.js
+++ b/routes/_static/themes.js
@@ -7,9 +7,21 @@ const themes = [
     name: 'scarlet',
     label: 'Scarlet'
   },
+  {
+    name: 'seafoam',
+    label: 'Seafoam'
+  },
   {
     name: 'hotpants',
     label: 'Hotpants'
+  },
+  {
+    name: 'oaken',
+    label: 'Oaken'
+  },
+  {
+    name: 'majesty',
+    label: 'Majesty'
   }
 ]
 
diff --git a/scss/themes/_base.scss b/scss/themes/_base.scss
index 46eb95d..4eca521 100644
--- a/scss/themes/_base.scss
+++ b/scss/themes/_base.scss
@@ -14,7 +14,7 @@
   --input-border: $border-color;
   --anchor-text: $anchor-color;
   --main-bg: $main-bg-color;
-  --body-bg: lighten($main-theme-color, 38%);
+  --body-bg: $body-bg-color;
   --body-text-color: $main-text-color;
   --main-border: $border-color;
 
diff --git a/scss/themes/_default.scss b/scss/themes/_default.scss
index 4d73f5f..bec4df7 100644
--- a/scss/themes/_default.scss
+++ b/scss/themes/_default.scss
@@ -1,4 +1,5 @@
 $main-theme-color: royalblue;
+$body-bg-color: lighten($main-theme-color, 38%);
 $anchor-color: $main-theme-color;
 $main-text-color: #333;
 $border-color: #dadada;
@@ -8,5 +9,5 @@ $secondary-text-color: white;
 @import "_base.scss";
 
 :root {
-  @include baseTheme()
+  @include baseTheme();
 }
diff --git a/scss/themes/hotpants.scss b/scss/themes/hotpants.scss
index dc778ff..23f69f7 100644
--- a/scss/themes/hotpants.scss
+++ b/scss/themes/hotpants.scss
@@ -1,4 +1,5 @@
 $main-theme-color: hotpink;
+$body-bg-color: lighten($main-theme-color, 25%);
 $anchor-color: $main-theme-color;
 $main-text-color: #333;
 $border-color: #dadada;
@@ -8,5 +9,5 @@ $secondary-text-color: white;
 @import "_base.scss";
 
 body.theme-hotpants {
-  @include baseTheme()
+  @include baseTheme();
 }
diff --git a/scss/themes/majesty.scss b/scss/themes/majesty.scss
new file mode 100644
index 0000000..325f96e
--- /dev/null
+++ b/scss/themes/majesty.scss
@@ -0,0 +1,13 @@
+$main-theme-color: blueviolet;
+$body-bg-color: lighten($main-theme-color, 40%);
+$anchor-color: $main-theme-color;
+$main-text-color: #333;
+$border-color: #dadada;
+$main-bg-color: white;
+$secondary-text-color: white;
+
+@import "_base.scss";
+
+body.theme-majesty {
+  @include baseTheme();
+}
diff --git a/scss/themes/oaken.scss b/scss/themes/oaken.scss
new file mode 100644
index 0000000..8623e53
--- /dev/null
+++ b/scss/themes/oaken.scss
@@ -0,0 +1,13 @@
+$main-theme-color: saddlebrown;
+$body-bg-color: lighten($main-theme-color, 60%);
+$anchor-color: $main-theme-color;
+$main-text-color: #333;
+$border-color: #dadada;
+$main-bg-color: white;
+$secondary-text-color: white;
+
+@import "_base.scss";
+
+body.theme-oaken {
+  @include baseTheme();
+}
diff --git a/scss/themes/scarlet.scss b/scss/themes/scarlet.scss
index 305699e..2d0cc48 100644
--- a/scss/themes/scarlet.scss
+++ b/scss/themes/scarlet.scss
@@ -1,4 +1,5 @@
 $main-theme-color: crimson;
+$body-bg-color: lighten($main-theme-color, 38%);
 $anchor-color: $main-theme-color;
 $main-text-color: #333;
 $border-color: #dadada;
@@ -8,5 +9,5 @@ $secondary-text-color: white;
 @import "_base.scss";
 
 body.theme-scarlet {
-  @include baseTheme()
+  @include baseTheme();
 }
diff --git a/scss/themes/seafoam.scss b/scss/themes/seafoam.scss
new file mode 100644
index 0000000..6fb1389
--- /dev/null
+++ b/scss/themes/seafoam.scss
@@ -0,0 +1,13 @@
+$main-theme-color: teal;
+$body-bg-color: lighten($main-theme-color, 70%);
+$anchor-color: $main-theme-color;
+$main-text-color: #333;
+$border-color: #dadada;
+$main-bg-color: white;
+$secondary-text-color: white;
+
+@import "_base.scss";
+
+body.theme-seafoam {
+  @include baseTheme();
+}