Umutcan It should actually be pretty straightforward to do with just css, but currently, color variables like the tag background (--tag-bg
) don't account for transparency, making it more complicated, especially without an extension.
It's not impossible, though. If you really want it, you can achieve it like this (keep in mind this is a quick solution and might need some refining).
In the database, you'll need to directly modify the tag color to include an rgb value, like: 0, 124, 240
.
Then, in your custom css, you can manage the color through the variable and its transparency using rgba:
.TagLabel {
background-color: ~"rgba(var(--tag-bg), 0.1) !important";
}
.item-tags .TagLabel.colored .TagLabel-text, .TagLabel--colored .TagLabel-text {
color: ~"rgba(var(--tag-bg), 1) !important";
}
As you can see in the image, it works, but you'll need to refine the css selectors to make it work everywhere, like on the tag hero, for example.
Ideally, the best solution would be for flarum/core to switch to using rgba or hsla values, but I’m not sure if there are any technical limitations at the moment...