Create your account

Already have an account? Login here

Note: By joining, you will receive periodic emails from Coursetro. You can unsubscribe from these emails.

Create account

How to Properly Use Ionic Theme Variables

By Gary simon - Nov 22, 2017

With the release of the official Ionic DevApp app for previewing your app live on your mobile devices -- while developing, I figured I would cover a topic I haven't touched. Understanding how to properly customize the aesthetics of your Ionic components is very important, as it will help save you time and energy.

In this tutorial, we're going to set up a new Ionic app, and begin experimenting with a few components in a layout and figure out how we can make custom theme adjustments. We will also look at how to make theme adjustments based on specific devices (iOS, Android/Material Design, and the Windows Platform).

By showing you just a few components, you will understand how to use the Official Documentation to determine exactly which sass variables you need to target based on your needs.

Let's get started!

If you prefer watching a video..

Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.

Starting a New Ionic Project

We're going to use the Ionic CLI (Command Line Interface) tool to start a new project. I'm going to assume you all of the necessary prerequisites installed already (Nodejs, NPM, and the Ionic CLI):

$ ionic start ionic-theming sidemenu
$ cd ionic-theming

At this point, if you want to use the new Ionic DevApp app, install it on your phone via the play/app store and be sure you're connected to the Wifi. Then, open up the app and sign in to your Ionic account.

Once inside the new project folder, type:

$ ionic serve -l

We're adding the -l so that it shows up in the lab view in our browser.

At this point, the new Ionic project should be showing on both your browser and your phone!

Changing the Theme from Light to Dark

The first thing we're going to look at is how to change the default Ionic theme from light to dark. By default, it's set at light. 

To change it to dark, we'll visit /src/theme/variables.scss and at the bottom, we simply change:

// From
@import "ionic.theme.default";

// To
@import "ionic.theme.dark";

Save it, and you will notice the change on your phone and browser.

Understanding the Colors Sass Map

In this variables.scss file near the top, we have a Named Color Variables section that includes a $colors sass map.

It includes colors for:

  • primary
  • secondary
  • danger
  • light
  • dark

The primary color is what most Ionic components use. For instance, let's change the primary color to a pink:

$colors: (
  primary:    #EC14BE, 
  // Other colors removed for brevity
);

Save it, and you will notice that the button now turns our new pink color.

But what if we wanted our navbar background color to turn pink as well?

Changing the Color of a Component

If we visit /src/pages/home/home.html we'll see the HTML for the navbar. It looks like this:

  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>

Update the first line to the following:

<ion-navbar color="primary">

The result:

You can bind color to any other colors defined in the $colors sass map.

Adding Custom Colors to the Colors Sass Map

If you know you're going to use another color that's not already defined in the $colors sass map, you can add a new one.

Going back to variables.scss, let's define a new color:

$colors: (
  primary:    #EC14BE,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222,
  lightdark:  #363636
);

Here, we've added lightdark which is a color that's slightly lighter than the default dark color.

Be careful adding new colors to the sass map, because it will increase the size of your app as it creates a definition for each component.

Customizing Components based on Device

Let's add a searchbar to our app.

Add the following HTML to the home.html page, just before the closing ion-header tag, as shown here:

<ion-header>
  <ion-navbar color="primary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Home</ion-title>
  </ion-navbar>

  <ion-toolbar>
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>
</ion-header>

Save it, and look at the result:

We have an issue here! We can't see the iOS searchbar, and the Android searchbar is significantly different in appearance. 

First, let's try to assign the color attribute onto the ion-toolbar component:

  <ion-toolbar color="dark">
    <ion-searchbar></ion-searchbar>
  </ion-toolbar>

The result:

Well, that fixed iOS and it's using the dark color variable, but Android didn't budge a bit!

In this scenario, it makes sense to check out the official documentation for the Searchbar. Scroll to the bottom and you will see a section called Sass Variables. Aligned to the right of this lable are the tabs iOS - Material Design - Windows Platform.

Underneath, it provides a property, default value and description of each Sass variable.

Our goal is to change the background color of the searchbar for Android -- which uses Material Design. So, click on the Material Design tab and if you look closely enough, you will find a variable called $searchbar-md-input-background-color

By default, we can see that it's set to white #fff, so let's change that.

Copy the sass variable name and paste it into the variables.scss file just underneath the section shown below:

// App Material Design Variables
// --------------------------------------------------
// Material Design only Sass variables can go here

$searchbar-md-input-background-color: color($colors, lightdark);

Notice how we've set the value to color($colors, lightdark). This allows us to reference our custom lightdark color located in the $colors sass map, which is very useful so that we don't have to redefine colors.

Save it, and now the result should look like this:

More Practice

Let's add cards and a FAB component to our layout, so that we can develop more muscle memory by making customizations.

Add the following HTML to the bottom of the home.html file: (Note: Most of this comes directly from the documentation)

<ion-content class="card-background-page">
    
  <ion-card>
    <img src="assets/imgs/card-saopaolo.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>

  <ion-card>
    <img src="assets/imgs/card-amsterdam.png"/>
    <div class="card-title">Amsterdam</div>
    <div class="card-subtitle">64 Listings</div>
  </ion-card>

  <ion-card>
    <img src="assets/imgs/card-sf.png"/>
    <div class="card-title">San Francisco</div>
    <div class="card-subtitle">72 Listings</div>
  </ion-card>

  <ion-card>
    <img src="assets/imgs/card-madison.png"/>
    <div class="card-title">Madison</div>
    <div class="card-subtitle">28 Listings</div>
  </ion-card>

  <ion-fab right top>
      <button ion-fab color="primary"><ion-icon name="add"></ion-icon></button>
      <ion-fab-list side="left">
        <button ion-fab><ion-icon name="logo-facebook"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-twitter"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-vimeo"></ion-icon></button>
        <button ion-fab><ion-icon name="logo-googleplus"></ion-icon></button>
      </ion-fab-list>
    </ion-fab>

</ion-content>

You will need to save those 4 images, which can be done by visiting this page, and right clicking / saving each of the 4 files to the /src/assets/imgs/ folder.

Let's also add some CSS to the home.scss file for the cards, which again, come directly from the example from the documentation:

.card-background-page {
    
    ion-card {
    position: relative;
    text-align: center;
    }

    .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
    }

    .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
    }
    
}

The result now looks like this:

This doesn't look bad, but what if we wanted to change something other than the color?  What if we wanted to give our FAB more margin?

Let's take a look at the official docs for the FAB api. This time it has a global tab All that applies to all devices. 

It includes $fab-content-margin, which is what we want. We can also see the default value is 10px. Let's make it 20px.

Paste this just beneath the $colors sass map:

$fab-content-margin: 20px;

Save it, and the result should look like this:

Notice on the android preview, I clicked on the FAB icon to reveal the sub items. What if we wanted to change the background colors to dark grey? Back in the docs, we'll see a fab-list-button-background-color

Continuing on from variables.scss, add:

$fab-content-margin: 20px;
$fab-list-button-background-color: color($colors, dark);

Refresh and click on the FAB:

Conclusion

As you can see, Ionic makes it very easy to understand where and how to make modifications to colors and positioning with the help of the documentation and the variables sass file.


Share this post




Say something about this awesome post!