Reader Mode

reader_mode:

• hides sidebars/UI for distraction-free reading

Note

Plugin installation, removal, configuration: Configuration.

Configuration

defaults: enabled: - true

disable:

• set enabled: false in quartz.config.yaml:

quartz.config.yaml

plugins:
  - source: github:quartz-community/reader-mode
    enabled: false

remove:

• run:

npx quartz plugin remove github:quartz-community/reader-mode

install:

• npx quartz plugin add github:quartz-community/reader-mode

source:

• quartz-community/reader-mode

Usage

toggle:

• book icon: hides/shows sidebars

hover:

• content-area hover: temporarily reveals sidebars

persistence:

• SPA navigation: retained
• page reload: reset

Customization

selectors: .readermode: - toggle button .readerIcon: - book icon [reader-mode="on"]: - active-state root attribute

.readermode {
  // Customize the button
  svg {
    stroke: var(--custom-color);
  }
}