How to color-code tags?

[fred-oswald]

any pointers on how to color-code tags? e.g., I'd like "general" to be green, "other" to be blue, etc.
sorting by tags would be bonus info :) thank you!

[gcushen]

You can color-code tags or categories with some simple CSS.

First create a Custom CSS file by creating a file named custom.scss in your assets/scss/ folder (creating those folders if necessary). Docs: https://wowchemy.com/docs/hugo-tutorials/extending-wowchemy/#customize-style-css

Then for each tag URL (e.g. /tag/academic/) choose a background and text color for the tag:

.article-tags a[href='/tag/academic/'] {
    background: deeppink;
    color: white;
}

The tags will then be color-coded on your site:

If you wish to create different color-codings for the dark mode, you can add a second style for each tag, this time prefixing with .dark:

.dark .article-tags a[href='/tag/source-themes/'] {
    background: deeppink;
    color: white;
}

If there's a lot of demand for this feature (add a thumbs up to the first post in this thread), we can consider integrating automated tag coloring.