Paste either snippet into your page — a Custom HTML block on WordPress, Shopify, or Squarespace works too. Both snippets update live as you customize, so what you copy is exactly what you configured.
<!-- Free Reading Mode Toggle widget by haynes lab — https://hayneslab.dev/tools/widgets/reading-mode-toggle -->
<script data-hl-serif="true">
/*!
* haynes lab — Reading Mode Toggle widget (free)
* Docs & embed code: https://hayneslab.dev/tools/widgets/reading-mode-toggle
*/
(function () {
'use strict';
var PREFIX = 'hlw-reading-mode-toggle';
var STYLE_ID = 'hlw-reading-mode-toggle-styles';
var ON_CLASS = PREFIX + '-on';
var SERIF_CLASS = PREFIX + '-serif';
var STORAGE_KEY = 'hlw-reading-mode-toggle';
function findScript() {
return document.currentScript ||
document.querySelector('script[src*="widgets/reading-mode-toggle.js"]');
}
function injectStyles() {
if (document.getElementById(STYLE_ID)) return;
var css =
'.' + PREFIX + ', .' + PREFIX + ' * { box-sizing: border-box; }' +
'.' + PREFIX + ' { position: fixed; right: 20px; bottom: 20px; z-index: 9999;' +
' display: flex; flex-direction: column; align-items: center; gap: 6px;' +
' font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }' +
'.' + PREFIX + '--staged { position: absolute; right: 12px; bottom: 12px; z-index: 10; }' +
'.' + PREFIX + '__btn { width: 44px; height: 44px; border-radius: 50%; padding: 0;' +
' border: 1px solid #e5e7eb; background: #ffffff; color: #374151; cursor: pointer;' +
' display: flex; align-items: center; justify-content: center;' +
' box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); transition: color 0.15s ease, border-color 0.15s ease; }' +
'.' + PREFIX + '__btn:hover { color: var(--hlw-accent); border-color: var(--hlw-accent); }' +
'.' + PREFIX + '__btn:focus-visible { outline: 2px solid var(--hlw-accent); outline-offset: 2px; }' +
'.' + PREFIX + '__btn[aria-pressed="true"] { background: var(--hlw-accent);' +
' border-color: var(--hlw-accent); color: #ffffff; }' +
'.' + PREFIX + '__credit { font-size: 11px; display: inline-flex; align-items: center; gap: 4px;' +
' color: #9ca3af; text-decoration: none; background: rgba(255, 255, 255, 0.85);' +
' padding: 2px 6px; border-radius: 6px; }' +
'.' + PREFIX + '__credit svg { display: block; }' +
'.' + PREFIX + '__credit:hover { color: #6b7280; text-decoration: underline; }' +
/* Reading mode styles applied to the target content */
'.' + ON_CLASS + ' { max-width: 42rem !important; margin-left: auto !important;' +
' margin-right: auto !important; line-height: 1.8 !important; font-size: 1.125rem !important; }' +
'.' + ON_CLASS + ' p, .' + ON_CLASS + ' li, .' + ON_CLASS + ' blockquote {' +
' line-height: 1.8 !important; }' +
'.' + SERIF_CLASS + ', .' + SERIF_CLASS + ' p, .' + SERIF_CLASS + ' li,' +
' .' + SERIF_CLASS + ' blockquote {' +
' font-family: Georgia, "Times New Roman", Times, serif !important; }' +
'@media (max-width: 560px) { .' + PREFIX + ' { right: 14px; bottom: 14px; } }';
var style = document.createElement('style');
style.id = STYLE_ID;
style.textContent = css;
document.head.appendChild(style);
}
function el(tag, className, text) {
var node = document.createElement(tag);
if (className) node.className = className;
if (text != null) node.textContent = text;
return node;
}
function logoSvg() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 32 32');
svg.setAttribute('width', '13');
svg.setAttribute('height', '13');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
function circle(cx, cy, r, attrs) {
var c = document.createElementNS(svgNS, 'circle');
c.setAttribute('cx', cx);
c.setAttribute('cy', cy);
c.setAttribute('r', r);
for (var key in attrs) c.setAttribute(key, attrs[key]);
svg.appendChild(c);
}
circle(16, 16, 16, { fill: '#0f0a0a' });
circle(16, 16, 12, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.3 });
circle(16, 16, 9, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1, opacity: 0.5 });
circle(16, 16, 6, { fill: 'none', stroke: '#fff5f5', 'stroke-width': 1.2, opacity: 0.9 });
circle(16, 16, 3, { fill: '#06b6d4' });
circle(24.5, 7.5, 2, { fill: '#f97316' });
circle(7, 16, 1.8, { fill: '#f97316' });
circle(20, 20, 1.5, { fill: '#f97316' });
return svg;
}
function bookIcon() {
var svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg');
svg.setAttribute('viewBox', '0 0 24 24');
svg.setAttribute('width', '20');
svg.setAttribute('height', '20');
svg.setAttribute('aria-hidden', 'true');
svg.setAttribute('focusable', 'false');
svg.setAttribute('fill', 'none');
svg.setAttribute('stroke', 'currentColor');
svg.setAttribute('stroke-width', '2');
svg.setAttribute('stroke-linecap', 'round');
svg.setAttribute('stroke-linejoin', 'round');
var p1 = document.createElementNS(svgNS, 'path');
p1.setAttribute('d', 'M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z');
var p2 = document.createElementNS(svgNS, 'path');
p2.setAttribute('d', 'M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z');
svg.appendChild(p1);
svg.appendChild(p2);
return svg;
}
function readStored() {
try {
return window.localStorage.getItem(STORAGE_KEY) === 'on';
} catch (e) {
return false;
}
}
function writeStored(on) {
try {
window.localStorage.setItem(STORAGE_KEY, on ? 'on' : 'off');
} catch (e) { /* private mode etc. — state just won't persist */ }
}
function build(script) {
var selector = script.getAttribute('data-hl-target') || 'article, main';
var serif = script.getAttribute('data-hl-serif') !== null &&
script.getAttribute('data-hl-serif') !== 'false';
var accent = script.getAttribute('data-hl-accent') || '#f97316';
var stage = script.closest ? script.closest('.widget-demo__stage') : null;
var target = null;
try {
if (stage) target = stage.querySelector(selector);
if (!target) target = document.querySelector(selector);
} catch (e) {
console.warn('[haynes lab reading-mode-toggle] data-hl-target is not a valid selector: ' + selector);
}
if (!target) {
console.warn('[haynes lab reading-mode-toggle] No element matches "' + selector + '". Falling back to <body>.');
target = document.body;
}
injectStyles();
var root = el('div', PREFIX + (stage ? ' ' + PREFIX + '--staged' : ''));
root.style.setProperty('--hlw-accent', accent);
var btn = el('button', PREFIX + '__btn');
btn.type = 'button';
btn.setAttribute('aria-pressed', 'false');
btn.setAttribute('aria-label', 'Toggle reading mode');
btn.title = 'Reading mode';
btn.appendChild(bookIcon());
root.appendChild(btn);
function apply(on) {
target.classList.toggle(ON_CLASS, on);
if (serif) target.classList.toggle(SERIF_CLASS, on);
btn.setAttribute('aria-pressed', on ? 'true' : 'false');
writeStored(on);
}
btn.addEventListener('click', function () {
apply(btn.getAttribute('aria-pressed') !== 'true');
});
if (readStored()) apply(true);
var credit = el('a', PREFIX + '__credit');
credit.appendChild(logoSvg());
credit.appendChild(document.createTextNode('Powered by haynes lab'));
credit.href = 'https://hayneslab.dev/tools/widgets/reading-mode-toggle';
credit.target = '_blank';
credit.rel = 'noopener';
root.appendChild(credit);
if (stage) {
stage.appendChild(root);
} else {
document.body.appendChild(root);
}
}
function init() {
var script = findScript();
if (!script) {
console.warn('[haynes lab reading-mode-toggle] Could not locate its own script tag. Nothing rendered.');
return;
}
build(script);
}
if (document.body) {
init();
} else {
document.addEventListener('DOMContentLoaded', init);
}
})();
</script>