Themes for Ionic 2

Ionic Framework ionic-v3
1

Hi,

we are building an app with Ionic 2. We want to give it a ‘professional’ look.
The official docs does not cover in details how to build a theme for the app.

  • We did not found any theme for Ionic 2 on the market, are there on the web some Ionic 2 theme?
  • Is there a sort of tutorial which can help us with creating the UI theme for Ionic 2?
  • Exists a guide to migrate a Ionic 1 theme to Ionic 2?

Thanks in advance.
m.

2

I’m also looking for a sample theme or a guide on how to start. For my particular use case, I want to override some of the styles in found in ionic/components/label/label.scss but I don’t want to make the changes on the original file as they will get overwritten with the next update.

Any ideas?

3

The section on ~theming~ is a great place to start

Don’t be afraid to dig around the docs haha

This changed a bit from V1 to V2, theming and styling is a little more unified which is actually super nice

4

@nnnnnorthhhhh thanks for the tip and although the section on ~theming~ is a great place to start, it does not have a sample theme (even a basic one) that we can use to get started. In an attempt to create my own theme, I created a new file called mytheme.scss under the theme folder and overrode a few styles from the ionic/components/label/label.scss file. Then, I added the following import into the app.core.scss file

@import "../theme/mytheme.scss";

Is this how ~theming~ is supposed to be implemented?

5

I wrote a bit of a guide on how to theme Ionic 2 applications:

There’s not really one particular way that you have to theme your application, but in general I would:

  • Override default SASS variables where possible (in app.variables.scss)
  • Create custom classes specific to a component in that components .scss file
  • Create custom classes used throughout the application in the app.core.scss file
2 Likes
6

@joshmorony exactly what I was looking for :+1:

7

Hi,

We’ve just released a very simple Ionic 2 theme, you can find it on gumroad:


It costs $12, we will need this so we can update and maintain the project based on your demands.

Any comments or requests will be appreciated.

Thanks,

8

please Check our website https://hybapps.com/themes?type=design-only&platform=7

this is the link for some professionals IONIC 2 themes and by the way they are at IONIC theme market ,just order with newest and you will see them or these are their Links





9

Looking for Ionic 2 themes?
Check Ion2FullApp, the most complete Starter App for Ionic2. It includes more than 34 carefully designed views and components. We also have a PRO version with functionalities included such as Facebook Login, Google Login, Google Maps, Google Places, Geolocation, and more. Hand crafted by Professionals, this multipurpose app template includes tons of different components to build the app you need.

image
ion2fullapp-ionicacademy.png1500×730 572 KB