Invisible links while reading (Includes Snippet)

EDIT: I’ve been informed this is achievable by using the Snippet Commands Obsidian Plugin and then binding a key to toggle it. With the Customizable Sidebar Plugin is even possible to add an icon to toggle it to the sidebar!

I love properly linking my texts, but sometimes all this color makes reading a little distracting. So I made a css snippet that toogles the link appearance to look like normal text until I hover the window with the mouse:

.markdown-preview-section a.internal-link {
    color: var(--text-normal);
    transition: 0.2s ease;
}
.markdown-preview-section:hover a.internal-link {
    color: var(--text-accent);
    transition: 0.2s ease;
}

And this other version works by hovering individual paragraphs instead of the page:

.markdown-preview-section div a.internal-link {
	color: var(--text-normal);
	transition: 0.4s ease;
}
.markdown-preview-section div:hover a.internal-link {
	color: var(--text-accent);
	transition: 0.2s ease;
}

This is useful when I want to focus on reading and not so much on exploring the linked content.

I have no shortcut for this, and I thought it would be such a nice simple feature to have: a toggleable button one can press to help focusing on content, a real “read mode”.


This is what a normal page usually looks like (or with the mouse hovering it).

And this is what it looks like when I’m focusing on reading.

3 Likes