HyperlinkButton on dark background



I have a HyperlinkButton on a dark background but unfortunately, when I move the mouse over it, the text becomes darker and therefore unreadable. As far as I can see this is a hardcoded behaviour defined in juce_HyperlinkButton.cpp.

What is the best way to avoid this problem? Subclass HyperlinkButton and override paintButton?

I suppose that ideally there would be a second colourId (like “mouseOverTextColourID”) for which one could choose any colour. If I would write the corresponding code (should not be much more of an effort than subclassing HyperlinkButton), is there a possibility that this code would eventually make it in the official library?

Best regards,


That does just sound like an oversight, and making that colour adjustable would probably be a good move. Will try to remember to do it when I get a moment…


Hello Jules,

thank you very much for that fast reply! I decided for my project to make my own “ExtendedHyperlinkButton” class which should be backwards-compatible to the regular HyperlinkButton. Just in case it may save you some work, here are the modifications to HyperlinkButton I’ve made:

Basically, I added two new colour ids, a custom setColour method and modified paintButton accordingly.

modified code in ExtendedHyperlinkButton.h:

    enum ColourIds
        textColourId             = 0x1001f00, /**< The colour to use for the URL text. */
        textMouseOverColourId    = 0x1001f01, /**< The colour to use for the URL text when mouse is over button. */
        textButtonDownColourId   = 0x1001f02, /**< The colour to use for the URL text when button is pressed. */

    void setColour (int colourId, const Colour& colour);

modified code in ExtendedHyperlinkButton.cpp:

void ExtendedHyperlinkButton::setColour (const int colourId, const Colour& colour)
	Component::setColour(colourId, colour);
	if (colourId==textColourId) {
		Component::setColour(textMouseOverColourId, colour.darker(0.4f));
		Component::setColour(textButtonDownColourId, colour.darker(1.3f));

void ExtendedHyperlinkButton::paintButton (Graphics& g,
                                   bool isMouseOverButton,
                                   bool isButtonDown)
    const Colour textColour (findColour (textColourId));
    const Colour buttonDownColour (findColour (textButtonDownColourId));
    const Colour mouseOverColour (findColour (textMouseOverColourId));

    if (isEnabled())
        g.setColour ((isMouseOverButton) ? ((isButtonDown) ? buttonDownColour : mouseOverColour)
                                         : textColour);
        g.setColour (textColour.withMultipliedAlpha (0.4f));

    g.setFont (getFontToUse());

    g.drawText (getButtonText(),
                2, 0, getWidth() - 2, getHeight(),
                justification.getOnlyHorizontalFlags() | Justification::verticallyCentred,

Yes, I know the code is not perfect (it requires the user to set a colour for textColourId first and only afterwards for textMouseOverColourId and textButtonDownColourId because otherwise they would get overwritten), so you should come up with a better solution than I did (if you want to keep backwards-compatibility)…