Customize reading theme
Behavior from source: Open reading preferences from the document three-dot menu, adjust font, color scheme and size in an anchored popover, and close it by clicking outside.
Original source · exact version bafy2bzacediquxsfrismq2jfvqpwzxpopla67dafckictywhk7tjb5s4wo6uq
Reviewed migration decision · Journey map · local task ID ut-d88935df106869bf.
Confidence: high; review status: needs-review. Similar source records are not merged. Source status icon is not a committed release or current product state.
Source acceptance and behavior
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)
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
Full original readable source and block backlinks
Heading 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. source block
Heading Acceptance criteria source block
Paragraph 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. source block
Paragraph 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. source block
Paragraph 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. source block
Paragraph 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) source block
Heading Basic flow source block
Paragraph User click in a document source block
Paragraph User clicks the 3 dots contextual option source block
Paragraph User clicks: reading preferences. source block
Paragraph A floating toolbar/popover anchored near the 3-dot button will appear on top of the page source block
Paragraph User click outside of the popover to close it source block
Heading Why a floating toolbar instead of the right panel? source block
Paragraph 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. source block
Paragraph Ideally we will make this consistent when possible with other actions. Versions is one thing makes sense having on a right panel. source block
Do you like what you are reading? Subscribe to receive updates.
Unsubscribe anytime