Tag Color Improvements

Talk
, ,
1

The original color scheme had poor readability and didn’t look good, especially the tag colors, so I reworked it.

The original is:

Screenshot 2025-11-28 at 19.55.40
Screenshot 2025-11-28 at 19.55.40588×522 7.25 KB

Now:

Screenshot 2025-11-28 at 19.55.29
Screenshot 2025-11-28 at 19.55.29622×524 8.74 KB

The new color scheme is based on Notion, which I think looks significantly better than AnyType’s.

And here is the css:

CSS 
html,
body,
* {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol" !important;
    font-weight: 500 !important;
}

.isMultiSelect.tagItem > .inner {
    padding-inline: 3px;
}

:root {
    --color-tag-grey: #494846;
    --color-tag-yellow: #655121;
    --color-tag-orange: #6a4222;
    --color-tag-red: #6d3531;
    --color-tag-pink: #68354e;
    --color-tag-purple: #553b69;
    --color-tag-blue: #264a72;
    --color-tag-ice: #18505b;
    --color-tag-teal: #18505b;
    --color-tag-lime: #2a533c;

    --color-bg-tag-grey: #1c13011c;
    --color-bg-tag-yellow: rgba(209, 156, 0, .282);
    --color-bg-tag-orange: rgba(196, 88, 0, .203);
    --color-bg-tag-red: rgba(206, 24, 0, .164);
    --color-bg-tag-pink: rgba(183, 0, 78, .152);
    --color-bg-tag-purple: rgba(92, 0, 163, .141);
    --color-bg-tag-blue: rgba(0, 118, 217, .203);
    --color-bg-tag-ice: rgba(22, 184, 220, 0.51);
    --color-bg-tag-teal: rgba(0, 149, 183, .207);
    --color-bg-tag-lime: rgba(0, 96, 38, .156);

}


.isMultiSelect.tagColor-grey {
    background: var(--color-bg-tag-grey) !important;
    color: var(--color-tag-grey) !important;
}

.isMultiSelect.tagColor-yellow {
    background: var(--color-bg-tag-yellow) !important;
    color: var(--color-tag-yellow) !important;
}

.isMultiSelect.tagColor-orange {
    background: var(--color-bg-tag-orange) !important;
    color: var(--color-tag-orange) !important;
}

.isMultiSelect.tagColor-red {
    background: var(--color-bg-tag-red) !important;
    color: var(--color-tag-red) !important;
}

.isMultiSelect.tagColor-pink {
    background: var(--color-bg-tag-pink) !important;
    color: var(--color-tag-pink) !important;
}

.isMultiSelect.tagColor-purple {
    background: var(--color-bg-tag-purple) !important;
    color: var(--color-tag-purple) !important;
}

.isMultiSelect.tagColor-blue {
    background: var(--color-bg-tag-blue) !important;
    color: var(--color-tag-blue) !important;
}

.isMultiSelect.tagColor-ice {
    background: var(--color-bg-tag-ice) !important;
    color: var(--color-tag-ice) !important;
}

.isMultiSelect.tagColor-teal {
    background: var(--color-bg-tag-teal) !important;
    color: var(--color-tag-teal) !important;
}

.isMultiSelect.tagColor-lime {
    background: var(--color-bg-tag-lime) !important;
    color: var(--color-tag-lime) !important;
}

html.themeDark {
    --color-tag-grey: #f0efed;
    --color-tag-yellow:#f9f3dc;
    --color-tag-orange: #fbebde;
    --color-tag-red: #fce9e7;
    --color-tag-pink: #fae9f1;
    --color-tag-purple: #f3ebf9;
    --color-tag-blue: #e5f2fc;
    --color-tag-ice: #e0f3f7;
    --color-tag-teal: #e0f3f7;
    --color-tag-lime: #e8f1ec;

    --color-bg-tag-grey: rgba(255, 252, 235, .304);
    --color-bg-tag-yellow: #ffbc3575;
    --color-bg-tag-orange: rgba(255, 143, 71, .482);
    --color-bg-tag-red: hsla(4, 100%, 71%, .526);
    --color-bg-tag-pink: rgba(255, 133, 192, .426);
    --color-bg-tag-purple: rgba(208, 147, 255, .426);
    --color-bg-tag-blue: rgba(81, 166, 255, .495);
    --color-bg-tag-ice: rgba(15, 179, 215, 0.74);
    --color-bg-tag-teal: rgba(49,221,255,.382);
    --color-bg-tag-lime: rgba(113, 255, 175, .339);

    .isMultiSelect.tagColor-grey {
        background: var(--color-bg-tag-grey) !important;
        color: var(--color-tag-grey) !important;
    }

    .isMultiSelect.tagColor-yellow {
        background: var(--color-bg-tag-yellow) !important;
        color: var(--color-tag-yellow) !important;
    }

    .isMultiSelect.tagColor-orange {
        background: var(--color-bg-tag-orange) !important;
        color: var(--color-tag-orange) !important;
    }

    .isMultiSelect.tagColor-red {
        background: var(--color-bg-tag-red) !important;
        color: var(--color-tag-red) !important;
    }

    .isMultiSelect.tagColor-pink {
        background: var(--color-bg-tag-pink) !important;
        color: var(--color-tag-pink) !important;
    }

    .isMultiSelect.tagColor-purple {
        background: var(--color-bg-tag-purple) !important;
        color: var(--color-tag-purple) !important;
    }

    .isMultiSelect.tagColor-blue {
        background: var(--color-bg-tag-blue) !important;
        color: var(--color-tag-blue) !important;
    }

    .isMultiSelect.tagColor-ice {
        background: var(--color-bg-tag-ice) !important;
        color: var(--color-tag-ice) !important;
    }

    .isMultiSelect.tagColor-teal {
        background: var(--color-bg-tag-teal) !important;
        color: var(--color-tag-teal) !important;
    }

    .isMultiSelect.tagColor-lime {
        background: var(--color-bg-tag-lime) !important;
        color: var(--color-tag-lime) !important;
    }
}

As you can see, there is a lot of redundant code. I’ve already discussed this issue here: CSS Structure Needs Refactoring

2

It would also be better to either have more color choices, or to have an actual color picker, although the accessibility of it would have to be taken into account

3

Yes that’s true, just like blog’s theme color scheme