Links preview: add CSS variables to customize its look and feel

[humitos]

We've received a support request from a user wanting to change the background color of the links preview because their text is white, so it's not possible to read it when displayed on the popup.

This work is related to:

• More variable fixes #487
• Add styles based on the documentation tool #473
• Add guidelines on attributes and CSS variables #483

This issue could be a good opportunity to try the pattern we are building here.

Front conversations

[s-makin]

This would be a very welcome feature. I've recently come to learn about the link preview function, and while this is a great replacement for the hoverxref extension, the default styling provided could be better (especially from an accessibility pov re: the contrast and font size) and we are lacking an easy customisation path. If there is already a preferred way for us to customise the feature, it would be really helpful if that could be added to the documentation.

The things we are looking to customise are:

• Font sizes (we want it to be the same scale as body text, not scaled down)
• Font colours (we need higher contrast between text and bg)
• Being able to specify dark mode settings (e.g. bg colour, user choice of dark mode is not respected in the default)

[AstroDule]

Is there any news about this idea?

[humitos]

@AstroDule We are working on standardizing the pattern at #545. Once that's done, we will work on this issue.