Add color themes support

README.md

@@ -10,6 +10,7 @@
 
 * Responsive
 * Card-based list layout
+* Color themes
 * Internal Hugo templates for Open Graph and Twitter Cards meta data, Google Analytics, and Disqus comments
 * Table of contents
 * Related content
@@ -121,7 +122,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
   avatar = "img/avatar.png"
 
 [Params]
-  description = "Responsive card-based & code-light Hugo theme" # Description of your site. Used in meta description
+  description = "Responsive card-based & code-light Hugo theme" # Site Description. Used in meta description
   copyright = "Binario" # Copyright holder, otherwise will use .Site.Title
   opengraph = true # Enable OpenGraph if true
   twitter_cards = true # Enable Twitter Cards if true
@@ -129,6 +130,7 @@ googleAnalytics = "" # Enable Google Analytics by entering your tracking id
   mainSections = ["post"] # Set main page sections
   post_meta = ["date", "categories"] # Enable post meta fields in given order
   dateFormat = "January 02, 2006" # Change the format of dates
+  colorTheme = "dark-green" # dark-green, dark-blue
   customCSS = ["css/custom.css"] # Include custom CSS files
   authorbox = true # Show authorbox at bottom of single pages if true
   toc = true # Enable Table of Contents for all site pages

layouts/partials/head.html

@@ -16,6 +16,9 @@
 	{{- range .Site.Params.customCSS }}
 	<link rel="stylesheet" href="{{ . | relURL }}">
 	{{- end }}
+	{{- with .Site.Params.colorTheme }}
+	<link rel="stylesheet" href="{{ (printf "css/themes/%s.css" .) | relURL }}">
+	{{- end }}
 	<link rel="icon" href="{{ "icons/16.png" | relURL }}" sizes="16x16" type="image/png">
 	<link rel="icon" href="{{ "icons/32.png" | relURL }}" sizes="32x32" type="image/png">
 	{{- with .OutputFormats.Get "rss" }}

static/css/main.css

@@ -217,7 +217,7 @@ kbd {
 	padding: 2px 3px;
 	font-weight: 700;
 	color: #111;
-	background: #888;
+	background-color: #888;
 }
 
 figure {
@@ -728,7 +728,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
 	margin-bottom: 1rem;
 	color: #f8ae00;
 	list-style: none;
-	background: #111;
+	background-color: #111;
 }
 
 .toc[open] {
@@ -1002,7 +1002,7 @@ button:not(:-moz-focusring):focus > .main-nav__btn-box {
 	}
 
 	mark {
-		background: #25a;
+		background-color: #25a;
 	}
 
 	blockquote {

static/css/themes/dark-blue.css

@@ -0,0 +1,28 @@
+a {
+	color: #77baff;
+}
+
+blockquote {
+	border-color: #77baff;
+}
+
+mark {
+	background-color: #77baff;
+}
+
+.logo:hover {
+	color: #77baff;
+}
+
+.main-nav__btn {
+	fill: #77baff;
+}
+
+.toc {
+	color: #77baff;
+}
+
+.share__icon {
+	fill: #77baff;
+	stroke: #77baff;
+}

static/css/themes/dark-green.css

@@ -0,0 +1,28 @@
+a {
+	color: #9ccc6c;
+}
+
+blockquote {
+	border-color: #9ccc6c;
+}
+
+mark {
+	background-color: #9ccc6c;
+}
+
+.logo:hover {
+	color: #9ccc6c;
+}
+
+.main-nav__btn {
+	fill: #9ccc6c;
+}
+
+.toc {
+	color: #9ccc6c;
+}
+
+.share__icon {
+	fill: #9ccc6c;
+	stroke: #9ccc6c;
+}