Adding custom colors to your Ionic app

I would have thought that a global pandemic would slow things down for me but I had more work to do than ever which is a nice problem to have I guess :)
Writing blog posts had to go on a brief pause but after a quick two week break I am ready to try to get you excited about the ease of use in Ionic.
Since it’s quite hot in the northern hemisphere, the next few posts are all going to be light and won’t require a lot of brain power to process ;)

The problem

Ionic comes with a few built in colors but every now and then you run into the issue that you need to add one special color to make your app shine again. You can either change one of the predefined ones, especially if it’s a color that defines your app, or you can create a whole new color and use it later.

Changing one of the built in colors is easy as you just have to go into the theme folder and fiddle around with one of them. However, there is a limited number of candidates for that. Yo can pretty much only change primary, secondary, and tertiary because the remaining colors (success, warning, danger, dark, medium, and light) already have a pretty strict semantic meaning and adding a green hue to a warning color, for example, can lead to potential issues down the road.

Let’s check out how to solve this in a more elegant way.

The solution

The easiest way you can get a full color definition is to go to the Ionic colors documentation and define your new color.

I have given my color the name Crojach and selected a nice shade of light blue (I am partially color blind so give me a break here :)

Once you select the color you want, you will see some auto generated scss code below similar to this

:root {
  --ion-color-crojach: #4edfe9;
  --ion-color-crojach-rgb: 78,223,233;
  --ion-color-crojach-contrast: #000000;
  --ion-color-crojach-contrast-rgb: 0,0,0;
  --ion-color-crojach-shade: #45c4cd;
  --ion-color-crojach-tint: #60e2eb;
}

.ion-color-crojach {
  --ion-color-base: var(--ion-color-crojach);
  --ion-color-base-rgb: var(--ion-color-crojach-rgb);
  --ion-color-contrast: var(--ion-color-crojach-contrast);
  --ion-color-contrast-rgb: var(--ion-color-crojach-contrast-rgb);
  --ion-color-shade: var(--ion-color-crojach-shade);
  --ion-color-tint: var(--ion-color-crojach-tint);
}

It’s important to stick everything generated into your code, otherwise it won’t work.

The first part is just a new color definition. It defines the HEX and RGB colors as well as the contrast colors, shades and tints. It’s the same as you would see it for the predefined colors that come with Ionic.

The second, selector, definition is what your color gets translated into by Ionic. Once you set a {Color} to your element, Ionic will add an ion-color-{Color} to that element. It will then check out your css files and apply the required color.

Colors in action

Let’s put it all together now. You can add the color definition anywhere you want. Just make sure it’s referenced.

I have created a new file theme/colors.scss and added the above auto generated code into it.

We then import this file into the global.scss file and are ready to use it in our app.

// theme/colors.scss

:root {
  --ion-color-crojach: #4edfe9;
  --ion-color-crojach-rgb: 78,223,233;
  --ion-color-crojach-contrast: #000000;
  --ion-color-crojach-contrast-rgb: 0,0,0;
  --ion-color-crojach-shade: #45c4cd;
  --ion-color-crojach-tint: #60e2eb;
}

.ion-color-crojach {
  --ion-color-base: var(--ion-color-crojach);
  --ion-color-base-rgb: var(--ion-color-crojach-rgb);
  --ion-color-contrast: var(--ion-color-crojach-contrast);
  --ion-color-contrast-rgb: var(--ion-color-crojach-contrast-rgb);
  --ion-color-shade: var(--ion-color-crojach-shade);
  --ion-color-tint: var(--ion-color-crojach-tint);
}

// global.scss

...
@import "./theme/colors.scss"

// home.page.html
<ion-header>
    <ion-toolbar>
        <ion-title>
            Colors
        </ion-title>
    </ion-toolbar>
</ion-header>
<ion-content>
    <div id="container">
        <ion-button color="crojach">
            Look how pretty I am
        </ion-button>
    </div>
</ion-content>

Once you run the app you will see something like this

It’s not the prettiest button (whatever the label says) but it’s a quick and easy way to generate more variety in your app.

Just keep in mind no to go overboard with the number of colors :)

As always, the full code is on Github.

Until next time,
Happy coding

Using cents for money values

Ever since people mastered counting most of civilization has used a base 10 numbering system thanks to the number of fingers most people have.

The problem

It all good until you have to come up with representations of fractions. Our computers operate in binary so all numbers are represented as 2^x and unfortunately there are only a few fractions that can accurately be represented like that: 0, 0.25, 0.5, 0.75, and 1.

For all other numbers, there will be an error in their representation which usually isn’t a problem since those small amounts will just get rounded away but if you perform a lot of operations those small errors will add up.

Let’s look at just 2 small examples:

Let’s say you are selling an article for $1.10 and a customer wants to buy 12 of them.
A human would calculate this as 12 * $1.10 = $13.20 and would be done with it while a computer would give you 13.200000000000001.

Now that’s not nice! It isn’t terrible either because you can fix it with a simple rounding procedure.

The second example we can have a look at is the following. You have upgraded your manufacturing process and can sell them now for $0.83. Let’s just calculate how much you have saved your customers per article. $1.10 - $0.83 = $0.27. Nice! The computer however thinks that your savings are actually $0.27000000000000013.

This, again, is something we could live without.

Simple solution

Represent all of your money values as cents or minor values of your currency.

Selling 12 items of $1.10 items would be 12 * 110 = 1320 and a simple conversion would bring this back to $13.20. Since you are dealing with integer numbers the entire problem with floats goes away and you are safe from potential miscalculations.

Another benefit in using integers over floats is that they are in general faster for the computer to work with so if you are working on applications that do a lot of calculations, you might see an improvement in this department as well.

Until next time, happy coding