new Framework7 572,986 () returns the one app instance (also Framework7.instance, and $f7 in components). Every component module hangs its API on it (app.dialog, app.sheet, app.toast...). It also carries name, params and theme (resolved to ios or md), the root el, width and height (updated on resize), online, views, store, device and utils; setDarkMode() and setColorTheme() restyle it at run time; and on(), once(), off() and emit() make it an event bus. Components and routers emit on the app, so app.on('pageInit'), 'popupOpen', 'resize', 'online' or 'darkModeChange' hear the whole app, and emit() works for your own events:
console.log(`${app.name}: theme ${app.theme}, ${app.width} px wide, online ${app.online}`);
app.on('darkModeChange', (dark) => console.log('darkModeChange', dark));
app.setDarkMode(true);
console.log('darkMode', app.darkMode, document.documentElement.classList.contains('dark'));
app.setDarkMode('auto'); // follow the system again
app.once('bookShared', (id, via) => console.log(`bookShared ${id} via ${via}`));
app.emit('bookShared', 3, 'email');
app.emit('bookShared', 4, 'email'); // once() has already unsubscribedBookNest: theme ios, 390 px wide, online true darkMode true true darkModeChange false bookShared 3 via email
setDarkMode(true) added the dark class but emitted nothing: darkModeChange fires only in auto mode, when the system setting is read (light, in this headless Chrome 1 ). Code that reacts to dark mode must also run after your own setDarkMode() calls. Views, routers and widgets have the same on/once/off/emit.