TLDR: the View Switcher button toggles the reading/editing view state. It is not navigation as previous solutions to this ongoing issue have concluded.
The view switcher ( ), in the upper-right corner of the editor within a note’s inline status bar, is incorrectly displayed. The
lucide-book-icon.svg should display when in Reading Mode, and the lucide-pencil-line-icon.svg should display when in Editing Mode.
I know this has been cited previously, but the resolution logic is incorrect and it persists as an interface error.
UI/UX Logic
- The view switcher is a button that toggles a view state.
- The view switcher button lives in the inline title bar. This bar contains two left-justified buttons for note navigation with arrows for “previous note” with
lucide-arrow-left-icon.svgand “next note” withlucide-arrow-right-icon.svg, then the center-justified current note’s title, then the view switcher button withlucide-pencil-line-icon.svgright-justified along with the note’s menu button to it’s right.- The arrow UI elements trigger an action to navigate to another file, and do not represent state—they are navigation elements.
- The inline title UI element represents the current note’s file name state along with it’s path, which when clicked, triggers the UI to reveal it’s location in the File Explorer.
- The view switcher toggles between two note views, meaning it navigates the user’s view to the next view state
- and the menu button UI interaction reveals more commands, which trigger their respective events.
- The entire bar consists of a blend of navigation, state change, and command execution.
Why the view switcher button should be reversed
- Navigation UI is inherently understood by the user by convention — arrows mean navigation
- Menu UI (displayed here as an ellipsis) is also inherently understood by convention—this is a commonly used UI icon for revealing “more options”.
- The inline title is used for state — it’s shows the currently displayed note’s file name.
- Lastly, the view switcher UI icon also represents a state—the state of the viewing mode, either Reading view or Editing view, as presented in Views and editing mode - Obsidian Help.
Recommendation
The view switcher UI element toggles state, and is not navigation, and is currently displaying its reciprocal icon. It should be reversed, as it is a native UI element rather than corrected by additional CSS repair.
The documentation article reinforces the button’s intention:
[!Website Text]
To switch to Source mode:Click the interactive status icon ( lucide-book-icon.svg > icon or lucide-edit-3.svg > icon ) in the status bar and select Source mode.Note
By default, editing view is set to Live Preview. Change this to Source mode under Settings → Editor → Default editing mode.
To switch to Source mode, now additionally you can:
Click the view switcher ( lucide-edit-3.svg > icon ) in the upper right corner of your note.
Or press Ctrl+E (Cmd+E on macOS).
Or use the command Toggle Reading view.
Here are former references to this issue, but each time the solution is incorrectly saying that this button is navigation. But this is only navigation if you believe all buttons are navigation, and they’re not. This button is a switch, and it’s currently displaying the reverse of it’s state.
- Flip Editor and Reader Mode Icons [Flipped]
- I totally get “Source mode”, “View Mode”, “Live preview”. I totally DON’T get the corresponding UI elements, and how they work together
- Swap icons in editor v reading view?
- Inconsistent visual icons for source, live, edit, reading mode
- Only preview and source mode
Thanks!
(AI was not used to write this post. All em-dashes are my own.)
Edited to include TLDR