Adding custom colours to use with [color] property


#1

Hi all,

Version: Ionic 4.0.0-beta.0.
Framework: Angular 6

Scanning the new docs: https://beta.ionicframework.com/docs/theming/advanced/

There is no mention of how to add a new colour, outside of “primary/secondary etc”

I would like to use custom colors in the stencil components.

For example:

<ion-icon name='menu' color='charcoal'></ion-icon>

:root {
  --ion-color-charcoal: #454545;
  --ion-color-charcoal-rgb: 69,69,69;
  --ion-color-charcoal-contrast: #FFFFFF;
  --ion-color-charcoal-contrast-rgb: 255,255,255;
  --ion-color-charcoal-shade: #3D3D3D;
  --ion-color-charcoal-tint: #4C4C4C;
}

The above does not actually work.

Looking in ionic.functions.color.scss…

@function ion-color Uses the $colors map to pull out variations, although @function current-color just uses the css variable.

Bonus question:

Is it possible to add new colours at runtime via ngStyle?


#2

i’m also very interested in how to make this work like before.


#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://beta.ionicframework.com/docs/theming/advanced#color-language

  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.

    All of the components are not yet updated to include these variables, you can follow our progress on this issue: https://github.com/ionic-team/ionic/issues/14850


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:


[IONIC 4] color of ion-label
Ionic 4 : How to get color *values* from element styled with [color] directive
#5

Adding a new color for component level is not working
I added as below to one of my component

.ion-color-accent {
  --ion-color-accent : #673AB7;
  --ion-color-accent -rgb: 56, 128, 255;
  --ion-color-accent -contrast: #ffffff;
  --ion-color-accent -contrast-rgb: 255, 255, 255;
  --ion-color-accent -shade: rgb(129, 84, 206);
  --ion-color-accent -tint: #512DA8 ;
}

and I tried to get that color to my card background like :

But its not working and I doing something wrong. Help me if anyone knows, how to solve this


#6

Can you please be more specific? :slight_smile:

  1. How to you create a colorclass?
  2. How do you @import that class into the variables.scss? Does it need to be @imported in global.scss or variables.scss?

Cheers!


#7

two steps:
First I creat theme color variables named abcd in :root{ }:

 /** abcd **/
  --ion-color-abcd: #f0b000;
  --ion-color-abcd-rgb: 240,176,0;
  --ion-color-abcd-contrast: #000000;
  --ion-color-abcd-contrast-rgb: 0,0,0;
  --ion-color-abcd-shade: #d39b00;
  --ion-color-abcd-tint: #f2b81a;

Then customize my abcd theme:

.ion-color-abcd {
  --ion-color-base: var(--ion-color-abcd, #f00) !important;
  --ion-color-base-rgb: var(--ion-color-abcd-rgb, 56, 128, 255) !important;
  --ion-color-contrast: var(--ion-color-abcd-contrast, #06f) !important;
  --ion-color-contrast-rgb: var(--ion-color-abcd-contrast-rgb, 255, 255, 255) !important;
  --ion-color-shade: var(--ion-color-abcd-shade, #0001e0) !important;
  --ion-color-tint: var(--ion-color-abcd-tint, #ff80f0) !important
}

After defined my theme abcd, I can use it as a theme by using color property:

  <ion-badge color="abcd">99</ion-badge>
  <ion-button color="abcd">abcd</ion-button>

Or you can simplify the theme define steps in one:

.ion-color-abcd {
  --ion-color-base: #f0b000;
  --ion-color-base-rgb: 240, 176, 0;
  --ion-color-contrast: #000000;
  --ion-color-contrast-rgb: 0, 0, 0;
  --ion-color-shade: #d39b00;
  --ion-color-tint: #f2b81a
}

Then you could use the abcd theme in HTML as the same.
Hope this can help :wink:


#8

Finally!!! Someone who gets it :wink: Thanks alot!


#9

If I use the color attribute as shown above, it works as expected. But how can I use it in the SCSS file?

This doesn’t work

.slide1 {
  background-color: var(--ion-color-abcd);
}

Neither does this

.slide1 {
  background-color: ion-color-abcd;
}

#10

Sorry, maybe I didn’t catch your point excactly, so I reply this question according to my understanding.

Firstly, the ‘–ion-color-abcd’ with two dashes as a prefix is a variable that can be referenced anywhere, only if you defined it in the :root { }(essential). If not, you could use it in the scope where you have defined it only.
e.g. in my variables.scss file:

/* Set variables can be used globally with ':root{}' */
:root {
  /* Set the background of the entire app */
  --ion-background-color: #ff3700;

  /* Set the theme abcd's color variables */
  --ion-color-abcd: #f0b000;
  --ion-color-abcd-rgb: 240,176,0;
  --ion-color-abcd-contrast: #000000;
  --ion-color-abcd-contrast-rgb: 0,0,0;
  --ion-color-abcd-shade: #d39b00;
  --ion-color-abcd-tint: #f2b81a;
}

in whatever.scss

.slide1 {
  padding: 15px;
  background-color: var(--ion-color-abcd);
}
.ion-color-abcd {
  --ion-color-base: #f0b000;
  --ion-color-base-rgb: 240, 176, 0;
  --ion-color-contrast: #000000;
  --ion-color-contrast-rgb: 0, 0, 0;
  --ion-color-shade: #d39b00;
  --ion-color-tint: #f2b81a
}

in whatever.html

<p class="slide1">test text</p>

it works well

Secondly, a variable must with two dashes as the prefix, and referenced by the css function var() , so the use like background-color: ion-color-abcd; dosen’t work.

Thirdly, a color theme can be used as an ionic theme, the only thing you have to do is defining in the class of correct format, like .ion-color-yourColorThemeName, ionic will let yourColorThemeName become a theme. The example is ‘abcd’ theme as shown above.


#11

@BoXEFZT Thank you very much. It works for me now!!!