Added more color customisation options to the config file

Author: emilbaehr

_config.yml

@@ -76,9 +76,19 @@ features                                  :
     fontawesome_icon_name                 : # Enter Font Awesome icon name (e.g. star). Find icons on fontawesome.com/icons.
 
 # Theme Settings
-accent_color                              : "#1d63ea"                   
-primary_text_color                        : "#000000"
-secondary_text_color                      : "#666666"
+body_color                                : "#ffffff"
+
+accent_color                              : "#1d63ea"
+
+header_title_color                        : "#ffffff"
+
+app_title_color                           : "#ffffff"
+app_price_color                           : "#ffffff"
+app_description_color                     : "#ffffff"
+
+feature_title_color                       : "#000000"
+feature_text_color                        : "#666666"
+footer_text_color                         : "#666666"
 
 header_color                              : "#000000"
 header_transparency                       : 0.1

_sass/base.scss

@@ -13,6 +13,7 @@ html {
 
 body {
 	font-size: 2rem;
+	background-color: $body-color;
 }
 
 h1 {

_sass/layout.scss

@@ -64,7 +64,7 @@ header {
 }
 
 .logo > p {
-	color: #fff;
+	color: $header-title-color;
 	display: flex;
 	font-weight: bold;
 	padding-bottom: 1px;
@@ -150,11 +150,11 @@ nav > ul li a:active {
 }
 
 .appName {
-	color: #fff;
+	color: $app-title-color;
 }
 
 .appPrice {
-	color: #fff;
+	color: $app-price-color;
 	font-weight: normal;
 	margin-top: 13px;
 }
@@ -167,7 +167,7 @@ nav > ul li a:active {
 }
 
 .appDescription {
-	color: #fff;
+	color: $app-description-color;
 }
 
 @media only screen and (max-width: 992px) {
@@ -332,11 +332,11 @@ nav > ul li a:active {
 }
 
 .featureText > h3 {
-	color: $primary-text-color;
+	color: $feature-title-color;
 }
 
 .featureText > p {
-	color: $secondary-text-color;
+	color: $feature-text-color;
 	margin-top: 8px;
 	line-height: 1.5;
 }
@@ -376,7 +376,7 @@ footer {
 }
 
 .footerText {
-	color: $secondary-text-color;
+	color: $footer-text-color;
 	display: block;
 	line-height: 1.5;
 	width: 100%;

main.scss

@@ -2,13 +2,23 @@
 # Front matter comment to ensure Jekyll properly reads file.
 ---
 
+$body-color: "{{ site.body_color }}";
+
 $header-image: "{{ site.header_image }}";
 $device-color: "assets/{{ site.device_color }}.png";
-$primary-text-color: {{ site.primary_text_color }};
-$secondary-text-color: {{ site.secondary_text_color }};
+
 
 $accent-color: {{ site.accent_color }};
 
+$header-title-color: {{ site.header_title_color }};
+$app-title-color: {{ site.app_title_color }};
+$app-price-color: {{ site.app_price_color }};
+$app-description-color: {{ site.app_description_color }};
+
+$feature-title-color: {{ site.feature_title_color }};
+$feature-text-color: {{ site.feature_text_color }};
+$footer-text-color: {{ site.footer_text_color }};
+
 $header_color: {{ site.header_color }};
 $header_transparency: {{ site.header_transparency }};