quartz/docs/features/reader mode.md

title	tags
Reader Mode	component

Reader Mode is a feature that allows users to focus on the content by hiding the sidebars and other UI elements. When enabled, it provides a clean, distraction-free reading experience.

Note

For information on how to add, remove or configure plugins, see the configuration#Plugins page.

Configuration

Reader Mode is enabled by default. To disable it, set enabled: false in your quartz.config.yaml:

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

Or remove the plugin entirely:

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

The Reader Mode toggle appears as a button with a book icon. When clicked:

• Sidebars are hidden
• Hovering over the content area reveals the sidebars temporarily

Unlike Dark Mode, Reader Mode state is not persisted between page reloads but is maintained during SPA navigation within the site.

Customization

You can customize the appearance of Reader Mode through CSS variables and styles. The component uses the following classes:

• .readermode: The toggle button
• .readerIcon: The book icon
• [reader-mode="on"]: Applied to the root element when Reader Mode is active

Example customization in your custom CSS:

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