Option to change (personalize) the colors of items in the new frontmatter (like in notion)

[albertoloscerritos]

It would be great (and unique) to be able to change the colors of different items in a list (or string) in the new 1.4. frontmatter like in notion.

I attach pictures of what I mean...

Notion:

Obsidian:

Thanks for the great work.

[AnubisNekhet]

Dynamically setting the color for frontmatter data is well beyond the limits of CSS, however you can use the following code to periodically color list items:

.metadata-property .multi-select-pill {
    --icon-rgb: var(--ctp-base);
    --icon-size: var(--icon-xs);
    --icon-stroke: var(--icon-xs-stroke-width);
    --pill-background: rgba(var(--icon-rgb), 0.3);
    --pill-background-hover: rgba(var(--icon-rgb), 0.4);
    --pill-radius: 2px;
    --pill-color: var(--text-normal);
    --pill-color-hover: var(--text-normal);
    --cursor: pointer;
    padding: var(--pill-padding-y) var(--size-2-2);
}
.multi-select-pill-remove-button {
    --pill-remove-color: var(--text-normal);
    --pill-remove-color-hover: var(--text-normal);
    --icon-stroke: 3;
    --icon-size: 12px;
}
.metadata-property .multi-select-pill:nth-child(11n+1) {--icon-rgb: var(--ctp-red);}
.metadata-property .multi-select-pill:nth-child(11n+2) {--icon-rgb: var(--ctp-peach);}
.metadata-property .multi-select-pill:nth-child(11n+3) {--icon-rgb: var(--ctp-yellow);}
.metadata-property .multi-select-pill:nth-child(11n+4) {--icon-rgb: var(--ctp-green);}
.metadata-property .multi-select-pill:nth-child(11n+5) {--icon-rgb: var(--ctp-teal);}
.metadata-property .multi-select-pill:nth-child(11n+6) {--icon-rgb: var(--ctp-sky);}
.metadata-property .multi-select-pill:nth-child(11n+7) {--icon-rgb: var(--ctp-sapphire);}
.metadata-property .multi-select-pill:nth-child(11n+8) {--icon-rgb: var(--ctp-blue);}
.metadata-property .multi-select-pill:nth-child(11n+9) {--icon-rgb: var(--ctp-lavender);}
.metadata-property .multi-select-pill:nth-child(11n+10) {--icon-rgb: var(--ctp-mauve);}
.metadata-property .multi-select-pill:nth-child(11n) {--icon-rgb: var(--ctp-pink);}

[albertoloscerritos]

Thanks a lot for your answer. Sorry, I am quite new to CSS. Is this a snippet or what am I supposed to do with the provided code? Thanks a lot for the great work.

[AnubisNekhet]

Thanks a lot for your answer. Sorry, I am quite new to CSS. Is this a snippet or what am I supposed to do with the provided code? Thanks a lot for the great work.

Yep, it's a snippet, you just need to copy the code into a CSS file and enable it in appearance settings.

[albertoloscerritos]

😍wow, it works great. Hope we can see this snippet added in the new updates of the AnuPpuccin core theme. I really appreciate the work you do. I will keep adding new ideas for the theme in case they interest you for new releases. Have a great day.

[albertoloscerritos]

Sorry, me again. Do you happen to know if it is possible to make the tags not be affected by the snippets, or give them a different formatting so we can more easily identify when we are working with tags and when we are working with lists of elements that are not tags?

[AnubisNekhet]

Sure

.metadata-property:not([data-property-key="tags"]) .multi-select-pill {
    --icon-rgb: var(--ctp-base);
    --icon-size: var(--icon-xs);
    --icon-stroke: var(--icon-xs-stroke-width);
    --pill-background: rgba(var(--icon-rgb), 0.3);
    --pill-background-hover: rgba(var(--icon-rgb), 0.4);
    --pill-radius: 2px;
    --pill-color: var(--text-normal);
    --pill-color-hover: var(--text-normal);
    --cursor: pointer;
    padding: var(--pill-padding-y) var(--size-2-2);
}
.metadata-property:not([data-property-key="tags"]) .multi-select-pill-remove-button {
    --pill-remove-color: var(--text-normal);
    --pill-remove-color-hover: var(--text-normal);
    --icon-stroke: 3;
    --icon-size: 12px;
}
.metadata-property .multi-select-pill:nth-child(11n+1) {--icon-rgb: var(--ctp-red);}
.metadata-property .multi-select-pill:nth-child(11n+2) {--icon-rgb: var(--ctp-peach);}
.metadata-property .multi-select-pill:nth-child(11n+3) {--icon-rgb: var(--ctp-yellow);}
.metadata-property .multi-select-pill:nth-child(11n+4) {--icon-rgb: var(--ctp-green);}
.metadata-property .multi-select-pill:nth-child(11n+5) {--icon-rgb: var(--ctp-teal);}
.metadata-property .multi-select-pill:nth-child(11n+6) {--icon-rgb: var(--ctp-sky);}
.metadata-property .multi-select-pill:nth-child(11n+7) {--icon-rgb: var(--ctp-sapphire);}
.metadata-property .multi-select-pill:nth-child(11n+8) {--icon-rgb: var(--ctp-blue);}
.metadata-property .multi-select-pill:nth-child(11n+9) {--icon-rgb: var(--ctp-lavender);}
.metadata-property .multi-select-pill:nth-child(11n+10) {--icon-rgb: var(--ctp-mauve);}
.metadata-property .multi-select-pill:nth-child(11n) {--icon-rgb: var(--ctp-pink);}
/*
.metadata-property .multi-select-pill .multi-select-pill-remove-button {
    max-width: 0;
    opacity: 0;
}
.metadata-property .multi-select-pill:hover .multi-select-pill-remove-button {
    max-width: 100%;
    opacity: 1;
    transition: opacity 0.2s;
}
*/

[albertoloscerritos]

Thanks. You are the best :)