Theming

Learn how to style the template with the styles of your app.

The template includes lots of pages, features and components but you are free to use just what you need and delete the code you don't. The code structure is super modularized so you will find easy to modify the code to fit your needs.

To learn more about theming an Ionic 5 app please go to https://ionicframework.com/docs/theming/basics

CSS Variables

CSS Variables provide easy customization of an application and allow a value to be stored in one place, then referenced in multiple other places.

So, for example if you want to change the colors of your app, by just changing some variables your app will have the desired colors in just a few seconds!

All of the Ionic components are themed using CSS Variables. CSS variables make possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to override Ionic components to match a brand or theme.

Learn how to use CSS Variables in Ionic Framework.

Theme colors and defaults

Theme Colors

In the file src/theme/variables.scss you will find all the color variables we used in to style this template. You can change them and see how to app changes the colors.

You can use the Color Generator to create a custom color palette for your app’s UI and then update the values in src/theme/variables.scss.

Font Family

In the file src/theme/variables.scss you can set the font family of the entire app.

--ion-font-family: 'Rubik', sans-serif;

Custom Colors

To add new colors we used the filesrc/theme/custom-colors.scss where we define colors for buttons for example. If you want to create specific colors different from the theme colors, you should put them here.

Platform Styles

Ionic provides platform specific styles based on the device the application is running on. Styling the components to match the device guidelines allows the application to be written once but look and feel native to the user depending on where it is accessed.

In some of the pages of this template we added some platform specific styles. For the sake of simplicity, in this cases, we created a separate stylesheet for each platform for each component.

Let's see the screenshot below, user-profile.page.ios.scss has some specific styles for iOS for the user profile page.

Sass

This project uses SASS, which basically is CSS with superpowers.

Each component has its dedicated sass files well structured with independent variables so you can have maximum modularity, flexibility and customizability.

Mixins

A Mixin is a block of code that lets us group CSS declarations we may reuse throughout our site. You can learn more in SASS documentation.

For this Ionic app we created a few custom mixins to ease the styling of some components.

You can find them under src/theme/mixins/inputs

ionic 5 full starter app mixins

The inputs.scss file imports all the mixins so when you want to use one of them from your scss file, you just need to import inputs.scss

@import "../../../theme/mixins/inputs/inputs";

How to use these mixins?

Each mixin defines some css4 variables. Each time you include a mixin into your styles, you can set the value for these variables.

Let's see an example with the Select Alert. The following code is for the definition of the mixin:

src/theme/mixins/inputs/select-alert.scss

@mixin select-alert() {
  // Default values
  --select-alert-color: #000;
  --select-alert-background: #FFF;
  --select-alert-margin: 16px;
  
  ... //more code
}

Now, when we want to use the select alert mixin we need to include it as the following code:

@include select-alert();

// Variables should be in a deeper selector or after the mixin include to override default values
--select-alert-color: var(--ion-color-lightest);
--select-alert-background: var(--ion-color-primary);
--select-alert-margin: var(--app-fair-margin);

Note that in the above code we set the values of the mixin variables to style this particular alert component.

We have the following mixins available for you to use. Let's go through each of them so you can understand how to use them.

CheckBox Tag

This mixin is used to create the tags selectors from the Filters page. Both the square and rounded tags are styled using this mixin.

checkbox tags in filters page

Color Radio

The color-radio mixin is used to style the color chooser component from the Filters page.

We use if from the src/app/forms/filters/forms-filters.page.scss and basically it help us transforming a traditional ion-radio-group into this beautiful color chooser component.

To learn how to use the Color Radio custom component go to:

Radio Tag

In the filters page we also have this budget selector which has the functionality of a ion-radio-group.

Of course you can change the use of this component for your personal use case by just changing the content of the tags.

Select Alert

We created this mixin to ease the job of styling an Alert Component.

Alert Component used to select size

Because alerts and in general all overlays are attached to the body or ion-app directly, we need to use ::ng-deep to access it from other pages such as FashionDetailsPage.

So, from src/app/fashion/details/fashion-details.page.scss, we include the select-alert() mixin, and we set the value for the mixin variables.

::ng-deep .variant-alert {
  @include select-alert();

  // Variables should be in a deeper selector or after the mixin include to override default values
  --select-alert-color: var(--ion-color-lightest);
  --select-alert-background: var(--ion-color-primary);
  --select-alert-margin: var(--app-fair-margin);
  ...
}