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?

1 Like
#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:

5 Likes
Ionic 4 : How to get color *values* from element styled with [color] directive
[IONIC 4] color of ion-label
#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:

1 Like
#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!!!

#13

@barocsi I’d like to remind you that we have a Code of Conduct that we enforce for everyone.

Please keep the code of conduct in mind when posting on the forum.

If you have any constructive feedback or suggestions for how to improve the Theme Generator in the docs, please open an issue on the ionic-docs repo.

#14

Thanks for reminding that the abuse of the testing and contribution resources of community by the core dev team is unilateral.

#15

Let me highlight the important part of the COC:

Communication through any of Ionic’s channels (GitHub, Slack, Forum, IRC, mailing lists, Twitter, etc.) must be constructive and never resort to personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct.

I have seen none of the above in response to your comment, yet the way you are describing the color generator that someone put a lot of time and effort into creating to be a useful tool is both rude and unprofessional.

Mike has already suggested a way to add ideas on ways to improve the documentation. We are actively working to improve the documentation every day. In fact - it’s been a goal of ours to improve the color generator to include adding more colors, but if you head over to the Ionic docs issues you’ll see we are actively working on adding some missing things first.

Please try to remember that we are real people working on this. We are always looking for ways to improve the framework and the documentation. We do not intentionally make things difficult or leave things out, but sometimes things are missed, especially when something is under heavy development and constantly changing (which it was up until the v4 release).

If you want to know why certain decisions were made regarding Theming, Colors, Sass or CSS Variables, I’d be happy to explain it in more detail, but we won’t tolerate personal attacks.

Thank you.

1 Like