Apple Vision Pro (visionOS) button highlight fix

For anyone trying out the Obsidian iPad app with Apple Vision Pro, you’ll notice that there are many UI elements that don’t highlight as you look at them, which hurts usability. Thankfully, there’s a simple fix.

Simply add a CSS snippet to the .obsidian/snippets folder in your vault, called something like visionOS.css, and include this content:

body {
    --cursor: pointer;
}

Then, enable the snippet in Obsidian’s appearance settings on your Apple Vision Pro.

This overrides Obsidian’s cursor CSS variable, which I believe Obsidian only uses for clickable content. visionOS decides that any page element that sets the cursor to “pointer” is probably clickable, so it gets highlighted when you look at it.

Hope this helps someone else. It would be cool if the Obsidian devs consider adjusting this variable in the iPad version’s default CSS, because the iPad’s “pointer” cursor is identical to the standard cursor when using an external mouse/touchpad, so it would only benefit Apple Vision Pro users.

7 Likes

I had numerous issues with my VisionPro overwriting certain configuration files upon sync, so I re-configured it to use a local configuration directory. Now I can’t access the .obsidian/snippets folder via Vision Pro, since Files doesn’t like to reveal hidden directories. Do you have a workaround I might try, or do I need to simply reset my sync settings?

You could use GitHub - Zachatoo/obsidian-css-editor: Edit CSS snippets in Obsidian. for creating and editing CSS snippets from within Obsidian.


On iOSes, another app is needed to get to hidden folders and files.

You need to configure both apps to view Obsidian’s iCloud Drive folder or the On My iDevice Obsidian folder, but you can get to .obsidian/ using Taio or Textastic (the two I know of and have used before).