How do I give colors to categories in documents

[haxfn]

Description

Hi amazing quarto community! I was wondering if I can give colors to categories:

---

in listings:

---

and also give consistent category colors inside individual pages:

---

I want to achieve something like this:

[mcanouil]

Probably with a bunch of (S)CSS and JavaScript.
Clearly not something trivial.

If you look at your example from GitHub, what you want implies:

1. adding classes or IDs to each category.
2. adding (S)CSS rules matching the above.

You could achieve 1. using a custom listing (EJS which uses JavaScript to compute things), but it won't have an effect to individual posts.

[haxfn]

ideally, i want categories to be from a list in a yaml file, where I would define colors for each category:

\`\`\`yaml
- id: chess
  color: yellow
  icon: :chess_pawn: 
- id: puzzle
  color: green
  icon: :jigsaw: 
\`\`\`

then I would use these ids in individual files

[mcanouil]

You'll have to write that logic yourself somewhere using Lua, Javascript, and (S)CSS:
Don't \`\`\`, simply enclose with more.

Example:

quarto create project blog

add to _quarto.yml

    include-after-body:
      - text: |
          <script>
          document.addEventListener('DOMContentLoaded', function() {
            const categoryDivs = document.querySelectorAll('.listing-category, .quarto-category');
            categoryDivs.forEach(function(div) {
              let content;
              if (div.querySelector('a')) {
                content = div.querySelector('a').textContent.trim().toLowerCase();
              } else {
                content = div.textContent.trim().toLowerCase();
              }
              div.id = "quarto-category-" + content;
            });
          });
          </script>

and in styles.css

#quarto-category-analysis {
  background-color: #b22222;
  border-color: #b22222;
  color: #ffffff;
}

#quarto-category-code {
  background-color: #4682b4;
  border-color: #4682b4;
  color: #ffffff;
}

#quarto-category-news {
  background-color: #228b22;
  border-color: #228b22;
  color: #ffffff;
}

[haxfn]

whoa magic

this is sort of hacky, as if the page has any other <a> tags, then they'll get a style class.

works for my use case for now. ideally, reading from yaml file

You'll have to write that logic yourself somewhere using Lua, Javascript, and (S)CSS:

are you referring to logic reading from yaml file?

[haxfn]

but it won't have an effect to individual posts.

how is the above working for individual posts, the individual pages are not listings

[mcanouil]

yes.

Note that the above JavaScript does only account for the case. It does not ensure the ID built out of the content is valid. You'll have to update to remove or replace spaces, non ascii characters, etc.

[haxfn]

ideally, i want categories to be from a list in a yaml file, where I would define colors for each category:

@mcanouil for having categories sourced from a separate file, i found this:

#5578

this does not have all of the things: (colors, icon) it just has keyword name right now.

[haxfn]

That does not seem to be working for me. #12689

[mcanouil]

That does not seem to be working for me

Unfortunately, this kind of comment does not help anyone help you.
You need to provide context and code if you want any help.