Merge pull request #3 from apvarun/support-color-customization

Support color customization

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All the changes made to Showcase theme for Hugo.
 
+## v1.2.0 - 2021-07-18
+
+### Added
+
+- Add color customization for Intro and Social links blocks
+
 ## v1.1.0 - 2021-07-17
 
 ### Added

README.md

@@ -15,6 +15,7 @@ Blist is a clean and fast blog theme for your Hugo site.
 - Text Search
 - Social links
 - Code highlighting
+- Color customization
 - Dark mode
 - Fast performance
 - SEO optimized
@@ -86,6 +87,12 @@ Menu in Blist theme is pre-set to have all section names. You can include custom
 
 `[params.darkModeToggle]` enables the dark mode toggle in header. The preference is then saved so that the mode is automatically chosen for return visits.
 
+### Customize Ascent Color
+
+Use `[params.ascentColor]` to change the default `pink` color to any supported color from the [list of default colors](https://tailwindcss.com/docs/customizing-colors) from Tailwind CSS.
+
+Some example values: bg-blue-200, bg-yellow-300
+
 ### Search
 
 `[params.enableSearch]` option is used to enable search option in the theme.

assets/css/tailwind.config.js

@@ -7,9 +7,11 @@ module.exports = {
       themeDir + "layouts/**/*.html",
       themeDir + "content/**/*.html",
       "layouts/**/*.html",
+      "config.toml",
       "content/**/*.html",
       "assets/js/search.js",
       "exampleSite/layouts/**/*.html",
+      "exampleSite/config.toml",
       "exampleSite/content/**/*.html",
     ],
   },

exampleSite/config.toml

@@ -17,6 +17,11 @@ title = "Blist Theme"
   copyright = "Copyright © 2021 - Katheryn Fox · All rights reserved"
   favicon = "favicon.svg"
 
+  # Color for the intro details and social links block, not applicable for dark mode
+  # Supported values: Any color from TailwindCSS default colors
+  # Reference: https://tailwindcss.com/docs/customizing-colors
+  ascentColor = "bg-blue-100"
+
 [params.homepage]
   title = "Hey! I'm Katheryn Fox"
   description = "26 y/o junior developer who enjoys social card games, blogging and painting"

layouts/index.html

@@ -8,7 +8,7 @@
 
   {{ if gt (len (where .Site.RegularPages.ByDate.Reverse "Type" "blog")) 6 }}
   <div class="text-center mb-8">
-    <a class="px-8 py-3 rounded transition-colors bg-pink-50 text-gray-500 hover:text-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:text-white" href="/blog">
+    <a class="px-8 py-3 rounded transition-colors {{ .Site.Params.ascentColor | default "bg-pink-50" }} text-gray-500 hover:text-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:text-white" href="/blog">
       More posts
     </a>
   </div>

layouts/partials/intro.html

@@ -1,4 +1,4 @@
-<section class="bg-pink-50 dark:bg-gray-900">
+<section class="{{ .Site.Params.ascentColor | default "bg-pink-50" }} dark:bg-gray-900">
   <div class="container max-w-screen-lg mx-auto px-6 py-12 grid md:grid-cols-2 gap-4 lg:gap-16 items-center">
     <div>
       <h1 class="text-4xl font-bold mb-4">{{ .Site.Params.homepage.title }}</h1>

layouts/partials/social.html

@@ -1,4 +1,4 @@
-<div class="bg-pink-50 dark:bg-gray-900">
+<div class="{{ .Site.Params.ascentColor | default "bg-pink-50" }} dark:bg-gray-900">
   <div class="container px-6 py-12 mx-auto max-w-4xl grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
     <div>
       <div class="text-2xl font-bold mb-2">Follow me</div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "blist",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Blist is a clean and fast blog theme for your Hugo site.",
   "main": "index.js",
   "repository": "https://github.com/apvarun/blist-hugo-theme",