Adding custom colours to use with [color] property

Ionic Framework
3

There are a few ways to customize the colors:

  1. Adding a new color: determine the name of that color, let’s use vibrant as an example, and then create the class for it defining all of its variations:

    .ion-color-vibrant {
  --ion-color-base: #ffff00;
  --ion-color-base-rgb: 255,255,0;
  --ion-color-contrast: #000000;
  --ion-color-contrast-rgb: 0,0,0;
  --ion-color-shade: #e0e000;
  --ion-color-tint: #ffff1a;
}

    <ion-badge color="vibrant">99</ion-badge>

  2. Changing an existing color: right now we have named variables for the pre-defined colors that must be changed in order to work with the existing defaults the Ionic components use. To change the primary color, for example:

    :root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56,128,255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;
}

    More information on the different variations can be found here: https://ionicframework.com/docs/theming/colors#layered-colors

  3. Customizing a global color used across components: certain global variables exist for changing the theme of an app (such as adding a dark theme). For example changing the background color:

    :root {
  --ion-background-color: blue;
}

  4. Customizing a color on one component: we have defined background/color variables for components that have the color attribute. The following would change the background/color of all badges:

    ion-badge {
  --background: blue;
  --color: pink;
}

    Note: if you add the color attribute to a component it will take precedence over any --color/--background vars used.

I know you only asked about adding custom colors, but hopefully this helped to understand theming as a whole. This is something we need to update in the documentation once we’re happy with the API.

It is a goal of ours to make theming as simple as possible. We know there are some confusing pieces that haven’t come together yet, but we are working on it. I would like to update our color generator to easily allow you to add/modify colors and copy/paste it into your project. If anyone has any feedback, please let me know! Thanks. :slightly_smiling_face:

Edit: I’ve added a new color generator in the documentation which can be used to generate the necessary code to copy/paste into your app: https://ionicframework.com/docs/theming/colors#new-color-creator

13 Likes