Apply Reader Settings Live

Task

Connect the Reader Settings panel to EPUB.js so changes are visible immediately.

Keep the current preference state in the Reader and expose a callback from the prepared ReaderSettingsPanel.

For EPUB.js, update rendition contents when the preference changes:

rendition.themes.fontSize(`${fontSize}%`);
rendition.themes.fontFamily(fontFamily);
rendition.themes.default({
  body: {
    "line-height": String(lineHeight),
  },
});

Map the application theme and content-width choices to the existing Reader presentation.

Do not recreate the settings panel. Connect the prepared controls to the Reader state.

Test

While reading:

• change font size
• change font family
• change line height
• change theme
• change content width

The Reader should update without a full page reload.

Checkpoint

Reader settings have immediate visual effects inside the active EPUB rendition.