Color Code Tasks Based on Tag

[gypsyav]

Here is some CSS I use to color code my tasks based on tags. If a task has multiple tags it will use the color of the last tag defined below. Change the tag names to match your tags and the color and background to the colors you want to use.

/* Color code by tag */

span.task-description {
text-shadow: 1px 1px 5px black;
}

.task-description span:has(.tag[data-tag-name="#agenda"]),
.task-description span:has(.tag[data-tag-name="#routine"]) {
color: #ffCCCC;
background: linear-gradient(to right, #996666, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#chore"]) {
color: #cccccc;
background: linear-gradient(to right, #666666, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#tv"]),
.task-description span:has(.tag[data-tag-name="#movie"]) {
color: #edffff;
background: linear-gradient(to right, #87CEFA, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#task"]) {
color: #fffdcf;
background: linear-gradient(to right, #BDB76B, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#sca"]) {
color: #00e000;
background: linear-gradient(to right, #008000, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#game"]) {
color: #66e6e6;
background: linear-gradient(to right, teal, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#olympians"]) {
color: #ae9fef;
background: linear-gradient(to right, #483D8B, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#bill"]) {
color: #f9f9f9;
background: linear-gradient(to right, #D3D3D3, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#habit"]) {
color: #fdfdff;
background: linear-gradient(to right, #E6E6FA, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#art"]) {
color: #f666fa;
background: linear-gradient(to right, #8000c4, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#business"]),
.task-description span:has(.tag[data-tag-name="#work"]){
color: #f6c666;
background: linear-gradient(to right, #a06000, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#writing"]) {
color: #f6e666;
background: linear-gradient(to right, #a08000, transparent);
border-radius: 10px;
padding: 2px 8px;
}

.task-description span:has(.tag[data-tag-name="#project"]) {
color: #c6a666;
background: linear-gradient(to right, #604000, transparent);
border-radius: 10px;
padding: 2px 8px;
}