App theme styles - EXPRESSO Docs

Napps mobile applications register theme styles as reserved n-* classes in the JS UI style registry. Apply them with the class prop on any UI node. This lets your component follow the merchant’s app theme without hard-coding its colors, typography, borders, or safe-area spacing.

<box class="n-card" style={{ spacing: 8 }}>
  <text class="n-text n-heading">Featured product</text>
  <button class="n-btn n-btn-primary" text="Shop now" />
</box>

class accepts a space-separated string or an array of class names. Classes apply in order, and the inline style overrides values from those classes. Styles apply to the node itself; they do not inherit or cascade to child nodes. Unknown class names have no effect until registered. The host refreshes these styles when the app theme changes. The n-* names are reserved: you can apply them, but StyleRegistry.registerStyle, removeStyle, and clearAll cannot change or remove them. Register your own classes with a different prefix.

Theme class reference

Use	Class names
Buttons	`n-btn`, `n-btn-primary`, `n-btn-primary-bg`, `n-btn-primary-border`, `n-btn-primary-radius`, `n-btn-primary-content`, `n-btn-primary-label`, `n-btn-secondary`, `n-btn-secondary-bg`, `n-btn-secondary-border`, `n-btn-secondary-radius`, `n-btn-secondary-content`, `n-btn-secondary-label`, `n-btn-quick-add`, `n-btn-quick-add-icon`, `n-btn-wishlist`, `n-btn-wishlist-icon`
Product cards	`n-card`, `n-card-bg`, `n-card-border`, `n-card-radius`, `n-card-padding`, `n-card-padding-x`, `n-card-padding-y`, `n-card-image`, `n-card-content`
Text and prices	`n-text`, `n-text-secondary`, `n-text-product`, `n-price`, `n-price-sale`, `n-price-compare`
Typography	`n-title`, `n-heading`, `n-subheading`, `n-body-lg`, `n-body-lg-em`, `n-body`, `n-body-em`, `n-body-sm`, `n-body-sm-em`
Backgrounds and borders	`n-bg`, `n-bg-gradient`, `n-border`, `n-divider`, `n-tag`
Status	`n-error`, `n-success`, `n-warning`, `n-rating`
Paging and loading	`n-pager-dot`, `n-pager-dot-active`, `n-pager-dot-media`, `n-pager-dot-media-active`, `n-skeleton`
Safe areas	`n-safe-x`, `n-safe-top`, `n-safe-bottom`, `n-safe`, `n-safe-grid-1`, `n-safe-grid-2`, `n-safe-grid-3`, `n-safe-grid-4`

Bundled classes combine the related single-purpose styles. For example, n-btn-primary combines its background, border, and radius classes; n-card combines the card background, border, radius, and padding. You can use a bundled class or compose the individual classes when you need only part of the theme style. The safe-area classes use the app’s current inset values. n-safe-x applies the theme’s horizontal safe spacing, n-safe-top and n-safe-bottom apply the current top and bottom clearances, and n-safe combines all three. On mobile, the bottom clearance accounts for the app’s bottom bar as well as the device inset. The grid variants apply the configured horizontal safe spacing for one through four product columns.

Read theme values with `AppTheme`

Use the global AppTheme API for theme values that do not map to style classes, such as carousel and grid layout settings and the product card title line limit.

const theme = AppTheme.get();
const subscriptionId = AppTheme.subscribe((nextTheme) => {
  console.log(nextTheme.productCard.titleMaxLines);
});

AppTheme.unsubscribe(subscriptionId);

subscribe calls your callback immediately with the current values, then again when those values change. Pass its returned ID to unsubscribe when you no longer need updates. For the complete snapshot shape, see the AppTheme type reference.

​Theme class reference

​Read theme values with AppTheme

Theme class reference

Read theme values with `AppTheme`