[NodeBB] Focus Mode : simply immersive reading for NodeBB

[DownPW]

Hey everyone,

I’m not sure where to post this, I’ll let @phenomlab edit it if necessary.

Already posted here : https://community.nodebb.org/topic/19318/focus-mode-simply-immersive-reading-for-nodebb

I’ve been working on a small client-side script that adds an simply immersive reading mode to NodeBB. No plugin required, just a few lines of custom JS and CSS dropped into the ACP.

I’m just sharing this here for fun : https://github.com/DroidBV8/nodebb-focus-mode

What it does

Pressing F (or clicking the icon in the right sidebar) hides everything that isn’t the content you’re trying to read:

• Both sidebars
• Header / brand bar
• Footer
• Topic thumbnails and sidebar tools (reply, follow, timeline)

The content area reflows to a centered 860px column, font size bumps up slightly, and a reading progress bar appears at the top of the page.

To exit: press F again, Escape, or click the floating button that appears in the bottom-right corner.

---

Details

Activation effect : a subtle CRT glitch effect plays on toggle. Three CSS variables let you dial the intensity up or down without touching the keyframes:

--fm-glitch-opacity: 1;   /* 0.5 = subtle | 2 = heavy */
--fm-glitch-skew:    1deg;
--fm-glitch-shift:   4px;

Keyboard : F to toggle. Ctrl+F, Cmd+F and Alt+F are ignored so you don’t accidentally trigger it when searching the page.

Scroll preservation : when toggling, the layout shifts because sidebars appear/disappear. The script measures the position of the nearest visible post before and after the layout change, then compensates with scrollBy so you stay exactly where you were.

Topic-only : the button is greyed out on non-topic pages with a tooltip explaining why. Pressing F outside a topic shows a small toast instead of doing nothing silently.

Mobile: disabled entirely under 768px. No button injected, no state restored.

Theming : all colors reference Bootstrap CSS variables (--bs-body-bg, --bs-border-color, --bs-primary, etc.) so it adapts automatically to any NodeBB theme, light or dark.

State : saved in localStorage, restored on next visit. Uses try/catch so it degrades gracefully in private browsing.

---

Implementation notes

The script is a self-contained IIFE, hooking into the standard NodeBB client-side events:

$(window).on('action:ajaxify.end',   function () { focusMode(); });
$(window).on('action:topic.loaded',  function () { focusMode(); });
// etc.

The glitch effect is pure CSS @keyframes , the JS only adds/removes classes. Layout compensation is synchronous (getBoundingClientRect → scrollBy) with no setTimeout on the scroll itself, which avoids triggering NodeBB’s scroll-based URL updater in a loop.

---

Compatibility

Tested on NodeBB 3.x with Bootstrap 5 themes. Should work on any setup using the standard sidebar components (nav.sidebar-left, nav.sidebar-right).