From e674706aab86a88572588b0f4d4fd85faf9a04c0 Mon Sep 17 00:00:00 2001
From: vimux <vimux@protonmail.com>
Date: Sun, 20 Jan 2019 12:55:19 -0500
Subject: [PATCH] Add color themes support

---
 README.md                        |  4 +++-
 layouts/partials/head.html       |  3 +++
 static/css/main.css              |  6 +++---
 static/css/themes/dark-blue.css  | 28 ++++++++++++++++++++++++++++
 static/css/themes/dark-green.css | 28 ++++++++++++++++++++++++++++
 5 files changed, 65 insertions(+), 4 deletions(-)
 create mode 100644 static/css/themes/dark-blue.css
 create mode 100644 static/css/themes/dark-green.css

diff --git a/README.md b/README.md
index ca8387c..8dbab4a 100644
--- a/README.md
+++ b/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
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 80c3080..cfd14af 100644
--- a/layouts/partials/head.html
+++ b/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" }}
diff --git a/static/css/main.css b/static/css/main.css
index 8f4d583..9d3c020 100644
--- a/static/css/main.css
+++ b/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 {
diff --git a/static/css/themes/dark-blue.css b/static/css/themes/dark-blue.css
new file mode 100644
index 0000000..ff8d29b
--- /dev/null
+++ b/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;
+}
diff --git a/static/css/themes/dark-green.css b/static/css/themes/dark-green.css
new file mode 100644
index 0000000..0f7483f
--- /dev/null
+++ b/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;
+}