Customize Ionic v3 Default Theme Colors
This lesson shows you how to adjust the core colors of the theme by setting the color map values. It also demonstrates how to extend this color map for more control and options.
Instructor: [00:00] When starting to create a custom theme for your Ionic application, it's usually best to see how much you can leverage from the existing infrastructure.
[00:08] The first adjustment you should consider making is adjusting the default color map. Ionic ships with five default color themes, primary, the Ionic blue, secondary, a nice green, danger, a red, light, an off-white, and dark, which is not quite a full black.
[00:28] I had these colors applied to a set of Ionic buttons in my template by setting a color attribute to each of the names of my color map. Hopefully, you have seen these colors as you've explored the documentation.
[00:42] Ionic components typically use the primary color as its default color value. That value would be the best place to start with our adjustments.
[00:52] Let's change our primary color to be the NASA blue instead of the Ionic blue. Switching to the variables.scss file, we'll find our color map. We'll change the primary value to 0B3D91.
[01:08] For the second color, we'll just set that to the NASA red, which is FC3D21. Saving our file, we'll see our buttons are now being colored with our theme colors. Danger and light remain unchanged.
[01:24] If we want more control, we can combine the colors further by setting the base color and its contrast color. We can see the result of the contrast color in how the text is colored in each button.
[01:35] If you note, nowhere in the template do I specify what the text color should be. This is all computed by the theme by picking up its contrast color value. Let's adjust our primary color to demonstrate this.
[01:49] I'll set the base color to the same blue as before, and it will define its contrast color. First, I will set it to white. Saving, and there's no difference. Let's change the contrast to black. Saving, and now we can see our text is black.
[02:11] It is possible to extend this color map to have another color option, say SpaceX blue. I can add this new value to my color map, say 558D65.
[02:21] Switching to my template, I'll copy a button and change its theme reference. Saving both files, and we can see it being applied.
[02:37] A word of caution here. Each color that you add to the color map, Ionic will generate CSS styles for all the Ionic components.
[02:46] This is approximately 50 kilobytes per color. If you need a custom color, but only for a specific component, consider limiting the scope that you apply the color to by either a custom status variable or overriding it directly.