Styling and Theming

In this last lesson, we are going to focus on making a few style changes - mostly with some custom CSS but there will also be a few structural changes to the Ionic components themselves.

These are going to be reasonably basic changes, but the impact is quite large. We will go from a very bland looking application to one that looks quite polished.

Global Styles

We have two main files that affect the global styling of our application:

• src/theme/variables.scss where most of our CSS variables are defined
• src/global.scss where we place any custom CSS styles we want to apply globally

Let’s start by providing some modified theme variable values.

Modify the src/theme/variables.scss file to reflect the following:

:root {
  --ion-color-primary: #32db64;
  --ion-color-primary-rgb: 50, 219, 100;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #2cc158;
  --ion-color-primary-tint: #47df74;

  --ion-color-secondary: #2dd36f;
  --ion-color-secondary-rgb: 45, 211, 111;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #28ba62;
  --ion-color-secondary-tint: #42d77d;

  --ion-color-tertiary: #199e41;
  --ion-color-tertiary-rgb: 25, 158, 65;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #168b39;
  --ion-color-tertiary-tint: #30a854;

  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  --ion-color-dark: #1c1d3b;
  --ion-color-dark-rgb: 28, 29, 59;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #191a34;
  --ion-color-dark-tint: #33344f;

  --ion-color-medium: #f4f5f8;
  --ion-color-medium-rgb: 244, 245, 248;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #d7d8da;
  --ion-color-medium-tint: #f5f6f9;

  --ion-color-light: #ffffff;
  --ion-color-light-rgb: 255, 255, 255;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #e0e0e0;
  --ion-color-light-tint: #ffffff;
}

NOTE: A dark theme is also provided by default. We have deleted that so the styles above are always used, but if you prefer you can also define a separate dark theme.

You might be tempted to just do something like replace individual values in this file with the colours you want, but I highly recommend using the Ionic Color Generator to generate a complete set of styles. This allows you to just focus on the main colours you want, and the generator will automatically generate all the related colours like shade and tint which Ionic sometimes makes use of.

Add the following styles to src/global.scss:

:root {
  --ion-card-color: var(--ion-color-dark);
}

ion-app {
  background: var(--ion-color-dark);
}

ion-title img {
  max-height: 30px;
  width: auto;
}

ion-content {
  --ion-background-color: var(--ion-color-primary);

  ion-item-sliding {
    --ion-background-color: var(--ion-color-light);
  }
}