Ionic 3/Angular 6 Starter UI/UX Components  Multipurpose Template App

Ionic 3/Angular 6 Starter UI/UX Components Multipurpose Template App

Ionic 3 UI Dark Theme is our newest theme that has 80 iOS design HTML5 layouts, which can significantly alleviate the task of building your next Ionic app.


Creative Form

Creative Form

Member since 2016


iOS, Android  
3 years ago
3 years ago


  • 80+ functional screens
  • IOS12 design
  • Built with Sass
  • Firebase backend
  • 100+ components
  • Push notifications and much more

We know that you have waited impatiently for our new theme to come out, and it's finally here! Ionic 3 UI Dark Theme is our newest theme that has 80+ iOS design HTML5 layouts, which can significantly alleviate the task of building your next Ionic app, thus eliminating the need of spending numerous hours coding. Considering the fact that there are 5 color combinations of each screen, you basically get 400+ screens, and that's more than any other Ionic template on the market can offer you.

This multipurpose app template also includes 100+ components, which you can combine in an unlimited number of ways, and create an app for almost anything.

Main features of Ionic 3/Angular 6 UI Theme

Ionic 3/Angular 6 iOS12 Dark Theme is a feature-rich pack, offering everything you need to build both functional and beautiful Ionic app. Below is the full list of features included in this app template, so be sure to get familiar with them before you make a purchase.

Five color themes + five blend modes

We made five color combinations of every screen, to enable our customers to choose the color which best suits their project. There are 5 color options – Blue, Red, Green, Yellow, and Purple. All five themes are included in variables.scss file, so users of this template/theme will be able to change the color of the whole theme in just one line of code via Sass variables.

CSS blend modes are regularly used for blending a background image with a background color. Blend modes can boost the aesthetic side of your app, so we added five of them.

Built with Sass

We made a super-organized main Sass file with all the necessary variables. Via Sass variables you can apply changes to all 80+ layouts at once. Some of variables: Font, Font size, Colors, Opacity levels, Box shadow, and Blend modes.

Firebase backend

Owned by Google, Firebase is a mobile platform that enables you to quickly develop cutting-edge apps. With the latest version of our Ionic 3 mobile app template you can change all static elements (texts, icons, images) in no time without a need to code, all over Firebase.

Push notifications

Push notifications are one of the most convenient ways to connect with the users of your app. Push notifications can promote products, remind users to use the app, and even drive users to other marketing channels such as social networks. With our template, you can send push notifications to your users without difficulty, over Firebase.

Fully responsive

All of our Ionic templates (including this one) are crafted to suit a wide array of device sizes. All screens in Ionic 3/Angular 6 Dark Theme are made responsive over Split Pane component. In addition, we included ion-grid (which is heavily influenced by Bootstrap's grid system) in all components.

MailChimp integration

MailChimp is one of the best email marketing software applications, so it is no wonder that we picked it for our Dark Theme. Our UI theme provides MailChimp integration that will help you in collecting leads for your e-mail campaigns and track results. All you need to do is to change the ID of your MailChimp list and your job is finished.

Google Analytics and Google Maps integration

Google Analytics is extremely useful because it offers detailed information about every single thing users do while using the app. Each screen of Ionic 3/Angular 6 Dark UI Theme is set up with Google Analytics, so no click will be lost. Considering Google Maps integration, our theme contains 3 layouts with Google Maps API component (Location details, About us and Full screen view). We enabled Satellite and Map functions, as well as Street View browsing.

Form validation

When building an app, it is pivotal to make sure that users insert the data in the correct format, in order to process it successfully. Form validation component integrated in our template helps in achieving these goals, so there will be no more incomplete submits or empty fields.

QR and Barcode scanner

After you purchase our Dark Theme, you will have at your disposal a fully functional scanner with support for various types of code.

Excellent customer support and free updates

We have a dedicated development team, so every issue you encounter regarding this template's implementation will be resolved within a reasonable timeframe. Besides excellent customer support, Ionic 3/Angular 6 iOS12 Dark UI Theme comes with free updates. We are perpetually trying to follow the official Ionic updates, so every future update of this template will be at your disposal once you purchase the license.

List of mobile components available in Ionic 3/Angular 6 Dark Theme iOS12 style

With the help of our UI Theme/Template, you can circumvent the exhausting process of building your app from scratch, as we incorporated a plethora of components which are listed below.

  • List views (6 types)
  • Tabs (3 layouts)
  • Parallax Effect (4 layouts)
  • Left menu (1 layout)
  • Login & Register (4 layouts)
  • Image Gallery (4 layouts)
  • Wizards (3 combos, 9 layouts)
  • Splash screen (3 layouts)
  • Check boxes (3 layouts)
  • Radio buttons (3 layouts)
  • 4 Types of Range (1 layout)
  • Toggle (3 layouts)
  • Action Sheet (3 layouts)
  • Select (2 layouts)
  • Google Maps (3 layouts)
  • Spinners/loaders (10 types)
  • QR code and barcode scanner (1 layout)
  • Search bars (3 layouts)

Our template comes with a detailed documentation, where you can find all the necessary information regarding the implementation of the above-mentioned components.

Incorporated technologies and open source projects

In order to make all of Ionic 3/Angular 6 components in iOS12 design we needed help from several technologies and open source projects. Our documentation includes all the necessary explanations about the usage of these projects. Below is the list of technologies we deployed to achieve the end result. If you are an Ionic developer, you are already familiar with these technologies, so this is just a quick overview of their main characteristics.

Ionic 3

Ionic is an open source mobile framework that powers more than 4 million apps. With one codebase, you can develop apps for iOS, Android, Windows Phone, Web, Desktop and PWA (Progressive Web Apps). The original version was released back in 2013, and built on top of Angular JS and Apache Cordova. Our template is based on the latest Ionic version – Ionic 3.

Angular 6

Angular is a JavaScript-based open-source front-end web application platform mainly maintained by Google and a community of individuals and corporations. It is superior to many JavaScript frameworks, since its library offers features that make it easy to implement complex requirements of modern apps (like data binding, animations and routing). Our Dark Theme uses its latest version – Angular 6.

Sass – Syntactically Awesome Style Sheets

Sass, also known as CSS with superpowers, is a CSS preprocessor which adds special features which are not available in CSS, like variables, mixins, nested rules, inheritance etc. First appearing in 2006, Sass was designed by Hampton Catlin and developed by Natalie Weizenbaum, Sass is extremely useful as it adds advanced functionalities and time-saving features to your CSS workflow.


jQuery is a cross-platform JavaScript library rolled out in 2006. It simplifies HTML document traversing, animating, event handling, and Ajax interactions for rapid web development.


NgCordova is a set of wrappers built to help make app development faster and more efficient than ever before. It provides a simple AngularJS wrappers for the most popular Cordova and PhoneGap plugins available.

Elastic header with zoom

Made by Ola Christensson, Elastic header with zoom represents Ionic/Angular directive for elastic headers.


Animate.css is a CSS library that has been around for a while, and is used to create really nice animation effects using just CSS. It eliminates the need for creating custom animations, we can just import the library and use it.