[Feature] Like/dislike tag contrast

Alina asked the following in game:

I’ve tended to be mostly using Wolfery late in the evening, and when night mode is active (I’m using flux, but the OS’s built in night mode applies too) and the screen’s color temperature is shifted heavily towards red, in the 2500k color temperature range or lower, it becomes extremely difficult to tell the difference between wanted and unwanted tags in a profile, as well as the checkbox that toggles between off, wanted, and unwanted. There is still a very small color difference in the lines and text, but it is hard to see at a glance, and my experience with graphic design has taught me that people with reduced color vision find differences in thin line and text coloration to be difficult or impossible to distinguish. Giving unwanted tags either an inverted color scheme, like a red background and blue text, or some kind of different background fill like hazard stripes, would be one way to improve it.

Now, I don’t use Flux myself, so I can’t really try it out as easily.

Any suggestion (maybe with some attached css ) on how we can make like/dislike tags more distinct, while still keeping both of them fairly similarly weighted, not making one type not stand out much more than the other?

One suggestion from Alina is dashed:

tag_dislike_dashed

1 Like

One option to make it more obvious, since the meaning of a dotted line is going to be something people may need explained at first, would be to add a symbol, although this is less space efficient:
.chartagslist–tag.dislike::before { content: “\01F6C7\000020”; }
.chartagslist–tag.like::before { content: “\01F5F8\000020”; }

The result:
symbolic-tags-2

1 Like

I like the idea! Yes, it takes space, but it surely makes it much clearer, as the symbols themselves convey a meaning.

One can imagine also having different symbols for custom tags, to make them more distinct as well.

Alina make a modification to Lek’s suggestion, which takes a bit less space:

CmfyFKL

2 Likes

Neat. These look like good improvements! ^^