Theming

Design System
Nectar provides native look and feel for both Android and iOS platform. It uses Google's Material Design for Android and Apple's Cupertino Design for iOS respectively. For devices other than iOS and Android, the material design is used by default.
Google's Material Design
Apple's Cupertino Design
You don't need to do any special configuration for setting up the design system separately for Android and iOS, as it adapts to the platform automatically from the single code-base.
However, if you want to use only one design system (either Material or Cupertino) on all the platforms, then you can configure it inside /assets/custom/js/init.js
Inside var app = new Framework7({ set theme: 'md' for Material, theme: 'ios' for Cupertino or theme: 'auto' for platform specific design system.
By default, Nectar is configured for platform specific design system.
Adding theme=md or theme=ios query parameter on the app url will change the design system on-the-fly.
Example
https://localhost/nectar/www/?theme=md
https://localhost/nectar/www/?theme=ios
To provide the users best experience, it is highly recommended to use Material Design for Android and Cupertino Design for iOS respectively.
Theme Colors
Nectar comes with 8 theme colors — Red, Green, Blue, Pink, Yellow, Orange, Gray and Black.
To set default theme color, open /assets/custom/js/config.js file.
Inside window.config.theme = { set color to any of these values —red, green, blue, pink, yellow, orange, gray, black
Setting this value will add color-theme-[color] class to the <body> element.
Theme Layouts
Nectar comes with 2 theme layouts — Light and Dark.
To set default theme color, open /assets/custom/js/config.js file.
Inside window.config.theme = { set layout to any of these values —light, dark
Setting this value will add theme-[layout] class to the <body> element.

The Basics - Previous

App Initialization

Next - The Basics

Internationalization

Last modified 3yr ago

Copy link

On this page

Design System

Theme Colors

Theme Layouts