🙏 How do I change some tag colours?

Questions & Help
1

Hello everyone,

I am wondering if anyone can help me to understand how to change some of my tag colours

Thank you in advance for any info and help

Kane

2

Hi, Nizur made a custom theme that supports tags with multi-colors. It’s static though, and only works on tags you define in the custom.css stylesheet.

Link -> Custom Logseq theme built on the dracula theme. Nothing fancy, but I made it and like it · GitHub

The specific piece you will want is below:

/*==================================================*/
/* ==== custom tags ===*/
/*==================================================*/
a.tag[data-ref] {
    align-items: center;
    background: var(--ls-color-clouds);
    border-radius: 1rem 0.4rem 0.4rem 1rem;
    color: var(--ls-primary-background-color);
    display: inline-flex;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 0.8rem;
    padding: 0.2rem 0.3rem 0.2rem 0.3rem;
    text-transform: uppercase;
    transition: .3s;
    white-space: nowrap;
}

a.tag[data-ref]:hover {
    filter: grayscale(25%) !important;
}

a.tag[data-ref]:before {
    background-color: var(--ls-primary-background-color);
    border-radius: 50%;
    content: '';
    display: inline-block;
    height: 0.6rem;
    line-height: 0.8rem;
    margin-right: 0.3rem;
    width: 0.6rem;
}

a.tag[data-ref="Permanent"] {
    background-color: var(--ls-color-nephritis) !important;
}

a.tag[data-ref="Literature"] {
    background-color: var(--ls-color-amethyst) !important;
}

a.tag[data-ref="Fleeting"] {
    background-color: var(--pink) !important;
}

a.tag[data-ref="Miscellaneous"] {
    background-color: var(--ls-color-peter-river) !important;
}

a.tag[data-ref="Journal"] {
    background-color: var(--ls-color-turquoise) !important;
}

a.tag[data-ref="Task"] {
    background-color: var(--ls-color-belize-hole) !important;
}

a.tag[data-ref="Project"] {
    background-color: var(--ls-color-carrot) !important;
}

a.tag[data-ref="Event"] {
    background-color: var(--ls-color-orange) !important;
}

a.tag[data-ref="WIP"] {
    background-color: var(--ls-color-sunflower) !important;
}

a.tag[data-ref="Important"] {
    background-color: var(--ls-color-alizarin) !important;
}

a.tag[data-ref="Important"]:after {
    content: '!!';
}
2 Likes
3

Thank you @Joe_Smoe that is brilliant, Thank you for your help!

2 Likes