use scss for theme colors instead of cssscss-theme

5 files changed, 42 insertions, 41 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7816725..9bab073 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,7 +9,7 @@
     - some small layout changes
 
 ### Changed
-  * Theme colors can be changed in a custom css file
+  * Theme colors can be changed in a custom scss file
   * minimal required Hugo version is v0.57.2
   * sort posts/pages on the error page by last modification date
 
diff --git a/README.md b/README.md
index 59414d8..1024748 100644
--- a/README.md
+++ b/README.md
@@ -5,7 +5,7 @@ Simple minimalistic dark theme for [Hugo](https://gohugo.io/).
 ## Features
 
 * Responsive minimalistic design
-* Configurable theme colors (with custom css file)
+* Configurable theme colors (with custom scss 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
@@ -70,5 +70,5 @@ pygmentsCodeFences = true
   twitter = "twitter id"
   linkedin = "linkedin id"
   email = "myemail"
-  theme_colors = "default-dark" # uses color css file under static/css/default-dark.css
+  theme_colors = "default-dark" # uses color scss file under assets/sass/default-dark.scss
 ~~~~
diff --git a/static/css/default-dark.css b/assets/sass/default-dark.scss
index 750227b..17b5d55 100644
--- a/static/css/default-dark.css
+++ b/assets/sass/default-dark.scss
@@ -3,25 +3,24 @@
  * main green: #99cc66
  * */
 
-:root {
-    --main-bg-color: #101010;
-    --main-text: #ffffff;
-    --main-sec: #99cc66; /* main secondary color for the site */
-    --code-quote-bg: #1D1F21; /* background color for quotes and code blocks */
-    --copyright: #404040; /* copyright text color */
-}
+$main-bg: #101010;
+$main-text: #ffffff;
+$main-sec: #99cc66; /* main secondary color for the site */
+$code-quote-bg: #1D1F21; /* background color for quotes and code blocks */
+$copyright: #404040; /* copyright text color */
+
 
 body {
-  background: var(--main-bg-color);
-  color: var(--main-text);
+  background: $main-bg;
+  color: $main-text;
 }
 
 a {
-  color: var(--main-text);
+  color: $main-text;
 }
 
 pre {
-  background: var(--main-bg-color);
+  background: $main-bg;
   border: 1px solid #303030;
   border-radius: 5px;
 }
@@ -31,8 +30,8 @@ code {
 }
 
 blockquote {
-  background: var(--main-bg-color);
-  border-left: 3px solid var(--main-sec);
+  background: $main-bg;
+  border-left: 3px solid $main-sec;
 }
 
 table { margin: 1em auto; border-collapse: collapse; }
@@ -40,7 +39,7 @@ table, th, td { border: 1px solid #5C5C5C; }
 tr:hover { background: #1D1F21; }
 th { background: #1D1F21; }
 .siteTitle a {
-  color: var(--main-sec);
+  color: $main-sec;
 }
 
 .post {
@@ -50,19 +49,19 @@ th { background: #1D1F21; }
   box-shadow: 0 1px 2px 0 #000000, 0 2px 5px 0 #000000;
 }
 
-.post .content h1{ color: var(--main-sec); }
-.post .content h2{ color: var(--main-sec); }
-.post .content h3{ color: var(--main-sec); }
-.post .content h4{ color: var(--main-sec); }
-.post .content h5{ color: var(--main-sec); }
-.post .content h6{ color: var(--main-sec); }
-.post .content a:hover { color: var(--main-sec); }
-.social-link:hover { color: var(--main-sec); }
-.nav-item-title:hover { color: var(--main-sec); }
-.tag a:hover { color: var(--main-sec); }
-.copyright { color: var(--copyright); }
-.poweredby { color: var(--copyright); }
-.poweredby a { color: var(--copyright); }
+.post .content h1{ color: $main-sec; }
+.post .content h2{ color: $main-sec; }
+.post .content h3{ color: $main-sec; }
+.post .content h4{ color: $main-sec; }
+.post .content h5{ color: $main-sec; }
+.post .content h6{ color: $main-sec; }
+.post .content a:hover { color: $main-sec; }
+.social-link:hover { color: $main-sec; }
+.nav-item-title:hover { color: $main-sec; }
+.tag a:hover { color: $main-sec; }
+.copyright { color: $copyright; }
+.poweredby { color: $copyright; }
+.poweredby a { color: $copyright; }
 
 .post-preview {
   border: 1px solid #303030;
@@ -76,7 +75,7 @@ th { background: #1D1F21; }
 }
 
 .post-preview .title a {
-  color: var(--main-sec);
+  color: $main-sec;
 }
 
 .content-item {
@@ -92,25 +91,25 @@ th { background: #1D1F21; }
 
 .content-item a:hover{
   text-decoration: underline;
-  color: var(--main-sec);
+  color: $main-sec;
 }
 
 .post-list .title {
-  color: var(--main-sec);
+  color: $main-sec;
 }
 
 .rmore {
-  color: var(--main-text);
+  color: $main-text;
 }
 
 .rmore a {
-  background: var(--main-bg-color);
+  background: $main-bg;
   border: 1px solid #303030;
 }
 
 .rmore a:hover {
   background: #202020;
-  color: var(--main-text);
+  color: $main-text;
 }
 
 .terms {
@@ -125,7 +124,7 @@ th { background: #1D1F21; }
 
 .term a:hover {
   text-decoration: underline;
-  color: var(--main-sec);
+  color: $main-sec;
 }
 
 .err-404 {
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 59df3e0..9a73096 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -49,4 +49,4 @@ pygmentsCodeFences = true
   #gitlab = "gitlab id"
   twitter = "twitter id"
   #linkedin = "linkedin id"
-  theme_colors = "default-dark"
+  theme_colors = "default-dark" # uses color scss file under assets/sass/default-dark.scss
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 3b2bb4f..0721f41 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -14,12 +14,14 @@
 
 <link rel="stylesheet" href="/css/layout.css" />
 
+{{ $theme_colors := "/sass/default-dark.scss" }}
 {{ if isset .Site.Params "theme_colors" }}
-<link rel="stylesheet" href="/css/{{ .Site.Params.theme_colors }}.css" />
-{{ else }}
-<link rel="stylesheet" href="/css/default-dark.css" />
+  {{ $theme_colors := (printf "/sass/%s.scss" .Site.Params.theme_colors) }}
 {{ end }}
 
+{{ $style := resources.Get $theme_colors | resources.ToCSS | resources.Minify }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">
+
 {{ template "_internal/google_analytics_async.html" . }}
 
 <title>