Hosted onhoraciohdev.dev.hyper.mediavia theHypermedia Protocol

Document cover
Customize reading theme

As a reader, I want to customise the reading themeso that I can read content comfortably in any environment and according to my personal preferences.


Acceptance criteria

    Font toggle — serif / sans-serif
    Given I am on a reading page, when I switch the font setting, the body text updates immediately to the selected typeface without a page reload.

    Colour scheme — light / dark
    Given I toggle the colour scheme, the background, text, and UI elements switch to the correct palette. Both themes meet WCAG AA contrast ratios.

    Text size — S / M / L
    Given I select a size, the reading area adjusts to the corresponding scale (S = 14px, M = 16px, L = 20px). Line-height scales proportionally to maintain readability.

    Settings persist across sessions
    Given I set my preferences and return later, the same theme, font, and size are applied on load, stored per user account (I hope this is possible)

Basic flow

    User click in a document

    User clicks the 3 dots contextual option

    User clicks: reading preferences.

    A floating toolbar/popover anchored near the 3-dot button will appear on top of the page

    User click outside of the popover to close it


Why a floating toolbar instead of the right panel?

It's lighter, keeps the reader's eye near the controls, doesn't shift the layout, and feels more native to reading apps. A sliding panel is heavy UX for just 3 settings.

Ideally we will make this consistent when possible with other actions. Versions is one thing makes sense having on a right panel.


Do you like what you are reading? Subscribe to receive updates.

Unsubscribe anytime