COLOR BB code: Improve text readability (contrast) in light and dark styles (E.g. Darken/lighten the rendered color)

marquisite

Well-known member
We can have light styles, dark styles, or both. There is even a dedicated style property styleType that xf-intensify and xf-diminish reference to determine how they alter a color (E.g. darken/lighten). I'm now looking at adding a dark style to my forum alongside a light one. This prospect has unearthed a limitation with the [COLOR] BB code with some poor contrast issues for the user-generated text on a per-style basis. Can anything be changed within XenForo itself so that [COLOR]'s rendered color can be adjusted to improve contrast across different styles, such as darkening/lightening based on the contentBg or styleType (light/dark) style properties?

Some preset text colors such as this, this, this or this are not at all or only barely readable with the default XenForo style. Perhaps someone who posted using one of those poorly contrasting colors was viewing with a dark style where their post looks just fine to them. On the flipside, content formatted with these three preset colors in the default style seems perfectly readable, but with a dark style it could be obscured or illegible.

To an extent, some of this issue can be worked around by overriding certain preset colors with more appropriate lighter/darker color in the extra.less template. For example, the below bit of CSS uses the LESS contrast function to override absolute white and black text to whichever color best contrasts against the content background (E.g. white text becomes black with the default style):
CSS:
.message-body .bbWrapper
{
    & span[style*="color: rgb(255, 255, 255)"],
    & span[style*="color: rgb(0, 0, 0)"]
    {
        color: contrast(@xf-contentBg,rgb(0, 0, 0),rgb(255, 255, 255)) !important;
    }
}
(This CSS assumes that either the dark style or light style is a child of the other, with the child's extra.less inherited from the parent)

This workaround seems fine, I think, if only addressing the 27 preset colors. However it starts looking rather unwieldy once you start trying to tackle the endless number of other possible combinations for when a poster manually customizes the COLOR BB code value to something different.

Searching brought up some related past threads, however neither of them fully address this issue:
 
Last edited:
Upvote 1
Top