mirror of
https://github.com/jackyzha0/quartz.git
synced 2026-03-22 14:05:43 -05:00
58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
---
|
|
title: Reader Mode
|
|
tags:
|
|
- 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|Configuration]] page.
|
|
|
|
## Configuration
|
|
|
|
Reader Mode is enabled by default. To disable it, set `enabled: false` in your `quartz.config.yaml`:
|
|
|
|
```yaml title="quartz.config.yaml"
|
|
plugins:
|
|
- source: github:quartz-community/reader-mode
|
|
enabled: false
|
|
```
|
|
|
|
Or remove the plugin entirely:
|
|
|
|
```bash
|
|
npx quartz plugin remove github:quartz-community/reader-mode
|
|
```
|
|
|
|
- Install: `npx quartz plugin add github:quartz-community/reader-mode`
|
|
- Source: [`quartz-community/reader-mode`](https://github.com/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:
|
|
|
|
```scss
|
|
.readermode {
|
|
// Customize the button
|
|
svg {
|
|
stroke: var(--custom-color);
|
|
}
|
|
}
|
|
```
|