Color themes

8 files changed, 30 insertions, 11 deletions

diff --git a/README.md b/README.md
index 9a2f793..1906500 100644
--- a/README.md
+++ b/README.md
@@ -82,9 +82,19 @@ Use the `config.toml` from the `exampleSite` subdirectory as base.
 - `showListsGrouped = true` to add headers for every year.
 - `showPostSummary = true` to only show a summary on index and lists.
 - `alwaysExpandMenu = true` to expand the menu on non-mobile devices otherwise the mobile button is shown on all devices. (***WiP - Only in bootstrap at the moment***)
-- `themeColor` set to dark, light, blue (do not set for default). (***WiP - Only in bootstrap at the moment - DO NOT SET YET!***)
 - `hideReadingTime` to hide reading time.
 
+Theme colors might be changed using the main colors from [Materialize color palette](https://materializecss.com/color.html).
+Might be like one of this: red, pink, indigo lighten-2, cyan, blue, light-green, amber, ...
+
+- `themeColor1` used by main buttons and navbar. (default=light-blue)
+- `themeColor1text` used by headlines. (default=light-blue-text)
+- `themeColor2` used by footer. (default=orange)
+- `themeColor2text` used by footer and card actions. (default=orange-text text-lighten-3)
+
+Currently the link color, pagination and blockquote color needs to be adjusted according to `main.css` too.
+Overwrite in your `/assets/css/custom.css` file.
+
 ## Screenshots of cofigurations
 
 `startPageColumns = false`
diff --git a/assets/css/main.css b/assets/css/main.css
index 9ea244d..4d8c1a5 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -16,3 +16,8 @@ h1.card-title, h2.card-title {
 h1.card-title > a {
     font-size: 2.3rem;
 }
+
+/** Must be set for inline text at the moment **/
+a { color: #03a9f4; /* light-blue */ }
+.pagination li.active { background-color: #ff9800; /* orange */ }
+blockquote { border-left: 5px solid #ff9800; }
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 9e38bd6..10ed16f 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -41,7 +41,11 @@ theme="materialize-bp-hugo-theme"
   # alwaysExpandMenu = true
   customDateFormat = "02.01.2006"
   # hideReadingTime = true
-  # themeColor="dark" # dark, light, blue, do not set for default
+  #themeColor1 = "light-green" # main buttons and navbar
+  #themeColor1text = "light-green-text"
+  #themeColor2 = "red" # footer
+  #themeColor2text = "red-text text-lighten-3"
+  # Please adjust colors in /assets/css/custom.css file according to main.css from theme.
   # js=["/js/test_site.js"]
   # css=["/css/test_site.css"]
   # csscdn=["https://fonts.googleapis.com/css?family=Concert+One|Roboto&display=swap"]
diff --git a/layouts/404.html b/layouts/404.html
index 3649192..5b4ea4c 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -14,7 +14,7 @@
                             <h1 class="card-title"><a href="{{ "/" | relLangURL }}">{{ .Title | markdownify }}</a></h1>                                                
                             <p class="card-text">{{ i18n "error404" }}</p>
                             <p><br />
-                                <a href="{{ "/" | relLangURL }}" class="blue waves-effect waves-light btn"><i class="material-icons right">navigate_next</i>{{ i18n "gotohome" }}</a>
+                                <a href="{{ "/" | relLangURL }}" class="{{ default "light-blue" (.Site.Params.themeColor1) }} waves-effect waves-light btn"><i class="material-icons right">navigate_next</i>{{ i18n "gotohome" }}</a>
                             </p>
                         </div>
                     </div>
diff --git a/layouts/partials/content_card_body.html b/layouts/partials/content_card_body.html
index 5b7d376..a0209a1 100644
--- a/layouts/partials/content_card_body.html
+++ b/layouts/partials/content_card_body.html
@@ -2,7 +2,7 @@
 {{ with .Site.Params.customDateFormat }}{{ $customDateFormat = . }}{{ end }}
 
 <div class="card-content">
-    <h1 class="card-title"><a href="{{ .RelPermalink }}">{{ .Title | markdownify }}</a></h1>
+    <h1 class="card-title"><a href="{{ .RelPermalink }}" class="{{ default "light-blue-text" (.Site.Params.themeColor1text) }}">{{ .Title | markdownify }}</a></h1>
     <h6 class="grey-text">
         <i class="tiny material-icons">calendar_today</i>&nbsp;{{ .PublishDate.Format $customDateFormat }}{{ if gt .Lastmod .PublishDate }}, {{ i18n "lastupdated" }} {{ .Lastmod.Format $customDateFormat }}{{ end }} -
         <i class="tiny material-icons">person</i>&nbsp;{{ range .Site.Author }}{{ . }}{{ end }}
@@ -28,7 +28,7 @@
         <p>{{ .Summary }}</p>
 
         <p><br />
-            <a href="{{ .RelPermalink }}" class="blue waves-effect waves-light btn"><i class="material-icons right">navigate_next</i>{{ i18n "readmore" }}</a>
+            <a href="{{ .RelPermalink }}" class="{{ default "light-blue" (.Site.Params.themeColor1) }} waves-effect waves-light btn"><i class="material-icons right">navigate_next</i>{{ i18n "readmore" }}</a>
             {{ if ne .Site.Params.hideReadingTime true }}
                 (<i class="tiny material-icons">timer</i>&nbsp;~{{ .ReadingTime }} Min.)
             {{end}}
diff --git a/layouts/partials/content_card_footer.html b/layouts/partials/content_card_footer.html
index 4c89a06..8295088 100644
--- a/layouts/partials/content_card_footer.html
+++ b/layouts/partials/content_card_footer.html
@@ -3,12 +3,12 @@
         {{ if ne .Type "page" }}
             {{ if gt .Params.categories 0 }}
                 {{ range .Params.categories }}
-                    <a href="{{ "/categories/" | relLangURL }}#{{ . | urlize }}">+{{ . }}</a>
+                    <a href="{{ "/categories/" | relLangURL }}#{{ . | urlize }}" class="{{ default "orange-text text-lighten-3" ($.Site.Params.themeColor2text) }}">+{{ . }}</a>
                 {{ end }}
             {{ end }}
             {{ if gt .Params.tags 0 }}
                 {{ range .Params.tags }}
-                    <a href="{{ "/tags/" | relLangURL }}#{{ . | urlize }}">#{{ . }}</a>
+                    <a href="{{ "/tags/" | relLangURL }}#{{ . | urlize }}" class="{{ default "orange-text text-lighten-3" ($.Site.Params.themeColor2text) }}">#{{ . }}</a>
                 {{ end }}
             {{ end }}
         {{ end }}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index d190707..16c6e45 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,4 +1,4 @@
-<footer class="page-footer orange">
+<footer class="page-footer {{ default "orange" (.Site.Params.themeColor2) }}">
     <div class="container">
         <div class="row">
             <div class="col l4 s12">
@@ -32,8 +32,8 @@
     <div class="footer-copyright">
         <div class="container">
             &copy; {{ now.Format "2006" }} {{ range .Site.Author }}{{ . }}{{ end }}.
-            {{ i18n "themeby" }} <a class="orange-text text-lighten-3" href="https://www.spech.de" target="_blank" rel="noopener noreferrer">Sebastian Pech</a>.
-            {{ i18n "madeby" }} <a class="orange-text text-lighten-3" href="http://materializecss.com" target="_blank" rel="noopener noreferrer">Materialize</a>.
+            {{ i18n "themeby" }} <a class="{{ default "orange-text text-lighten-3" (.Site.Params.themeColor2text) }}" href="https://www.spech.de" target="_blank" rel="noopener noreferrer">Sebastian Pech</a>.
+            {{ i18n "madeby" }} <a class="{{ default "orange-text text-lighten-3" (.Site.Params.themeColor2text) }}" href="http://materializecss.com" target="_blank" rel="noopener noreferrer">Materialize</a>.
         </div>
     </div>
 </footer>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 71aae3c..06ee0db 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,4 @@
-<nav class="light-blue lighten-1" role="navigation">
+<nav class="{{ default "light-blue" (.Site.Params.themeColor1) }}" role="navigation">
     <div class="nav-wrapper container">
         <a id="logo-container" href="{{ "/" | relLangURL }}" class="brand-logo">{{ .Site.Title }}</a>
         <a href="#" data-target="nav-mobile" class="sidenav-trigger"><i class="material-icons">menu</i></a>