Material Theme

The Material Theme and Material You

Material You 15,533 , the dynamic color of Material Design 3 introduced with Android 12, derives a whole scheme from one seed color: tonal palettes for each color role and near-neutral surfaces tinted with the seed's hue. Framework7 8.0.0 572,986 (3 April 2023) rebuilt its Material theme on it, and 9.0.0 moved to the latest specification; 9.1.3 bundles Google's material-color-utilities (Apache-2.0) with its '2025' spec.

Under Material, your brand color is therefore a seed, not a paint. BookNest's #b3541e becomes --f7-md-primary: #8a5033, a darker tone that keeps the near-white --f7-md-on-primary text readable. Dark mode recomputes the scheme instead of inverting it: primary becomes #f7b89b on a #130d0a surface. The iOS theme uses #b3541e exactly.

BookNest in the Material theme, light (a) and dark (b), both computed from the seed #b3541e
BookNest in the Material theme, light (a) and dark (b), both computed from the seed #b3541e

darkMode: true or false fixes the mode; 'auto' follows prefers-color-scheme, updates app.darkMode and emits darkModeChange. In a Playwright 26,280 test, BookNest started dark under Chrome 1 's emulated dark preference, and switching the emulation to light fired darkModeChange with false. For a settings screen, call app.setDarkMode(true | false | 'auto'), or put the dark class on one card or popup.