Initial import

2026-07-11 17:08:37 +00:00
commit 03e5f3452b
303 changed files with 43365 additions and 0 deletions
@@ -0,0 +1,57 @@
+---
+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);
+  }
+}
+```