From 12daa8c9fc74687d2d4d8fe42ec6035f3bef9674 Mon Sep 17 00:00:00 2001
From: Jimmy <jimmy@cai.im>
Date: Sun, 25 Jan 2026 17:35:40 +0100
Subject: [PATCH] feat: dynamically generate background color for category
 links (#1225)

* chore: add +x to run.sh

* feat: dynamically generate background color for category links using hash

* feat: allow category styles to be overridden by term parameters

* refactor: remove default tag background and color variables
---
 assets/scss/partials/article.scss                |  9 ---------
 assets/scss/variables.scss                       |  3 ---
 demo/run.sh                                      |  0
 layouts/partials/article/components/details.html |  5 ++++-
 layouts/partials/helper/color-from-str.html      | 13 +++++++++++++
 5 files changed, 17 insertions(+), 13 deletions(-)
 mode change 100644 => 100755 demo/run.sh
 create mode 100644 layouts/partials/helper/color-from-str.html

diff --git a/assets/scss/partials/article.scss b/assets/scss/partials/article.scss
index 6c2feb1..7423309 100644
--- a/assets/scss/partials/article.scss
+++ b/assets/scss/partials/article.scss
@@ -33,15 +33,6 @@
                 }
             }
         }
-
-        @for $i from 1 through length($defaultTagBackgrounds) {
-            &:nth-child(#{length($defaultTagBackgrounds)}n + #{$i}) {
-                .article-category a {
-                    background: nth($defaultTagBackgrounds, $i);
-                    color: nth($defaultTagColors, $i);
-                }
-            }
-        }
     }
 }
 
diff --git a/assets/scss/variables.scss b/assets/scss/variables.scss
index 2fb69be..da340db 100644
--- a/assets/scss/variables.scss
+++ b/assets/scss/variables.scss
@@ -1,6 +1,3 @@
-$defaultTagBackgrounds: #8ea885, #df7988, #0177b8, #ffb900, #6b69d6;
-$defaultTagColors: #fff, #fff, #fff, #fff, #fff;
-
 /*
 *   Global style
 */
diff --git a/demo/run.sh b/demo/run.sh
old mode 100644
new mode 100755
diff --git a/layouts/partials/article/components/details.html b/layouts/partials/article/components/details.html
index 4d268e4..20d0491 100644
--- a/layouts/partials/article/components/details.html
+++ b/layouts/partials/article/components/details.html
@@ -2,7 +2,10 @@
     {{ if .Params.categories }}
     <header class="article-category">
         {{ range (.GetTerms "categories") }}
-            <a href="{{ .RelPermalink }}" {{ with .Params.style }}style="background-color: {{ .background }}; color: {{ .color }};"{{ end }}>
+            {{ $color := partial "helper/color-from-str" .LinkTitle }}
+            {{ $BackgroundColor := default $color.BackgroundColor .Params.style.background }}
+            {{ $TextColor := default $color.TextColor .Params.style.color }}
+            <a href="{{ .RelPermalink }}" style="background-color: {{ $BackgroundColor | safeCSS }}; color: {{ $TextColor | safeCSS }};">
                 {{ .LinkTitle }}
             </a>
         {{ end }}
diff --git a/layouts/partials/helper/color-from-str.html b/layouts/partials/helper/color-from-str.html
new file mode 100644
index 0000000..6fc00cb
--- /dev/null
+++ b/layouts/partials/helper/color-from-str.html
@@ -0,0 +1,13 @@
+{{/* 
+    This helper is used to generate a background color and text color from a string
+    Used to generate deterministic colors for tags, categories, etc.
+*/}}
+
+{{- $str := . -}}
+{{- $hash := hash.FNV32a $str -}}
+{{- $h := mod $hash 360 -}}
+
+{{- $backgroundColor := printf "hsl(%d, 60%%, 84%%)" $h -}}
+{{- $textColor := printf "hsl(%d, 60%%, 15%%)" $h -}}
+
+{{- return dict "BackgroundColor" $backgroundColor "TextColor" $textColor "Hue" $h -}}