Merge pull request #3 from shevabam/master

Add sidebar color parameter

4 files changed, 39 insertions, 2 deletions

diff --git a/README.md b/README.md
index 0e3b568..0b1a73d 100644
--- a/README.md
+++ b/README.md
@@ -43,7 +43,7 @@ Since the theme is a one-page theme, this is the way to make cross-references on
 Replace logo by creating `layouts/partials/logo.html` file
 
 ### Adding menu entries to the external links section
-Customize the name of the section by addind to the `config.toml`
+Customize the name of the section by adding to the `config.toml`
 ```toml
 [params]
 externalTitle = "Surfly docs"
@@ -57,5 +57,14 @@ url = "https://docs.surfly.com/javascript.html"
 weight = 20
 ```
 
+### Changing color
+Customize the color of the sidebar by adding to the `config.toml`
+```toml
+[params]
+sidebarColor = "green"
+```
+
+Available values : default, green, purple, pink, red, cyan, blue, grey, orange.
+
 ## Add favicon
 Put `favicon.ico` inside `static` folder
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 781c2e5..6fa7e6e 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -9,6 +9,7 @@ pygmentsStyle = "monokailight"
 
 [params]
 externalTitle = "Kraiklyn theme"
+sidebarColor = "default"
 
 [[menu.shortcuts]]
 name = "Kraiklyn on Github"
diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html
index c28928a..5aedb9f 100644
--- a/layouts/partials/sidebar.html
+++ b/layouts/partials/sidebar.html
@@ -1,4 +1,4 @@
-<div class="sidebar">
+<div class="sidebar sidebar-{{ .Site.Params.sidebarColor}}">
     <div class="navigation">
         {{ partial "logo.html" }}
         <h1 class="site-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1>
diff --git a/static/css/styles.css b/static/css/styles.css
index bcb88e9..ea0d2b2 100644
--- a/static/css/styles.css
+++ b/static/css/styles.css
@@ -40,6 +40,33 @@ html, body {
   display: flex;
   flex-direction: column;
 }
+.sidebar.sidebar-default {
+  background-color: #363636;
+}
+.sidebar.sidebar-green {
+  background-color: #459D61;
+}
+.sidebar.sidebar-purple {
+  background-color: #77518A;
+}
+.sidebar.sidebar-pink {
+  background-color: #AD6AA9;
+}
+.sidebar.sidebar-red {
+  background-color: #B05353;
+}
+.sidebar.sidebar-cyan {
+  background-color: #5399B0;
+}
+.sidebar.sidebar-blue {
+  background-color: #5378B0;
+}
+.sidebar.sidebar-grey {
+  background-color: #959492;
+}
+.sidebar.sidebar-orange {
+  background-color: #DAA35C;
+}
 @media (min-width: 48em) {
   .sidebar {
     position: fixed;