theme colors now configured via CSS file, gyorb/master #40

CHANGELOG.md

@@ -12,6 +12,7 @@
   * read more link style
   * code block background now transparent
   * date format now D Mon YYYY
+  * theme colors are changed via css file
 
 ### Fixed
   * fix breaking change in mainSections introduced in Hugo v0.57.0

README.md

@@ -5,7 +5,7 @@ Simple minimalistic dark theme for [Hugo](https://gohugo.io/).
 ## Features
 
 * Responsive minimalistic design
-* Configurable theme colors
+* Configure theme colors via CSS file
 * Syntax highlight with builtin [Chroma](http://gohugo.io/content-management/syntax-highlighting/)
 * [OpenGraph](http://ogp.me/), [Twitter cards](https://dev.twitter.com/cards/overview) support
 * [Disqus](https://disqus.com/) comments support
@@ -72,12 +72,5 @@ pygmentsCodeFences = true
   twitter = "twitter id"
   linkedin = "linkedin id"
   email = "myemail"
-
-[params.colors]
-  # hugo-dusk colors
-  background = "#101010" # background color for the site
-  main = "#99cc66"
-  text = "#dbdbdb"
-  code-quote-bg = "#1D1F21" # background color for quotes and code blocks
-  copyright = "#404040" # copyright text color
+  theme_colors = "color-dark"
 ~~~~

exampleSite/config.toml

@@ -49,11 +49,4 @@ pygmentsCodeFences = true
   #gitlab = "gitlab id"
   twitter = "twitter id"
   #linkedin = "linkedin id"
-
-[params.colors]
-  # hugo-dusk colors
-  background = "#101010" # background color for the site
-  main = "#15b22c"
-  text = "#dbdbdb"
-  code-quote-bg = "#1D1F21" # background color for quotes and code blocks
-  copyright = "#b9bcbf" # copyright text color
+  theme_colors = "color-dark"

layouts/partials/head.html

@@ -14,9 +14,11 @@
 
 <link rel="stylesheet" href="/css/layout.css" />
 <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
-<style type="text/css">
-{{ partial "theme-colors.css" . | safeCSS }}
-</style>
+{{ if isset .Site.Params "theme_colors" }}
+<link rel="stylesheet" href="/css/{{ .Site.Params.theme_colors }}.css" />
+{{ else }}
+<link rel="stylesheet" href="/css/color-dark.css" />
+{{ end }}
 
 {{ template "_internal/google_analytics_async.html" . }}
 

layouts/partials/theme-colors.css

@@ -1,63 +0,0 @@
-body {
-  background-color: {{ .Param "colors.background" }};
-  color: {{ .Param "colors.text" }};
-}
-
-a { color: {{ .Param "colors.text" }}; }
-
-pre {
-  background: {{ .Param "colors.code-quote-bg" }};
-  border: 1px solid {{ .Param "colors.text" }};
-  border-radius: 5px;
-}
-
-code {
-  background-color: transparent;
-}
-
-blockquote {
-  background: {{ .Param "colors.code-quote-bg" }};
-  border-left: 3px solid {{ .Param "colors.text" }};
-}
-
-table {
-  margin: 1em auto;
-  border-collapse: collapse;
-}
-
-table, th, td {
-  border: 1px solid {{ .Param "colors.text" }};
-}
-
-th {
-  background: {{ .Param "colors.text" }};
-  color: {{ .Param "colors.background" }};
-}
-
-.siteTitle a { color: {{ .Param "colors.main" }}; }
-
-.post .content h1{ color: {{ .Param "colors.main" }}; }
-.post .content h2{ color: {{ .Param "colors.main" }}; }
-.post .content h3{ color: {{ .Param "colors.main" }}; }
-.post .content h4{ color: {{ .Param "colors.main" }}; }
-.post .content h5{ color: {{ .Param "colors.main" }}; }
-.post .content h6{ color: {{ .Param "colors.main" }}; }
-.post .content a:hover { color: {{ .Param "colors.main" }}; }
-.social-link:hover { color: {{ .Param "colors.main" }}; }
-.nav-item-title:hover { color: {{ .Param "colors.main" }}; }
-.tag a:hover { color: {{ .Param "colors.main" }}; }
-.copyright { color: {{ .Param "colors.copyright" }} }
-.poweredby { color: {{ .Param "colors.copyright" }} }
-.poweredby a { color: {{ .Param "colors.copyright" }}; }
-.post-preview .title a{ color: {{ .Param "colors.main" }}; }
-.content-item a:hover{
-  text-decoration: underline;
-  color: {{ .Param "colors.main" }};
-}
-.post-list .title { color: {{ .Param "colors.main" }}; }
-.rmore { color: {{ .Param "colors.text" }}; }
-.rmore:hover { color: {{ .Param "colors.main" }}; }
-.terms .term a:hover {
-  text-decoration: underline;
-  color: {{ .Param "colors.main" }};
-}