# 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 desktops, Framework7's Aurora Design is used by default.

You don't need to do any special configuration for setting up the design system separately for Android, iOS or Desktop, 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 or Aurora) on all the platforms, then you can configure it in `/assets/custom/js/config.js`

Inside `window.config.theming = {` set `theme` to any of these values `aurora, ios, md, auto`

By default, Nectar is configured for platform specific design system `auto`.

{% hint style="info" %}
To provide the users best experience, it is highly recommended to use Material Design for Android and Cupertino Design for iOS respectively. For Desktops, it is recommended to use Aurora or Material Design.
{% endhint %}

## Theme Colors

Nectar comes with 19 pre-defined theme colors. All the colors are defined in `/assets/vendor/nectar/colors.css`

You can use these colors as `class` attributes for almost any components.

Besides this, Nectar also provides you the flexibility to set the primary color of your app matching your brand color. You can use almost any of the 16M colors.

Suppose, the primary color of your brand is `#1877F2`, then, inside `window.config.theming = {` set `color: #1877F2`

For inspiration, you can check <https://brandcolors.net/> and see what colors popular brands use.

## Light & Dark Modes

Nectar supports both Light and Dark modes.

The default mode is `system`, ie, the app adapts to light or dark mode according to the device settings. This is the recommended default value.

To set default theme mode, Inside `window.config.theming = {` set `mode` to any of these values —`light, dark, system`

## Appearance Switcher

We have implemented an appearance switcher, and it is located at `/partials/select-appearance.html`

If `window.config.theming.enabled` is set to `true`, then this enables the Appearance Switcher for users.