Use case or problem
The “Follow link” popover that appears when links are selected in Source Mode has a few visual issues:
- It doesn’t follow light / dark mode changes (it only matches dark mode).
- When the app is in dark mode, the popover’s background blends into the the main background.
- Its visual styling doesn’t match the link it’s connected to.
- The tail (the bit that points to the link) is very small, and filled with outline color.
Proposed solution
- Follow light / dark mode changes (change to dark text on light background in light mode).
- Add a border to better separate it from the background.
- Set the color of the text and border to the accent color to match the link.
- It would be nice if the tail were longer to more closely connect to the link, and if it were hollow and outlined like the popover, with no border between them. If these are possible, they would probably require reimplementing the tail, which sounds like a hassle.
Example (not addressing the tail):
Current workaround (optional)
A CSS snippet (doesn’t address the tail).
/* "Follow link" popover visibility / theming improvements:
- Follow light / dark mode.
- Add border for better visibility.
- Use accent color to match link.
Feature request: https://forum.obsidian.md/t/follow-link-popover-visibility-and-appearance-improvements/105600
Thanks to purple penguin (@mx_emoji) on Discord for finding `.popover-arrow`.
*/
.follow-link-popover {
background-color: var(--background-primary-alt);
border: 1px solid var(--color-accent);
color: var(--color-accent);
}
.follow-link-popover .popover-arrow {
border-top-color: var(--color-accent);
}
Related feature requests (optional)
An old mention of the light / dark mode issue: Default Colour Scheme should follow system default - #3 by CawlinTeffid.